@360crewing/ui 0.1.3

package/dist/components/FormActionButtons.js

@@ -0,0 +1,10 @@
+import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
+import { observer } from "mobx-react-lite";
+import Button from "./Button";
+const FormActionButtons = observer(({ isEditing, onSaveEdit, onDelete, isDisabled = false, addButtonText, children, variant = "default", saveLabel = "Save", deleteLabel = "Delete", addLabel = "Add", }) => {
+    if (variant === "none") {
+        return null;
+    }
+    return (_jsxs("div", { className: "buttons-container", children: [variant === "save-only" ? (_jsx(Button, { className: "default-button", onClick: onSaveEdit, isDisabled: isDisabled, children: saveLabel })) : (isEditing ? _jsxs(_Fragment, { children: [_jsx(Button, { className: "default-button", onClick: onSaveEdit, isDisabled: isDisabled, children: saveLabel }), _jsx(Button, { className: "inactive-button", onClick: onDelete, isDisabled: isDisabled, children: deleteLabel })] }) : _jsx(Button, { className: "default-button", onClick: onSaveEdit, children: addButtonText ?? addLabel })), children] }));
+});
+export default FormActionButtons;

package/dist/components/Icon.d.ts

@@ -0,0 +1,20 @@
+import React from "react";
+import "../styles/Icon.css";
+export interface IconProps {
+    /**
+     * The icon element to render (typically a `react-icons` component).
+     * Pass the icon as a child or via the `as` prop.
+     */
+    children?: React.ReactNode;
+    /** Pixel size — applied to width/height of the inner svg. */
+    size?: number;
+    /** Color — applied via `color` (text) and inherited by svg `fill: currentColor`. */
+    color?: string;
+    className?: string;
+    style?: React.CSSProperties;
+    onClick?: (e: React.MouseEvent<HTMLSpanElement>) => void;
+    /** Visually hidden label for screen readers. */
+    "aria-label"?: string;
+}
+declare const Icon: React.FC<IconProps>;
+export default Icon;

package/dist/components/Icon.js

@@ -0,0 +1,11 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import "../styles/Icon.css";
+const Icon = ({ children, size = 16, color, className, style, onClick, "aria-label": ariaLabel, }) => {
+    return (_jsx("span", { className: `crewing-icon ${className || ""}`.trim(), style: {
+            width: size,
+            height: size,
+            color,
+            ...style,
+        }, onClick: onClick, role: ariaLabel ? "img" : undefined, "aria-label": ariaLabel, children: children }));
+};
+export default Icon;

package/dist/components/IconButton.d.ts

@@ -0,0 +1,14 @@
+import React from "react";
+import "../styles/IconButton.css";
+export type IconButtonSize = "sm" | "md" | "lg";
+export type IconButtonStyle = "ghost" | "filled";
+export interface IconButtonProps extends Omit<React.ButtonHTMLAttributes<HTMLButtonElement>, "style" | "type"> {
+    size?: IconButtonSize;
+    iconStyle?: IconButtonStyle;
+    /** Required — purpose of the button for screen readers. */
+    "aria-label": string;
+    children: React.ReactNode;
+    style?: React.CSSProperties;
+}
+declare const IconButton: React.ForwardRefExoticComponent<IconButtonProps & React.RefAttributes<HTMLButtonElement>>;
+export default IconButton;

package/dist/components/IconButton.js

@@ -0,0 +1,9 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import classNames from "classnames";
+import { forwardRef } from "react";
+import "../styles/IconButton.css";
+const IconButton = forwardRef(({ size = "md", iconStyle = "ghost", children, className, disabled, ...rest }, ref) => {
+    return (_jsx("button", { ...rest, ref: ref, type: "button", disabled: disabled, className: classNames("ds-icon-button", `ds-icon-button--${size}`, `ds-icon-button--${iconStyle}`, className), children: children }));
+});
+IconButton.displayName = "IconButton";
+export default IconButton;

package/dist/components/InformationPanel.d.ts

@@ -0,0 +1,14 @@
+import React from "react";
+import "../styles/InformationPanel.css";
+export interface InformationItem {
+    label: string;
+    value: React.ReactNode;
+}
+export interface InformationPanelProps {
+    items: InformationItem[];
+    actions?: React.ReactNode;
+    className?: string;
+    style?: React.CSSProperties;
+}
+declare const InformationPanel: React.FC<InformationPanelProps>;
+export default InformationPanel;

package/dist/components/InformationPanel.js

@@ -0,0 +1,6 @@
+import { jsxs as _jsxs, jsx as _jsx } from "react/jsx-runtime";
+import "../styles/InformationPanel.css";
+const InformationPanel = ({ items, actions, className = "", style }) => {
+    return (_jsxs("div", { className: `information-panel ${className}`.trim(), style: style, children: [_jsx("div", { className: "information-items", children: items.map((it) => (_jsxs("div", { className: "information-item", children: [_jsxs("span", { className: "information-item-label", children: [it.label, ":"] }), _jsx("span", { className: "information-item-value", children: it.value || "-" })] }, it.label))) }), actions && (_jsx("div", { className: "information-actions", children: actions }))] }));
+};
+export default InformationPanel;

package/dist/components/LayoutBlock.d.ts

@@ -0,0 +1,6 @@
+import React from "react";
+export interface LayoutBlockProps {
+    children: React.ReactNode;
+}
+declare const LayoutBlock: React.FC<LayoutBlockProps>;
+export default LayoutBlock;

package/dist/components/LayoutBlock.js

@@ -0,0 +1,5 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+const LayoutBlock = ({ children }) => {
+    return _jsx("div", { className: "layout-block", children: children });
+};
+export default LayoutBlock;

package/dist/components/Page.d.ts

@@ -0,0 +1,12 @@
+import React from "react";
+import "../styles/Page.css";
+export interface PageProps {
+    title?: React.ReactNode;
+    subtitle?: React.ReactNode;
+    actions?: React.ReactNode;
+    children?: React.ReactNode;
+    className?: string;
+    style?: React.CSSProperties;
+}
+declare const Page: React.FC<PageProps>;
+export default Page;

package/dist/components/Page.js

@@ -0,0 +1,6 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import "../styles/Page.css";
+const Page = ({ title, subtitle, actions, children, className, style, }) => {
+    return (_jsxs("div", { className: `crewing-page ${className || ""}`.trim(), style: style, children: [(title || subtitle || actions) && (_jsxs("header", { className: "crewing-page__header", children: [_jsxs("div", { className: "crewing-page__heading", children: [title && _jsx("h1", { className: "crewing-page__title", children: title }), subtitle && _jsx("div", { className: "crewing-page__subtitle", children: subtitle })] }), actions && _jsx("div", { className: "crewing-page__actions", children: actions })] })), _jsx("div", { className: "crewing-page__content", children: children })] }));
+};
+export default Page;

package/dist/components/Pagination.d.ts

@@ -0,0 +1,19 @@
+import "../styles/Pagination.css";
+export interface PaginationProps {
+    currentPage: number;
+    totalPages: number;
+    totalResults: number;
+    onPageChange: (page: number) => void;
+    pageSize: number;
+    onPageSizeChange: (size: number) => void;
+    isDisabled?: boolean;
+    hidePageSizeSelector?: boolean;
+    /** Label rendered next to the page-size selector, default "Per page". */
+    perPageLabel?: string;
+    /** Label of the previous-page button, default "Back". */
+    backLabel?: string;
+    /** Label of the next-page button, default "Next". */
+    nextLabel?: string;
+}
+declare function Pagination({ currentPage, totalPages, totalResults, onPageChange, pageSize, onPageSizeChange, isDisabled, hidePageSizeSelector, perPageLabel, backLabel, nextLabel, }: PaginationProps): import("react/jsx-runtime").JSX.Element;
+export default Pagination;

package/dist/components/Pagination.js

@@ -0,0 +1,35 @@
+import { jsxs as _jsxs, jsx as _jsx } from "react/jsx-runtime";
+import "../styles/Pagination.css";
+function Pagination({ currentPage, totalPages, totalResults, onPageChange, pageSize, onPageSizeChange, isDisabled = false, hidePageSizeSelector = false, perPageLabel = "Per page", backLabel = "Back", nextLabel = "Next", }) {
+    const getVisiblePages = () => {
+        const maxVisiblePages = 4;
+        const pages = [];
+        if (totalPages <= maxVisiblePages) {
+            for (let i = 1; i <= totalPages; i++) {
+                pages.push(i);
+            }
+        }
+        else {
+            const start = 1;
+            const end = totalPages;
+            const range = Math.floor(maxVisiblePages / 2);
+            const rangeStart = Math.max(currentPage - range, start + 1);
+            const rangeEnd = Math.min(currentPage + range, end - 1);
+            pages.push(start);
+            if (rangeStart > start + 1) {
+                pages.push("...");
+            }
+            for (let i = rangeStart; i <= rangeEnd; i++) {
+                pages.push(i);
+            }
+            if (rangeEnd < end - 1) {
+                pages.push("...");
+            }
+            pages.push(end);
+        }
+        return pages;
+    };
+    const visiblePages = getVisiblePages();
+    return (_jsx("div", { className: "pagination-container", children: _jsxs("div", { className: "pages-wrapper", children: [!hidePageSizeSelector && (_jsxs("div", { className: "pagination-page-size", children: [_jsxs("label", { htmlFor: "pageSize", children: [perPageLabel, ": "] }), _jsx("select", { id: "pageSize", value: pageSize, onChange: (e) => onPageSizeChange(parseInt(e.target.value, 10)), disabled: isDisabled, children: [10, 25, 50, 100].map((size) => (_jsx("option", { value: size, children: size }, size))) })] })), _jsxs("div", { className: "pagination-pages", children: [_jsx("button", { type: "button", onClick: () => onPageChange(currentPage - 1), disabled: currentPage === 1 || isDisabled, className: "pagination-button pagination-button--nav pagination-button--prev", children: backLabel }), visiblePages.map((page, index) => page === "..." ? (_jsx("span", { className: "pagination-ellipsis", children: "..." }, `ellipsis-${index}`)) : (_jsx("button", { type: "button", onClick: () => onPageChange(page), className: `pagination-button pagination-button--page ${page === currentPage ? "active" : ""}`, disabled: isDisabled, children: page }, page))), _jsx("button", { type: "button", onClick: () => onPageChange(currentPage + 1), disabled: currentPage === totalPages || isDisabled, className: "pagination-button pagination-button--nav pagination-button--next", children: nextLabel })] })] }) }));
+}
+export default Pagination;

package/dist/components/Popover.d.ts

@@ -0,0 +1,27 @@
+import React from "react";
+import "../styles/Popover.css";
+export type PopoverSide = "top" | "right" | "bottom" | "left";
+export type PopoverAlign = "start" | "center" | "end";
+export interface PopoverProps {
+    /**
+     * Trigger element. Receives an onClick + aria-expanded + aria-controls handler.
+     * Must be a single React element that forwards refs.
+     */
+    trigger: React.ReactElement;
+    children: React.ReactNode;
+    side?: PopoverSide;
+    align?: PopoverAlign;
+    /** Controlled open state. Omit for uncontrolled. */
+    isOpen?: boolean;
+    defaultOpen?: boolean;
+    onOpenChange?: (open: boolean) => void;
+    /** Close when clicking outside the trigger / panel. Default true. */
+    closeOnOutsideClick?: boolean;
+    /** Close on Escape. Default true. */
+    closeOnEscape?: boolean;
+    className?: string;
+    /** Width override for the panel. */
+    panelWidth?: number | string;
+}
+declare const Popover: React.FC<PopoverProps>;
+export default Popover;

package/dist/components/Popover.js

@@ -0,0 +1,130 @@
+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/Popover.css";
+const computePosition = (anchor, panel, side, align, gap) => {
+    let top = 0;
+    let left = 0;
+    if (side === "top")
+        top = anchor.top - panel.height - gap;
+    else if (side === "bottom")
+        top = anchor.bottom + gap;
+    else if (side === "left")
+        left = anchor.left - panel.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 - panel.width;
+        else
+            left = anchor.left + (anchor.width - panel.width) / 2;
+    }
+    else {
+        if (align === "start")
+            top = anchor.top;
+        else if (align === "end")
+            top = anchor.bottom - panel.height;
+        else
+            top = anchor.top + (anchor.height - panel.height) / 2;
+    }
+    const margin = 8;
+    left = Math.min(Math.max(margin, left), window.innerWidth - panel.width - margin);
+    top = Math.min(Math.max(margin, top), window.innerHeight - panel.height - margin);
+    return { top: top + window.scrollY, left: left + window.scrollX };
+};
+const Popover = ({ trigger, children, side = "bottom", align = "start", isOpen, defaultOpen, onOpenChange, closeOnOutsideClick = true, closeOnEscape = true, className, panelWidth, }) => {
+    const id = useId();
+    const triggerRef = useRef(null);
+    const panelRef = useRef(null);
+    const isControlled = isOpen !== undefined;
+    const [internal, setInternal] = useState(defaultOpen ?? false);
+    const open = isControlled ? !!isOpen : internal;
+    const [pos, setPos] = useState(null);
+    const setOpen = useCallback((next) => {
+        if (!isControlled)
+            setInternal(next);
+        onOpenChange?.(next);
+    }, [isControlled, onOpenChange]);
+    useLayoutEffect(() => {
+        if (!open || !triggerRef.current || !panelRef.current)
+            return;
+        const a = triggerRef.current.getBoundingClientRect();
+        const p = panelRef.current.getBoundingClientRect();
+        setPos(computePosition(a, p, side, align, 8));
+    }, [open, side, align, children]);
+    useEffect(() => {
+        if (!open)
+            return;
+        const onScrollOrResize = () => {
+            if (!triggerRef.current || !panelRef.current)
+                return;
+            const a = triggerRef.current.getBoundingClientRect();
+            const p = panelRef.current.getBoundingClientRect();
+            setPos(computePosition(a, p, side, align, 8));
+        };
+        window.addEventListener("scroll", onScrollOrResize, true);
+        window.addEventListener("resize", onScrollOrResize);
+        return () => {
+            window.removeEventListener("scroll", onScrollOrResize, true);
+            window.removeEventListener("resize", onScrollOrResize);
+        };
+    }, [open, side, align]);
+    useEffect(() => {
+        if (!open)
+            return;
+        const onDocClick = (e) => {
+            if (!closeOnOutsideClick)
+                return;
+            const t = e.target;
+            if (!t)
+                return;
+            if (panelRef.current?.contains(t))
+                return;
+            if (triggerRef.current?.contains(t))
+                return;
+            setOpen(false);
+        };
+        const onKey = (e) => {
+            if (e.key === "Escape" && closeOnEscape) {
+                e.stopPropagation();
+                setOpen(false);
+                triggerRef.current?.focus();
+            }
+        };
+        document.addEventListener("mousedown", onDocClick);
+        document.addEventListener("keydown", onKey);
+        return () => {
+            document.removeEventListener("mousedown", onDocClick);
+            document.removeEventListener("keydown", onKey);
+        };
+    }, [open, closeOnOutsideClick, closeOnEscape, setOpen]);
+    if (!isValidElement(trigger)) {
+        return trigger;
+    }
+    const triggerProps = {
+        ref: (el) => {
+            triggerRef.current = el;
+            const r = trigger.ref;
+            if (typeof r === "function")
+                r(el);
+            else if (r && typeof r === "object")
+                r.current = el;
+        },
+        onClick: (e) => {
+            trigger.props.onClick?.(e);
+            if (e.defaultPrevented)
+                return;
+            setOpen(!open);
+        },
+        "aria-expanded": open,
+        "aria-controls": id,
+        "aria-haspopup": "dialog",
+    };
+    return (_jsxs(_Fragment, { children: [cloneElement(trigger, triggerProps), open && (_jsx("div", { ref: panelRef, id: id, role: "dialog", className: classNames("ds-popover", `ds-popover--${side}`, className), style: {
+                    ...(pos ? { top: pos.top, left: pos.left } : { visibility: "hidden" }),
+                    ...(panelWidth !== undefined ? { width: panelWidth } : {}),
+                }, children: children }))] }));
+};
+export default Popover;

package/dist/components/SearchInput.d.ts

@@ -0,0 +1,27 @@
+import React from "react";
+import { TextFieldSize, TextFieldState } from "./TextField";
+export interface SearchInputProps {
+    value?: string;
+    defaultValue?: string;
+    placeholder?: string;
+    name?: string;
+    isDisabled?: boolean;
+    size?: TextFieldSize;
+    state?: TextFieldState;
+    helpText?: string;
+    /** Fires for every keystroke after `debounceMs`. Set to 0 for instant. Default 200. */
+    debounceMs?: number;
+    onChange?: (value: string) => void;
+    onSubmit?: (value: string) => void;
+    onClear?: () => void;
+    /** Override the leading icon (defaults to a search glyph). */
+    leadingIcon?: React.ReactNode;
+    /** Hide the clear ✕ button when the field has text. Default false. */
+    hideClearAction?: boolean;
+    className?: string;
+    style?: React.CSSProperties;
+    autoFocus?: boolean;
+    id?: string;
+}
+declare const SearchInput: React.FC<SearchInputProps>;
+export default SearchInput;

package/dist/components/SearchInput.js

@@ -0,0 +1,44 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import classNames from "classnames";
+import { useEffect, useRef, useState } from "react";
+import TextField from "./TextField";
+const DefaultSearchIcon = () => (_jsxs("svg", { viewBox: "0 0 24 24", width: "1em", height: "1em", fill: "none", stroke: "currentColor", strokeWidth: 2, strokeLinecap: "round", strokeLinejoin: "round", "aria-hidden": "true", children: [_jsx("circle", { cx: "11", cy: "11", r: "7" }), _jsx("line", { x1: "21", y1: "21", x2: "16.65", y2: "16.65" })] }));
+const SearchInput = ({ value, defaultValue, placeholder = "Search…", name, isDisabled, size = "md", state = "default", helpText, debounceMs = 200, onChange, onSubmit, onClear, leadingIcon, hideClearAction, className, style, autoFocus, id, }) => {
+    const isControlled = value !== undefined;
+    const [internal, setInternal] = useState(defaultValue ?? "");
+    const current = isControlled ? (value ?? "") : internal;
+    const debounceTimer = useRef(null);
+    useEffect(() => () => {
+        if (debounceTimer.current)
+            window.clearTimeout(debounceTimer.current);
+    }, []);
+    const fire = (next) => {
+        if (debounceMs <= 0) {
+            onChange?.(next);
+            return;
+        }
+        if (debounceTimer.current)
+            window.clearTimeout(debounceTimer.current);
+        debounceTimer.current = window.setTimeout(() => onChange?.(next), debounceMs);
+    };
+    const setValue = (next) => {
+        if (!isControlled)
+            setInternal(next);
+        fire(next);
+    };
+    const onKeyDown = (e) => {
+        if (e.key === "Enter")
+            onSubmit?.(current);
+        if (e.key === "Escape" && current) {
+            e.preventDefault();
+            setValue("");
+            onClear?.();
+        }
+    };
+    const showClear = !hideClearAction && current.length > 0 && !isDisabled;
+    return (_jsx(TextField, { id: id, name: name, type: "search", value: current, onChange: setValue, onKeyDown: onKeyDown, placeholder: placeholder, isDisabled: isDisabled, size: size, state: state, helpText: helpText, leadingIcon: leadingIcon ?? _jsx(DefaultSearchIcon, {}), trailingAction: showClear ? (_jsx("button", { type: "button", className: "ds-input__clear", "aria-label": "Clear search", onClick: () => {
+                setValue("");
+                onClear?.();
+            }, children: "\u2715" })) : undefined, inputMode: "search", autoFocus: autoFocus, className: classNames("ds-search-input", className), style: style }));
+};
+export default SearchInput;

package/dist/components/ShadowedBlock.d.ts

@@ -0,0 +1,9 @@
+import React from "react";
+import "../styles/ShadowedBlock.css";
+export interface ShadowedBlockProps {
+    children: React.ReactNode;
+    className?: string;
+    style?: React.CSSProperties;
+}
+declare const ShadowedBlock: React.FC<ShadowedBlockProps>;
+export default ShadowedBlock;

package/dist/components/ShadowedBlock.js

@@ -0,0 +1,6 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import "../styles/ShadowedBlock.css";
+const ShadowedBlock = ({ children, className, style }) => {
+    return _jsx("div", { className: `shadowed-block ${className || ""}`, style: style, children: children });
+};
+export default ShadowedBlock;

package/dist/components/SidebarMenu.d.ts

@@ -0,0 +1,27 @@
+import React from "react";
+import "../styles/SidebarMenu.css";
+export type SidebarMenuItemState = "default" | "selected" | "disabled" | "danger" | "locked";
+export interface SidebarMenuItem {
+    key: string;
+    label: React.ReactNode;
+    state?: SidebarMenuItemState;
+    icon?: React.ReactNode;
+    trailing?: React.ReactNode;
+    onClick?: () => void;
+    href?: string;
+}
+export interface SidebarMenuProps {
+    items: SidebarMenuItem[];
+    /** Optional header title (e.g. "Menu"). */
+    title?: React.ReactNode;
+    /** Optional toggle handler for the leading hamburger icon. */
+    onToggle?: () => void;
+    className?: string;
+    style?: React.CSSProperties;
+}
+/**
+ * SidebarMenu — vertical admin-layout menu (Figma `SidebarMenu/Item`).
+ * Item states: default/selected/disabled/danger/locked.
+ */
+declare const SidebarMenu: React.FC<SidebarMenuProps>;
+export default SidebarMenu;

package/dist/components/SidebarMenu.js

@@ -0,0 +1,16 @@
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import classNames from "classnames";
+import "../styles/SidebarMenu.css";
+/**
+ * SidebarMenu — vertical admin-layout menu (Figma `SidebarMenu/Item`).
+ * Item states: default/selected/disabled/danger/locked.
+ */
+const SidebarMenu = ({ items, title, onToggle, className, style, }) => {
+    return (_jsxs("nav", { className: classNames("ds-sidebar-menu", className), style: style, children: [(title || onToggle) && (_jsxs("div", { className: "ds-sidebar-menu__header", children: [onToggle && (_jsxs("button", { type: "button", className: "ds-sidebar-menu__toggle", onClick: onToggle, "aria-label": "Toggle menu", children: [_jsx("span", {}), _jsx("span", {}), _jsx("span", {})] })), title && (_jsx("span", { className: "ds-sidebar-menu__title", children: title }))] })), _jsx("ul", { className: "ds-sidebar-menu__list", children: items.map((it) => {
+                    const state = it.state ?? "default";
+                    const interactive = state !== "disabled" && state !== "locked";
+                    const content = (_jsxs(_Fragment, { children: [_jsx("span", { className: "ds-sidebar-menu__lead", "aria-hidden": "true", children: it.icon ?? _jsx("span", { className: "ds-sidebar-menu__dot" }) }), _jsx("span", { className: "ds-sidebar-menu__label", children: it.label }), it.trailing && (_jsx("span", { className: "ds-sidebar-menu__trailing", children: it.trailing })), state === "locked" && !it.trailing && (_jsx("span", { className: "ds-sidebar-menu__lock", "aria-hidden": "true" }))] }));
+                    return (_jsx("li", { className: classNames("ds-sidebar-menu__item", `ds-sidebar-menu__item--${state}`), children: interactive && it.href ? (_jsx("a", { className: "ds-sidebar-menu__row", href: it.href, onClick: it.onClick, children: content })) : interactive ? (_jsx("button", { type: "button", className: "ds-sidebar-menu__row", onClick: it.onClick, children: content })) : (_jsx("span", { className: "ds-sidebar-menu__row", "aria-disabled": "true", children: content })) }, it.key));
+                }) })] }));
+};
+export default SidebarMenu;

package/dist/components/SkeletonLoader.d.ts

@@ -0,0 +1,4 @@
+import React from "react";
+import "react-loading-skeleton/dist/skeleton.css";
+export declare const SkeletonLoader: React.FC;
+export default SkeletonLoader;

package/dist/components/SkeletonLoader.js

@@ -0,0 +1,7 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import Skeleton from "react-loading-skeleton";
+import "react-loading-skeleton/dist/skeleton.css";
+export const SkeletonLoader = () => {
+    return (_jsxs("div", { style: { margin: "20px" }, children: [_jsx(Skeleton, { height: 35, width: 200, style: { marginBottom: 15 } }), _jsx(Skeleton, { height: 20, width: "90%" }), _jsx(Skeleton, { height: 20, width: "80%" }), _jsx(Skeleton, { height: 20, width: "70%", style: { marginBottom: 15 } }), _jsx(Skeleton, { height: 150, width: "100%" })] }));
+};
+export default SkeletonLoader;

package/dist/components/StatusBadge.d.ts

@@ -0,0 +1,20 @@
+import React from "react";
+import "../styles/StatusBadge.css";
+export type StatusBadgeStatus = "valid" | "expiring" | "expired" | "unlimited" | "neutral";
+export interface StatusBadgeProps {
+    status: StatusBadgeStatus;
+    children?: React.ReactNode;
+    /** Renders a small leading dot in `currentColor`. */
+    withDot?: boolean;
+    /** Drops the border for a flatter look. */
+    soft?: boolean;
+    className?: string;
+    style?: React.CSSProperties;
+    title?: string;
+}
+/**
+ * StatusBadge — lifecycle indicator for certificate/document/assignment states.
+ * Maps `status` to `--status-*` tokens; re-theme in tokens.css.
+ */
+declare const StatusBadge: React.FC<StatusBadgeProps>;
+export default StatusBadge;

package/dist/components/StatusBadge.js

@@ -0,0 +1,11 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import classNames from "classnames";
+import "../styles/StatusBadge.css";
+/**
+ * StatusBadge — lifecycle indicator for certificate/document/assignment states.
+ * Maps `status` to `--status-*` tokens; re-theme in tokens.css.
+ */
+const StatusBadge = ({ status, children, withDot, soft, className, style, title, }) => {
+    return (_jsxs("span", { className: classNames("ds-status-badge", `ds-status-badge--${status}`, soft && "ds-status-badge--soft", className), style: style, title: title, children: [withDot && _jsx("span", { className: "ds-status-badge__dot", "aria-hidden": "true" }), children] }));
+};
+export default StatusBadge;

package/dist/components/Table.d.ts

@@ -0,0 +1,39 @@
+import React from "react";
+import "../styles/Table.css";
+export type TableDensity = "comfortable" | "compact";
+export type SortDirection = "asc" | "desc" | null;
+export interface TableProps extends React.TableHTMLAttributes<HTMLTableElement> {
+    density?: TableDensity;
+    /** Striped zebra rows. */
+    isStriped?: boolean;
+    /** Hover highlight on rows. */
+    isHoverable?: boolean;
+    /** Sticky header — relies on a scroll container set on the parent. */
+    hasStickyHeader?: boolean;
+    /** Borders between rows. Default true. */
+    hasRowBorders?: boolean;
+}
+declare const Table: React.FC<TableProps>;
+export declare const TableHeader: React.FC<React.HTMLAttributes<HTMLTableSectionElement>>;
+export declare const TableBody: React.FC<React.HTMLAttributes<HTMLTableSectionElement>>;
+export interface TableRowProps extends React.HTMLAttributes<HTMLTableRowElement> {
+    isSelected?: boolean;
+    /** When true, applies a clickable affordance (pointer + focus styles). */
+    isClickable?: boolean;
+}
+export declare const TableRow: React.FC<TableRowProps>;
+export interface TableCellProps extends React.TdHTMLAttributes<HTMLTableCellElement> {
+    /** Numeric / monetary cell — right-aligns content. */
+    isNumeric?: boolean;
+    /** Truncate long text with ellipsis. */
+    truncate?: boolean;
+}
+export declare const TableCell: React.FC<TableCellProps>;
+export interface TableHeaderCellProps extends React.ThHTMLAttributes<HTMLTableCellElement> {
+    isNumeric?: boolean;
+    /** When provided, renders a sortable column header. */
+    sortDirection?: SortDirection;
+    onSortChange?: (next: SortDirection) => void;
+}
+export declare const TableHeaderCell: React.FC<TableHeaderCellProps>;
+export default Table;

package/dist/components/Table.js

@@ -0,0 +1,24 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import classNames from "classnames";
+import "../styles/Table.css";
+const Table = ({ density = "comfortable", isStriped, isHoverable, hasStickyHeader, hasRowBorders = true, className, children, ...rest }) => (_jsx("table", { className: classNames("ds-table", `ds-table--${density}`, isStriped && "ds-table--striped", isHoverable && "ds-table--hoverable", hasStickyHeader && "ds-table--sticky-header", !hasRowBorders && "ds-table--no-row-borders", className), ...rest, children: children }));
+export const TableHeader = ({ className, children, ...rest }) => (_jsx("thead", { className: classNames("ds-table__header", className), ...rest, children: children }));
+export const TableBody = ({ className, children, ...rest }) => (_jsx("tbody", { className: classNames("ds-table__body", className), ...rest, children: children }));
+export const TableRow = ({ isSelected, isClickable, className, children, ...rest }) => (_jsx("tr", { className: classNames("ds-table__row", isSelected && "is-selected", isClickable && "is-clickable", className), tabIndex: isClickable ? 0 : undefined, ...rest, children: children }));
+export const TableCell = ({ isNumeric, truncate, className, children, ...rest }) => (_jsx("td", { className: classNames("ds-table__cell", isNumeric && "ds-table__cell--numeric", truncate && "ds-table__cell--truncate", className), ...rest, children: children }));
+export const TableHeaderCell = ({ isNumeric, sortDirection, onSortChange, className, children, ...rest }) => {
+    const isSortable = onSortChange !== undefined;
+    const ariaSort = sortDirection === "asc" ? "ascending"
+        : sortDirection === "desc" ? "descending"
+            : isSortable ? "none" : undefined;
+    const cycleSort = () => {
+        if (!onSortChange)
+            return;
+        const next = sortDirection === "asc" ? "desc"
+            : sortDirection === "desc" ? null
+                : "asc";
+        onSortChange(next);
+    };
+    return (_jsx("th", { scope: "col", "aria-sort": ariaSort, className: classNames("ds-table__header-cell", isNumeric && "ds-table__cell--numeric", isSortable && "ds-table__header-cell--sortable", className), ...rest, children: isSortable ? (_jsxs("button", { type: "button", className: "ds-table__sort-trigger", onClick: cycleSort, children: [_jsx("span", { className: "ds-table__sort-label", children: children }), _jsx("span", { className: classNames("ds-table__sort-icon", sortDirection && `ds-table__sort-icon--${sortDirection}`), "aria-hidden": "true", children: sortDirection === "asc" ? "▲" : sortDirection === "desc" ? "▼" : "⇅" })] })) : children }));
+};
+export default Table;

package/dist/components/Tabs.d.ts

@@ -0,0 +1,34 @@
+import React from "react";
+import "../styles/Tabs.css";
+export type TabsVariant = "underline" | "segmented" | "pill";
+export type TabsSize = "sm" | "md" | "lg";
+export interface TabItem {
+    /** Stable identifier — used as the active value. */
+    id: string;
+    label: React.ReactNode;
+    /** Optional content panel rendered when this tab is active. */
+    content?: React.ReactNode;
+    /** Optional leading icon (rendered inside the trigger). */
+    icon?: React.ReactNode;
+    /** Optional trailing badge (count, dot, etc.). */
+    badge?: React.ReactNode;
+    isDisabled?: boolean;
+}
+export interface TabsProps {
+    items: TabItem[];
+    /** Controlled active tab id. Omit to render uncontrolled. */
+    value?: string;
+    /** Default active tab id for uncontrolled mode. Falls back to first item. */
+    defaultValue?: string;
+    onChange?: (id: string) => void;
+    variant?: TabsVariant;
+    size?: TabsSize;
+    /** Render tab list full-width (triggers stretch). */
+    isFullWidth?: boolean;
+    className?: string;
+    style?: React.CSSProperties;
+    /** Accessible label for the tablist. */
+    "aria-label"?: string;
+}
+declare const Tabs: React.FC<TabsProps>;
+export default Tabs;