@harborclient/sdk 0.4.6 → 0.5.0

package/dist/components/Resizable/useResizable.js

@@ -0,0 +1,151 @@
+import { useCallback, useEffect, useLayoutEffect, useRef, useState } from '@harborclient/sdk/react';
+/**
+ * Loads a persisted size from localStorage.
+ */
+function loadStoredSize(storageKey, defaultSize) {
+    try {
+        const raw = localStorage.getItem(storageKey);
+        if (!raw)
+            return defaultSize;
+        const size = Number(raw);
+        return Number.isFinite(size) ? size : defaultSize;
+    }
+    catch {
+        return defaultSize;
+    }
+}
+/**
+ * Persists a size to localStorage.
+ */
+function persistSize(storageKey, size) {
+    try {
+        localStorage.setItem(storageKey, String(size));
+    }
+    catch {
+        // Ignore quota or privacy-mode failures.
+    }
+}
+/**
+ * Clamps a size between min and optional max bounds.
+ */
+function clampSize(size, minSize, getMaxSize) {
+    const rawMax = getMaxSize?.() ?? Number.POSITIVE_INFINITY;
+    const maxSize = Math.max(minSize, rawMax);
+    return Math.min(maxSize, Math.max(minSize, size));
+}
+/**
+ * Tracks resizable panel size with pointer drag and optional persistence.
+ */
+export function useResizable({ axis, direction, defaultSize, minSize, getMaxSize, storageKey }) {
+    const [size, setSizeState] = useState(() => {
+        const initial = storageKey ? loadStoredSize(storageKey, defaultSize) : defaultSize;
+        return clampSize(initial, minSize, getMaxSize);
+    });
+    const [maxSize, setMaxSizeState] = useState(() => getMaxSize?.() ?? Number.POSITIVE_INFINITY);
+    const resizingRef = useRef(false);
+    const startPosRef = useRef(0);
+    const startSizeRef = useRef(defaultSize);
+    const sizeRef = useRef(size);
+    /**
+     * Keeps a ref in sync with state so drag handlers read the latest size.
+     */
+    useEffect(() => {
+        sizeRef.current = size;
+    }, [size]);
+    /**
+     * Refreshes the computed max size when layout changes or the panel is resized.
+     */
+    useLayoutEffect(() => {
+        /**
+         * Re-reads dynamic max bounds from the optional getter.
+         */
+        const updateMaxSize = () => {
+            setMaxSizeState(getMaxSize?.() ?? Number.POSITIVE_INFINITY);
+        };
+        updateMaxSize();
+        window.addEventListener('resize', updateMaxSize);
+        return () => window.removeEventListener('resize', updateMaxSize);
+    }, [getMaxSize, size]);
+    /**
+     * Updates panel size with min/max clamping applied.
+     */
+    const setSize = useCallback((nextSize) => {
+        setSizeState(clampSize(nextSize, minSize, getMaxSize));
+    }, [getMaxSize, minSize]);
+    /**
+     * Captures pointer position and current size when a resize drag begins.
+     */
+    const onResizeStart = useCallback((event) => {
+        event.preventDefault();
+        resizingRef.current = true;
+        startPosRef.current = axis === 'x' ? event.clientX : event.clientY;
+        startSizeRef.current = sizeRef.current;
+    }, [axis]);
+    /**
+     * Nudges panel size from arrow keys using the same axis/direction math as drag.
+     */
+    const onKeyboardResize = useCallback((event) => {
+        if (event.key === 'Enter' || event.key === ' ') {
+            event.preventDefault();
+            return;
+        }
+        const step = event.shiftKey ? 1 : 10;
+        let keyDelta = 0;
+        if (axis === 'x') {
+            if (event.key === 'ArrowRight')
+                keyDelta = step;
+            else if (event.key === 'ArrowLeft')
+                keyDelta = -step;
+        }
+        else if (event.key === 'ArrowDown') {
+            keyDelta = step;
+        }
+        else if (event.key === 'ArrowUp') {
+            keyDelta = -step;
+        }
+        if (keyDelta === 0)
+            return;
+        event.preventDefault();
+        const nextSize = clampSize(sizeRef.current + keyDelta * direction, minSize, getMaxSize);
+        setSizeState(nextSize);
+        if (storageKey) {
+            persistSize(storageKey, nextSize);
+        }
+    }, [axis, direction, getMaxSize, minSize, storageKey]);
+    /**
+     * Applies pointer delta to panel size during drag and persists on mouse up.
+     */
+    useEffect(() => {
+        /**
+         * Updates size from pointer movement while a resize drag is active.
+         *
+         * @param event - Window mousemove event.
+         */
+        const handleMouseMove = (event) => {
+            if (!resizingRef.current)
+                return;
+            const currentPos = axis === 'x' ? event.clientX : event.clientY;
+            const delta = (currentPos - startPosRef.current) * direction;
+            const nextSize = clampSize(startSizeRef.current + delta, minSize, getMaxSize);
+            setSizeState(nextSize);
+        };
+        /**
+         * Ends the resize drag and writes the final size to localStorage when configured.
+         */
+        const handleMouseUp = () => {
+            if (!resizingRef.current)
+                return;
+            resizingRef.current = false;
+            if (storageKey) {
+                persistSize(storageKey, sizeRef.current);
+            }
+        };
+        window.addEventListener('mousemove', handleMouseMove);
+        window.addEventListener('mouseup', handleMouseUp);
+        return () => {
+            window.removeEventListener('mousemove', handleMouseMove);
+            window.removeEventListener('mouseup', handleMouseUp);
+        };
+    }, [axis, direction, getMaxSize, minSize, storageKey]);
+    return { size, minSize, maxSize, setSize, onResizeStart, onKeyboardResize };
+}

package/dist/components/ResourceList/index.d.ts

@@ -0,0 +1,73 @@
+import type { JSX, ReactNode } from 'react';
+interface ResourceListProps {
+    /**
+     * List row elements, typically {@link ResourceListRow} items.
+     */
+    children: ReactNode;
+    /**
+     * Additional Tailwind classes merged onto the list element.
+     */
+    className?: string;
+}
+/**
+ * Vertical list shell used for bordered resource rows in settings and Team Hub.
+ *
+ * @param children - List item elements.
+ * @param className - Extra classes appended after the layout preset.
+ */
+export declare function ResourceList({ children, className }: ResourceListProps): JSX.Element;
+interface ResourceListRowProps {
+    /**
+     * Primary title or name for the resource.
+     */
+    primary: ReactNode;
+    /**
+     * Optional secondary line such as a URL or identifier.
+     */
+    secondary?: ReactNode;
+    /**
+     * Optional metadata rendered below primary/secondary content, e.g. badges.
+     */
+    meta?: ReactNode;
+    /**
+     * Trailing action buttons or menus.
+     */
+    actions?: ReactNode;
+    /**
+     * When true, allows primary content and actions to wrap on narrow widths.
+     */
+    wrap?: boolean;
+    /**
+     * Additional Tailwind classes merged onto the row element.
+     */
+    className?: string;
+}
+/**
+ * Bordered list row with primary text, optional secondary line, metadata, and actions.
+ *
+ * @param primary - Main label for the resource.
+ * @param secondary - Optional muted secondary line.
+ * @param meta - Optional content below the title block.
+ * @param actions - Trailing controls aligned to the row end.
+ * @param wrap - Whether the row uses flex-wrap for narrow layouts.
+ * @param className - Extra classes appended after the layout preset.
+ */
+export declare function ResourceListRow({ primary, secondary, meta, actions, wrap, className }: ResourceListRowProps): JSX.Element;
+/**
+ * Primary title styling for {@link ResourceListRow}.
+ *
+ * @param children - Title content.
+ */
+export declare function ResourceListPrimary({ children }: {
+    children: ReactNode;
+}): JSX.Element;
+/**
+ * Inline empty-state row rendered inside a {@link ResourceList}.
+ *
+ * @param children - Empty message content.
+ */
+export declare function ResourceListEmptyItem({ children }: {
+    children: ReactNode;
+}): JSX.Element;
+export {};
+//# sourceMappingURL=index.d.ts.map

package/dist/components/ResourceList/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/ResourceList/index.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,GAAG,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AAE5C,UAAU,iBAAiB;IACzB;;OAEG;IACH,QAAQ,EAAE,SAAS,CAAC;IAEpB;;OAEG;IACH,SAAS,CAAC,EAAE,MAAM,CAAC;CACpB;AAED;;;;;GAKG;AACH,wBAAgB,YAAY,CAAC,EAAE,QAAQ,EAAE,SAAS,EAAE,EAAE,iBAAiB,GAAG,GAAG,CAAC,OAAO,CAKpF;AAED,UAAU,oBAAoB;IAC5B;;OAEG;IACH,OAAO,EAAE,SAAS,CAAC;IAEnB;;OAEG;IACH,SAAS,CAAC,EAAE,SAAS,CAAC;IAEtB;;OAEG;IACH,IAAI,CAAC,EAAE,SAAS,CAAC;IAEjB;;OAEG;IACH,OAAO,CAAC,EAAE,SAAS,CAAC;IAEpB;;OAEG;IACH,IAAI,CAAC,EAAE,OAAO,CAAC;IAEf;;OAEG;IACH,SAAS,CAAC,EAAE,MAAM,CAAC;CACpB;AAED;;;;;;;;;GASG;AACH,wBAAgB,eAAe,CAAC,EAC9B,OAAO,EACP,SAAS,EACT,IAAI,EACJ,OAAO,EACP,IAAY,EACZ,SAAS,EACV,EAAE,oBAAoB,GAAG,GAAG,CAAC,OAAO,CAoBpC;AAED;;;;GAIG;AACH,wBAAgB,mBAAmB,CAAC,EAAE,QAAQ,EAAE,EAAE;IAAE,QAAQ,EAAE,SAAS,CAAA;CAAE,GAAG,GAAG,CAAC,OAAO,CAEtF;AAED;;;;GAIG;AACH,wBAAgB,qBAAqB,CAAC,EAAE,QAAQ,EAAE,EAAE;IAAE,QAAQ,EAAE,SAAS,CAAA;CAAE,GAAG,GAAG,CAAC,OAAO,CAExF"}

package/dist/components/ResourceList/index.js

@@ -0,0 +1,44 @@
+import { jsx as _jsx, jsxs as _jsxs } from "@harborclient/sdk/jsx-runtime";
+/**
+ * Vertical list shell used for bordered resource rows in settings and Team Hub.
+ *
+ * @param children - List item elements.
+ * @param className - Extra classes appended after the layout preset.
+ */
+export function ResourceList({ children, className }) {
+    const base = 'm-0 flex list-none flex-col gap-2 p-0';
+    const classes = className ? `${base} ${className}` : base;
+    return _jsx("ul", { className: classes, children: children });
+}
+/**
+ * Bordered list row with primary text, optional secondary line, metadata, and actions.
+ *
+ * @param primary - Main label for the resource.
+ * @param secondary - Optional muted secondary line.
+ * @param meta - Optional content below the title block.
+ * @param actions - Trailing controls aligned to the row end.
+ * @param wrap - Whether the row uses flex-wrap for narrow layouts.
+ * @param className - Extra classes appended after the layout preset.
+ */
+export function ResourceListRow({ primary, secondary, meta, actions, wrap = false, className }) {
+    const wrapClass = wrap ? 'flex-wrap' : '';
+    const base = `flex items-center justify-between gap-3 rounded-md border border-separator px-3 py-2 ${wrapClass}`.trim();
+    const classes = className ? `${base} ${className}` : base;
+    return (_jsxs("li", { className: classes, children: [_jsxs("div", { className: "min-w-0", children: [_jsx("div", { className: "min-w-0", children: primary }), secondary != null ? (_jsx("div", { className: "truncate text-[14px] text-muted", children: secondary })) : null, meta] }), actions ? (_jsx("div", { className: "flex shrink-0 flex-wrap items-center justify-end gap-2", children: actions })) : null] }));
+}
+/**
+ * Primary title styling for {@link ResourceListRow}.
+ *
+ * @param children - Title content.
+ */
+export function ResourceListPrimary({ children }) {
+    return _jsx("div", { className: "truncate text-[14px] font-medium text-text", children: children });
+}
+/**
+ * Inline empty-state row rendered inside a {@link ResourceList}.
+ *
+ * @param children - Empty message content.
+ */
+export function ResourceListEmptyItem({ children }) {
+    return _jsx("li", { className: "text-[14px] text-muted", children: children });
+}

package/dist/components/RowActionsMenu/index.d.ts

@@ -0,0 +1,33 @@
+import type { JSX } from 'react';
+export type MenuItem = {
+    label: string;
+    onSelect: () => void;
+    variant?: 'default' | 'danger';
+};
+interface Props {
+    /**
+     * Grouped menu entries shown when the trigger is open. Each inner array is
+     * one visual group separated by a divider line.
+     */
+    groups: MenuItem[][];
+    /**
+     * Unique id for this menu instance (e.g. "collection-3").
+     */
+    menuId: string;
+    /**
+     * Id of the currently open menu, or null when all are closed.
+     */
+    openMenuId: string | null;
+    /**
+     * Called when the user opens or closes a menu.
+     *
+     * @param id - Open menu id, or null to close.
+     */
+    onOpenChange: (id: string | null) => void;
+}
+/**
+ * Hamburger-triggered dropdown for row-level actions (rename, delete, etc.).
+ */
+export declare function RowActionsMenu({ groups, menuId, openMenuId, onOpenChange }: Props): JSX.Element;
+export {};
+//# sourceMappingURL=index.d.ts.map

package/dist/components/RowActionsMenu/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/RowActionsMenu/index.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,GAAG,EAAE,MAAM,OAAO,CAAC;AAKjC,MAAM,MAAM,QAAQ,GAAG;IACrB,KAAK,EAAE,MAAM,CAAC;IACd,QAAQ,EAAE,MAAM,IAAI,CAAC;IACrB,OAAO,CAAC,EAAE,SAAS,GAAG,QAAQ,CAAC;CAChC,CAAC;AAEF,UAAU,KAAK;IACb;;;OAGG;IACH,MAAM,EAAE,QAAQ,EAAE,EAAE,CAAC;IAErB;;OAEG;IACH,MAAM,EAAE,MAAM,CAAC;IAEf;;OAEG;IACH,UAAU,EAAE,MAAM,GAAG,IAAI,CAAC;IAE1B;;;;OAIG;IACH,YAAY,EAAE,CAAC,EAAE,EAAE,MAAM,GAAG,IAAI,KAAK,IAAI,CAAC;CAC3C;AAgBD;;GAEG;AACH,wBAAgB,cAAc,CAAC,EAAE,MAAM,EAAE,MAAM,EAAE,UAAU,EAAE,YAAY,EAAE,EAAE,KAAK,GAAG,GAAG,CAAC,OAAO,CA+E/F"}

package/dist/components/RowActionsMenu/index.js

@@ -0,0 +1,54 @@
+import { jsx as _jsx, jsxs as _jsxs } from "@harborclient/sdk/jsx-runtime";
+import { useEffect, useRef } from '@harborclient/sdk/react';
+import { Button } from '../Button/index.js';
+import { FaIcon } from '../FaIcon/index.js';
+import { faBars } from '@fortawesome/free-solid-svg-icons';
+/**
+ * Tailwind classes for a single menu item button.
+ *
+ * @param variant - Visual variant for default or destructive actions.
+ */
+function menuItemClass(variant) {
+    const base = 'block w-full cursor-pointer border-none bg-transparent px-3.5 py-1.5 text-left text-[14px] app-no-drag';
+    return variant === 'danger'
+        ? `${base} text-text hover:bg-danger/15 hover:text-danger`
+        : `${base} text-text hover:bg-selection`;
+}
+/**
+ * Hamburger-triggered dropdown for row-level actions (rename, delete, etc.).
+ */
+export function RowActionsMenu({ groups, menuId, openMenuId, onOpenChange }) {
+    const isOpen = openMenuId === menuId;
+    const rootRef = useRef(null);
+    /**
+     * Closes the menu on outside click or Escape while it is open.
+     */
+    useEffect(() => {
+        if (!isOpen)
+            return;
+        const handleMouseDown = (e) => {
+            if (rootRef.current && !rootRef.current.contains(e.target)) {
+                onOpenChange(null);
+            }
+        };
+        const handleKeyDown = (e) => {
+            if (e.key === 'Escape') {
+                onOpenChange(null);
+            }
+        };
+        document.addEventListener('mousedown', handleMouseDown);
+        document.addEventListener('keydown', handleKeyDown);
+        return () => {
+            document.removeEventListener('mousedown', handleMouseDown);
+            document.removeEventListener('keydown', handleKeyDown);
+        };
+    }, [isOpen, onOpenChange]);
+    return (_jsxs("div", { ref: rootRef, className: "relative shrink-0", children: [_jsx(Button, { type: "button", variant: "icon", className: isOpen ? 'opacity-100' : undefined, title: "Actions", "aria-label": "Row actions", "aria-haspopup": "menu", "aria-expanded": isOpen, onClick: (e) => {
+                    e.stopPropagation();
+                    onOpenChange(isOpen ? null : menuId);
+                }, children: _jsx(FaIcon, { icon: faBars, className: "h-3.5 w-3.5" }) }), isOpen && (_jsx("div", { role: "menu", className: "absolute right-0 top-full z-10 mt-0.5 min-w-[120px] rounded-md border border-separator bg-surface py-1 shadow-md app-no-drag", children: groups.map((group, groupIndex) => (_jsx("div", { role: "group", className: groupIndex > 0 ? 'border-t border-separator' : undefined, children: group.map((item) => (_jsx("button", { type: "button", role: "menuitem", className: menuItemClass(item.variant), onClick: (e) => {
+                            e.stopPropagation();
+                            onOpenChange(null);
+                            item.onSelect();
+                        }, children: item.label }, item.label))) }, groupIndex))) }))] }));
+}

package/dist/components/SegmentedTabs/index.d.ts

@@ -0,0 +1,107 @@
+import type { JSX, ReactNode } from 'react';
+export interface TabItem<T extends string> {
+    /**
+     * Unique tab identifier.
+     */
+    value: T;
+    /**
+     * Tab label or custom content.
+     */
+    label: ReactNode;
+    /**
+     * When true, the tab is not rendered.
+     */
+    hidden?: boolean;
+    /**
+     * When true, the tab button is disabled.
+     */
+    disabled?: boolean;
+    /**
+     * When true, renders a small dot indicating the tab has values set.
+     */
+    indicator?: boolean;
+}
+interface GroupProps<T extends string> {
+    /**
+     * Currently selected tab value.
+     */
+    value: T;
+    /**
+     * Called when the user selects a different tab.
+     *
+     * @param value - Newly selected tab value.
+     */
+    onChange: (value: T) => void;
+    /**
+     * Accessible name for the tab list.
+     */
+    ariaLabel: string;
+    /**
+     * Tab list and linked tab panels.
+     */
+    children: ReactNode;
+}
+/**
+ * Provides tab selection state and stable ids for `SegmentedTabs` and
+ * `SegmentedTabPanel` children.
+ */
+export declare function SegmentedTabsGroup<T extends string>({ value, onChange, ariaLabel, children }: GroupProps<T>): JSX.Element;
+interface PanelProps<T extends string> {
+    /**
+     * Tab value that controls visibility of this panel.
+     */
+    value: T;
+    /**
+     * Panel content shown when this tab is selected.
+     */
+    children: ReactNode;
+    /**
+     * Additional CSS classes for the panel container.
+     */
+    className?: string;
+}
+/**
+ * Renders a WAI-ARIA tab panel linked to the matching tab in the parent group.
+ */
+export declare function SegmentedTabPanel<T extends string>({ value, children, className }: PanelProps<T>): JSX.Element | null;
+interface Props<T extends string> {
+    /**
+     * Tab definitions to render.
+     */
+    tabs: TabItem<T>[];
+    /**
+     * Currently selected tab value. Omit when used inside `SegmentedTabsGroup`.
+     */
+    value?: T;
+    /**
+     * Called when the user selects a different tab. Omit when used inside
+     * `SegmentedTabsGroup`.
+     *
+     * @param value - Newly selected tab value.
+     */
+    onChange?: (value: T) => void;
+    /**
+     * When true, the group and each tab stretch to full width.
+     */
+    fullWidth?: boolean;
+    /**
+     * Additional CSS classes for the tab group container.
+     */
+    className?: string;
+    /**
+     * ARIA pattern for the control. Use `radiogroup` for single-choice settings
+     * pickers; use `tabs` with `SegmentedTabsGroup` for content switchers.
+     */
+    pattern?: 'tabs' | 'radiogroup';
+    /**
+     * Accessible name for the tab list or radio group. Omit when used inside
+     * `SegmentedTabsGroup`.
+     */
+    ariaLabel?: string;
+}
+/**
+ * macOS-style segmented tab control with WAI-ARIA tabs or radiogroup semantics.
+ */
+export declare function SegmentedTabs<T extends string>({ tabs, value: valueProp, onChange: onChangeProp, fullWidth, className, pattern, ariaLabel: ariaLabelProp }: Props<T>): JSX.Element;
+export {};
+//# sourceMappingURL=index.d.ts.map

package/dist/components/SegmentedTabs/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/SegmentedTabs/index.tsx"],"names":[],"mappings":"AASA,OAAO,KAAK,EAAE,GAAG,EAAiB,SAAS,EAAE,MAAM,OAAO,CAAC;AAI3D,MAAM,WAAW,OAAO,CAAC,CAAC,SAAS,MAAM;IACvC;;OAEG;IACH,KAAK,EAAE,CAAC,CAAC;IAET;;OAEG;IACH,KAAK,EAAE,SAAS,CAAC;IAEjB;;OAEG;IACH,MAAM,CAAC,EAAE,OAAO,CAAC;IAEjB;;OAEG;IACH,QAAQ,CAAC,EAAE,OAAO,CAAC;IAEnB;;OAEG;IACH,SAAS,CAAC,EAAE,OAAO,CAAC;CACrB;AA+BD,UAAU,UAAU,CAAC,CAAC,SAAS,MAAM;IACnC;;OAEG;IACH,KAAK,EAAE,CAAC,CAAC;IAET;;;;OAIG;IACH,QAAQ,EAAE,CAAC,KAAK,EAAE,CAAC,KAAK,IAAI,CAAC;IAE7B;;OAEG;IACH,SAAS,EAAE,MAAM,CAAC;IAElB;;OAEG;IACH,QAAQ,EAAE,SAAS,CAAC;CACrB;AAED;;;GAGG;AACH,wBAAgB,kBAAkB,CAAC,CAAC,SAAS,MAAM,EAAE,EACnD,KAAK,EACL,QAAQ,EACR,SAAS,EACT,QAAQ,EACT,EAAE,UAAU,CAAC,CAAC,CAAC,GAAG,GAAG,CAAC,OAAO,CAmB7B;AAED,UAAU,UAAU,CAAC,CAAC,SAAS,MAAM;IACnC;;OAEG;IACH,KAAK,EAAE,CAAC,CAAC;IAET;;OAEG;IACH,QAAQ,EAAE,SAAS,CAAC;IAEpB;;OAEG;IACH,SAAS,CAAC,EAAE,MAAM,CAAC;CACpB;AAED;;GAEG;AACH,wBAAgB,iBAAiB,CAAC,CAAC,SAAS,MAAM,EAAE,EAClD,KAAK,EACL,QAAQ,EACR,SAAS,EACV,EAAE,UAAU,CAAC,CAAC,CAAC,GAAG,GAAG,CAAC,OAAO,GAAG,IAAI,CAkBpC;AAED,UAAU,KAAK,CAAC,CAAC,SAAS,MAAM;IAC9B;;OAEG;IACH,IAAI,EAAE,OAAO,CAAC,CAAC,CAAC,EAAE,CAAC;IAEnB;;OAEG;IACH,KAAK,CAAC,EAAE,CAAC,CAAC;IAEV;;;;;OAKG;IACH,QAAQ,CAAC,EAAE,CAAC,KAAK,EAAE,CAAC,KAAK,IAAI,CAAC;IAE9B;;OAEG;IACH,SAAS,CAAC,EAAE,OAAO,CAAC;IAEpB;;OAEG;IACH,SAAS,CAAC,EAAE,MAAM,CAAC;IAEnB;;;OAGG;IACH,OAAO,CAAC,EAAE,MAAM,GAAG,YAAY,CAAC;IAEhC;;;OAGG;IACH,SAAS,CAAC,EAAE,MAAM,CAAC;CACpB;AAED;;GAEG;AACH,wBAAgB,aAAa,CAAC,CAAC,SAAS,MAAM,EAAE,EAC9C,IAAI,EACJ,KAAK,EAAE,SAAS,EAChB,QAAQ,EAAE,YAAY,EACtB,SAAiB,EACjB,SAAS,EACT,OAAgB,EAChB,SAAS,EAAE,aAAa,EACzB,EAAE,KAAK,CAAC,CAAC,CAAC,GAAG,GAAG,CAAC,OAAO,CA8GxB"}

package/dist/components/SegmentedTabs/index.js

@@ -0,0 +1,111 @@
+import { jsx as _jsx, jsxs as _jsxs } from "@harborclient/sdk/jsx-runtime";
+import { createContext, createElement, useCallback, useContext, useId, useMemo, useRef } from '@harborclient/sdk/react';
+import { resolveTabListKeyAction } from '../utils.js';
+import { segment, segmentGroup } from '../classes.js';
+const SegmentedTabsContext = createContext(null);
+/**
+ * Provides tab selection state and stable ids for `SegmentedTabs` and
+ * `SegmentedTabPanel` children.
+ */
+export function SegmentedTabsGroup({ value, onChange, ariaLabel, children }) {
+    const baseId = useId();
+    /**
+     * Memoizes context so tab ids stay stable across renders while value updates
+     * propagate to list and panel children.
+     */
+    const contextValue = useMemo(() => ({
+        value,
+        onChange: (nextValue) => onChange(nextValue),
+        ariaLabel,
+        getTabId: (tabValue) => `${baseId}-tab-${tabValue}`,
+        getPanelId: (tabValue) => `${baseId}-panel-${tabValue}`
+    }), [value, onChange, ariaLabel, baseId]);
+    return createElement(SegmentedTabsContext.Provider, { value: contextValue }, children);
+}
+/**
+ * Renders a WAI-ARIA tab panel linked to the matching tab in the parent group.
+ */
+export function SegmentedTabPanel({ value, children, className }) {
+    const context = useContext(SegmentedTabsContext);
+    if (!context) {
+        throw new Error('SegmentedTabPanel must be used within SegmentedTabsGroup');
+    }
+    if (context.value !== value)
+        return null;
+    return (_jsx("div", { role: "tabpanel", id: context.getPanelId(value), "aria-labelledby": context.getTabId(value), className: className, children: children }));
+}
+/**
+ * macOS-style segmented tab control with WAI-ARIA tabs or radiogroup semantics.
+ */
+export function SegmentedTabs({ tabs, value: valueProp, onChange: onChangeProp, fullWidth = false, className, pattern = 'tabs', ariaLabel: ariaLabelProp }) {
+    const context = useContext(SegmentedTabsContext);
+    const standaloneId = useId();
+    const tabRefs = useRef(new Map());
+    const value = context?.value ?? valueProp;
+    /**
+     * Resolves the change handler from group context or standalone props so the
+     * keyboard handler dependency stays stable across renders.
+     */
+    const onChange = useMemo(() => {
+        if (context)
+            return (nextValue) => context.onChange(nextValue);
+        return onChangeProp;
+    }, [context, onChangeProp]);
+    const ariaLabel = context?.ariaLabel ?? ariaLabelProp;
+    if (value === undefined || onChange === undefined) {
+        throw new Error('SegmentedTabs requires value and onChange, or must be used within SegmentedTabsGroup');
+    }
+    const getTabId = context
+        ? (tabValue) => context.getTabId(tabValue)
+        : (tabValue) => `${standaloneId}-tab-${tabValue}`;
+    const getPanelId = context
+        ? (tabValue) => context.getPanelId(tabValue)
+        : (tabValue) => `${standaloneId}-panel-${tabValue}`;
+    const visibleTabs = tabs.filter((tab) => !tab.hidden);
+    const groupClassName = [segmentGroup, fullWidth ? 'w-full' : '', className]
+        .filter(Boolean)
+        .join(' ');
+    /**
+     * Moves selection with arrow, Home, and End keys and focuses the newly
+     * selected tab or radio control.
+     *
+     * @param event - Keyboard event from the tab list or radio group container.
+     */
+    const handleKeyDown = useCallback((event) => {
+        const currentIndex = visibleTabs.findIndex((tab) => tab.value === value);
+        const disabledIndices = visibleTabs
+            .map((tab, index) => (tab.disabled ? index : -1))
+            .filter((index) => index >= 0);
+        const nextIndex = resolveTabListKeyAction(event.key, currentIndex, visibleTabs.length, {
+            disabledIndices
+        });
+        if (nextIndex === null)
+            return;
+        event.preventDefault();
+        const nextTab = visibleTabs[nextIndex];
+        if (nextTab.value !== value) {
+            onChange(nextTab.value);
+        }
+        requestAnimationFrame(() => {
+            tabRefs.current.get(nextTab.value)?.focus();
+        });
+    }, [visibleTabs, value, onChange]);
+    const isRadiogroup = pattern === 'radiogroup';
+    return (_jsx("div", { className: groupClassName, role: isRadiogroup ? 'radiogroup' : 'tablist', "aria-label": ariaLabel, onKeyDown: handleKeyDown, children: visibleTabs.map((tab) => {
+            const selected = value === tab.value;
+            const tabClassName = `${segment(selected)}${fullWidth ? ' flex-1' : ''}`;
+            return (_jsx("button", { ref: (element) => {
+                    if (element)
+                        tabRefs.current.set(tab.value, element);
+                    else
+                        tabRefs.current.delete(tab.value);
+                }, type: "button", className: tabClassName, disabled: tab.disabled, tabIndex: selected ? 0 : -1, onClick: () => onChange(tab.value), ...(isRadiogroup
+                    ? { role: 'radio', 'aria-checked': selected }
+                    : {
+                        role: 'tab',
+                        id: getTabId(tab.value),
+                        'aria-selected': selected,
+                        'aria-controls': getPanelId(tab.value)
+                    }), children: _jsxs("span", { className: "inline-flex items-center gap-1.5", children: [tab.label, tab.indicator && _jsx("span", { className: "h-1.5 w-1.5 rounded-full bg-accent", "aria-hidden": true })] }) }, tab.value));
+        }) }));
+}

package/dist/components/Spinner/index.d.ts

@@ -0,0 +1,26 @@
+import type { JSX } from 'react';
+type SpinnerSize = 'sm' | 'md';
+interface Props {
+    /**
+     * Visual size preset for the spinner SVG.
+     */
+    size?: SpinnerSize;
+    /**
+     * Accessible label announced while the spinner is visible.
+     */
+    label?: string;
+    /**
+     * Additional Tailwind classes merged onto the wrapper element.
+     */
+    className?: string;
+}
+/**
+ * Accent-colored spinning indicator shared by busy overlays, tabs, and modals.
+ *
+ * @param size - Visual size (`sm` or `md`).
+ * @param label - Accessible status label; when set, exposes `role="status"`.
+ * @param className - Extra classes on the wrapper span.
+ */
+export declare function Spinner({ size, label, className }: Props): JSX.Element;
+export {};
+//# sourceMappingURL=index.d.ts.map

package/dist/components/Spinner/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/Spinner/index.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,GAAG,EAAE,MAAM,OAAO,CAAC;AAEjC,KAAK,WAAW,GAAG,IAAI,GAAG,IAAI,CAAC;AAE/B,UAAU,KAAK;IACb;;OAEG;IACH,IAAI,CAAC,EAAE,WAAW,CAAC;IAEnB;;OAEG;IACH,KAAK,CAAC,EAAE,MAAM,CAAC;IAEf;;OAEG;IACH,SAAS,CAAC,EAAE,MAAM,CAAC;CACpB;AAYD;;;;;;GAMG;AACH,wBAAgB,OAAO,CAAC,EAAE,IAAW,EAAE,KAAK,EAAE,SAAS,EAAE,EAAE,KAAK,GAAG,GAAG,CAAC,OAAO,CA4B7E"}

package/dist/components/Spinner/index.js

@@ -0,0 +1,22 @@
+import { jsx as _jsx, jsxs as _jsxs } from "@harborclient/sdk/jsx-runtime";
+/**
+ * Returns width and height classes for the spinner size preset.
+ *
+ * @param size - Spinner size preset.
+ * @returns Tailwind dimension classes.
+ */
+function sizeClasses(size) {
+    return size === 'sm' ? 'h-3 w-3' : 'h-4 w-4';
+}
+/**
+ * Accent-colored spinning indicator shared by busy overlays, tabs, and modals.
+ *
+ * @param size - Visual size (`sm` or `md`).
+ * @param label - Accessible status label; when set, exposes `role="status"`.
+ * @param className - Extra classes on the wrapper span.
+ */
+export function Spinner({ size = 'md', label, className }) {
+    const wrapperBase = 'inline-flex items-center justify-center';
+    const wrapperClasses = className ? `${wrapperBase} ${className}` : wrapperBase;
+    return (_jsx("span", { className: wrapperClasses, role: label ? 'status' : undefined, "aria-label": label, children: _jsxs("svg", { className: `${sizeClasses(size)} animate-spin text-accent`, viewBox: "0 0 24 24", fill: "none", "aria-hidden": label ? true : undefined, children: [_jsx("circle", { className: "opacity-25", cx: "12", cy: "12", r: "10", stroke: "currentColor", strokeWidth: "4" }), _jsx("path", { className: "opacity-75", fill: "currentColor", d: "M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z" })] }) }));
+}

package/dist/components/StatusMessage/index.d.ts

@@ -0,0 +1,29 @@
+import type { JSX, ReactNode } from 'react';
+interface Props {
+    /**
+     * Status or helper text content.
+     */
+    children: ReactNode;
+    /**
+     * When true, exposes the message as a live region for assistive technologies.
+     */
+    live?: boolean;
+    /**
+     * Optional element id for `aria-describedby` linkage.
+     */
+    id?: string;
+    /**
+     * Additional Tailwind classes merged onto the status paragraph.
+     */
+    className?: string;
+}
+/**
+ * Muted helper or progress text with optional polite live-region semantics.
+ *
+ * @param children - Status message content.
+ * @param live - Whether to set `role="status"` and `aria-live="polite"`.
+ * @param className - Extra classes appended after the preset.
+ */
+export declare function StatusMessage({ children, live, id, className }: Props): JSX.Element;
+export {};
+//# sourceMappingURL=index.d.ts.map