@monolith-forensics/monolith-ui 1.3.112-dev.0 → 1.3.112-dev.2

package/dist/Kanban/Kanban.d.ts

@@ -1,2 +1,2 @@
 import { KanbanGroupKey, KanbanProps } from "./types";
-export declare const Kanban: <TCard, TGroup extends KanbanGroupKey>({ cards, getCardId, getCardGroup, getCardOrder, renderCard, onCardsReorder, groupOrder, groupLabels, renderColumnHeader, columnWidth, columnHeight, estimatedCardHeight, overscanCount, orderStep, minOrderGap, emptyColumnPlaceholder, className, }: KanbanProps<TCard, TGroup>) => import("react/jsx-runtime").JSX.Element;
+export declare const Kanban: <TCard, TGroup extends KanbanGroupKey>({ cards, getCardId, getCardGroup, getCardOrder, renderCard, onCardsReorder, groupOrder, groupLabels, renderColumnHeader, columnWidth, columnGap, cardGap, columnHeight, estimatedCardHeight, overscanCount, orderStep, minOrderGap, emptyColumnPlaceholder, className, }: KanbanProps<TCard, TGroup>) => import("react/jsx-runtime").JSX.Element;

package/dist/Kanban/Kanban.js

@@ -1,7 +1,7 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { DndContext, DragOverlay, KeyboardSensor, MeasuringStrategy, PointerSensor, closestCenter, getFirstCollision, pointerWithin, rectIntersection, useSensor, useSensors, } from "@dnd-kit/core";
 import { sortableKeyboardCoordinates } from "@dnd-kit/sortable";
-import { useCallback, useEffect, useRef, useState, } from "react";
+import { useCallback, useEffect, useRef, useState } from "react";
 import { KanbanColumn } from "./KanbanColumn";
 import { findContainer, fromCardToken, isCardToken, isGroupToken, moveCard, moveCardToInsertIndex, } from "./board";
 import { dropAnimation } from "./constants";
@@ -9,7 +9,7 @@ import { CardContainer, Board } from "./styles";
 import { useKanbanBoardData } from "./useKanbanBoardData";
 import { useKanbanRowHeights } from "./useKanbanRowHeights";
 import { DEFAULT_MIN_ORDER_GAP, DEFAULT_ORDER_STEP, calculateOrderValue, } from "./utils";
-export const Kanban = ({ cards, getCardId, getCardGroup, getCardOrder, renderCard, onCardsReorder, groupOrder, groupLabels, renderColumnHeader, columnWidth = 320, columnHeight, estimatedCardHeight = 100, overscanCount = 4, orderStep = DEFAULT_ORDER_STEP, minOrderGap = DEFAULT_MIN_ORDER_GAP, emptyColumnPlaceholder, className, }) => {
+export const Kanban = ({ cards, getCardId, getCardGroup, getCardOrder, renderCard, onCardsReorder, groupOrder, groupLabels, renderColumnHeader, columnWidth = 320, columnGap = 12, cardGap = 8, columnHeight, estimatedCardHeight = 100, overscanCount = 4, orderStep = DEFAULT_ORDER_STEP, minOrderGap = DEFAULT_MIN_ORDER_GAP, emptyColumnPlaceholder, className, }) => {
     var _a, _b;
     const [activeCardToken, setActiveCardToken] = useState(null);
     const [activeOverlayWidth, setActiveOverlayWidth] = useState(null);
@@ -214,14 +214,14 @@ export const Kanban = ({ cards, getCardId, getCardGroup, getCardOrder, renderCar
             droppable: {
                 strategy: MeasuringStrategy.Always,
             },
-        }, onDragStart: handleDragStart, onDragOver: handleDragOver, onDragEnd: handleDragEnd, onDragCancel: handleDragCancel, children: [_jsx(Board, { className: className, children: Object.keys(board).map((columnToken) => {
+        }, onDragStart: handleDragStart, onDragOver: handleDragOver, onDragEnd: handleDragEnd, onDragCancel: handleDragCancel, children: [_jsx(Board, { className: className, "$columnGap": columnGap, children: Object.keys(board).map((columnToken) => {
                     var _a, _b;
                     const columnItems = (_a = board[columnToken]) !== null && _a !== void 0 ? _a : [];
                     const groupValue = groupValueByToken.get(columnToken);
                     if (groupValue == null) {
                         return null;
                     }
-                    return (_jsx(KanbanColumn, { columnToken: columnToken, groupValue: groupValue, groupLabel: groupLabels === null || groupLabels === void 0 ? void 0 : groupLabels[String(groupValue)], renderColumnHeader: renderColumnHeader, itemTokens: columnItems, cardByToken: cardByToken, cardIdByToken: cardIdByToken, groupByToken: groupValueByToken, renderCard: renderCard, onMeasure: onRowMeasured, rowHeights: (_b = columnHeights[columnToken]) !== null && _b !== void 0 ? _b : {}, listRefMap: listRefMap, columnWidth: columnWidth, columnHeight: columnHeight, estimatedCardHeight: estimatedCardHeight, overscanCount: overscanCount, emptyColumnPlaceholder: emptyColumnPlaceholder }, columnToken));
+                    return (_jsx(KanbanColumn, { columnToken: columnToken, groupValue: groupValue, groupLabel: groupLabels === null || groupLabels === void 0 ? void 0 : groupLabels[String(groupValue)], renderColumnHeader: renderColumnHeader, itemTokens: columnItems, cardByToken: cardByToken, cardIdByToken: cardIdByToken, groupByToken: groupValueByToken, renderCard: renderCard, onMeasure: onRowMeasured, rowHeights: (_b = columnHeights[columnToken]) !== null && _b !== void 0 ? _b : {}, listRefMap: listRefMap, columnWidth: columnWidth, columnHeight: columnHeight, cardGap: cardGap, estimatedCardHeight: estimatedCardHeight, overscanCount: overscanCount, emptyColumnPlaceholder: emptyColumnPlaceholder }, columnToken));
                 }) }), _jsx(DragOverlay, { adjustScale: false, dropAnimation: dropAnimation, children: activeCard && activeGroup != null ? (_jsx("div", { style: { width: activeOverlayWidth !== null && activeOverlayWidth !== void 0 ? activeOverlayWidth : undefined }, children: _jsx(CardContainer, { "$isDragging": true, "$isDragOverlay": true, children: renderCard({
                             card: activeCard,
                             cardId: getCardId(activeCard),

package/dist/Kanban/KanbanColumn.d.ts

@@ -16,8 +16,9 @@ export interface KanbanColumnProps<TCard, TGroup extends KanbanGroupKey> {
     listRefMap: MutableRefObject<Record<string, VariableSizeList | null>>;
     columnWidth: number;
     columnHeight?: number;
+    cardGap: number;
     estimatedCardHeight: number;
     overscanCount: number;
     emptyColumnPlaceholder?: ReactNode;
 }
-export declare const KanbanColumn: <TCard, TGroup extends KanbanGroupKey>({ columnToken, groupValue, groupLabel, renderColumnHeader, itemTokens, cardByToken, cardIdByToken, groupByToken, renderCard, onMeasure, rowHeights, listRefMap, columnWidth, columnHeight, estimatedCardHeight, overscanCount, emptyColumnPlaceholder, }: KanbanColumnProps<TCard, TGroup>) => import("react/jsx-runtime").JSX.Element;
+export declare const KanbanColumn: <TCard, TGroup extends KanbanGroupKey>({ columnToken, groupValue, groupLabel, renderColumnHeader, itemTokens, cardByToken, cardIdByToken, groupByToken, renderCard, onMeasure, rowHeights, listRefMap, columnWidth, columnHeight, cardGap, estimatedCardHeight, overscanCount, emptyColumnPlaceholder, }: KanbanColumnProps<TCard, TGroup>) => import("react/jsx-runtime").JSX.Element;

package/dist/Kanban/KanbanColumn.js

@@ -6,9 +6,8 @@ import { useOverlayScrollbars } from "overlayscrollbars-react";
 import AutoSizer from "react-virtualized-auto-sizer";
 import { VariableSizeList } from "react-window";
 import { Column, ColumnBody, ColumnCount, ColumnHeader, EmptyColumn, } from "./styles";
-import { CARD_GAP } from "./constants";
 import { MemoizedSortableVirtualRow } from "./virtualRow";
-export const KanbanColumn = ({ columnToken, groupValue, groupLabel, renderColumnHeader, itemTokens, cardByToken, cardIdByToken, groupByToken, renderCard, onMeasure, rowHeights, listRefMap, columnWidth, columnHeight, estimatedCardHeight, overscanCount, emptyColumnPlaceholder, }) => {
+export const KanbanColumn = ({ columnToken, groupValue, groupLabel, renderColumnHeader, itemTokens, cardByToken, cardIdByToken, groupByToken, renderCard, onMeasure, rowHeights, listRefMap, columnWidth, columnHeight, cardGap, estimatedCardHeight, overscanCount, emptyColumnPlaceholder, }) => {
     const { setNodeRef, isOver } = useDroppable({
         id: columnToken,
         data: {
@@ -24,6 +23,7 @@ export const KanbanColumn = ({ columnToken, groupValue, groupLabel, renderColumn
         groupByToken,
         renderCard,
         onMeasure,
+        cardGap,
     }), [
         cardByToken,
         cardIdByToken,
@@ -32,6 +32,7 @@ export const KanbanColumn = ({ columnToken, groupValue, groupLabel, renderColumn
         itemTokens,
         onMeasure,
         renderCard,
+        cardGap,
     ]);
     const previousOrderTokensRef = useRef([]);
     const scrollTargetRef = useRef(null);
@@ -112,6 +113,6 @@ export const KanbanColumn = ({ columnToken, groupValue, groupLabel, renderColumn
                             }, outerRef: setScrollViewportRef, width: width, height: height, itemCount: cardCount, overscanCount: overscanCount, itemData: rowData, itemKey: (index, data) => data.itemTokens[index], itemSize: (index) => {
                                 var _a;
                                 const token = rowData.itemTokens[index];
-                                return (_a = rowHeights[token]) !== null && _a !== void 0 ? _a : estimatedCardHeight + CARD_GAP;
+                                return (_a = rowHeights[token]) !== null && _a !== void 0 ? _a : estimatedCardHeight + cardGap;
                             }, children: MemoizedSortableVirtualRow })) })) }) })] }));
 };

package/dist/Kanban/constants.d.ts

@@ -1,5 +1,4 @@
 import { DropAnimation } from "@dnd-kit/core";
 export declare const GROUP_PREFIX = "group::";
 export declare const CARD_PREFIX = "card::";
-export declare const CARD_GAP = 5;
 export declare const dropAnimation: DropAnimation;

package/dist/Kanban/constants.js

@@ -1,7 +1,6 @@
 import { defaultDropAnimationSideEffects } from "@dnd-kit/core";
 export const GROUP_PREFIX = "group::";
 export const CARD_PREFIX = "card::";
-export const CARD_GAP = 5;
 export const dropAnimation = {
     duration: 220,
     easing: "cubic-bezier(0.2, 0, 0, 1)",

package/dist/Kanban/styles.d.ts

@@ -1,4 +1,6 @@
-export declare const Board: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, never>> & string;
+export declare const Board: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components/dist/types").Substitute<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {
+    $columnGap?: number;
+}>> & string;
 export declare const Column: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components/dist/types").Substitute<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {
     $width: number;
     $isOver: boolean;

package/dist/Kanban/styles.js

@@ -2,7 +2,7 @@ import styled from "styled-components";
 export const Board = styled.div `
   display: flex;
   align-items: stretch;
-  gap: 12px;
+  gap: ${({ $columnGap }) => $columnGap !== null && $columnGap !== void 0 ? $columnGap : 12}px;
   width: 100%;
   height: 100%;
   min-height: 0;

package/dist/Kanban/types.d.ts

@@ -46,6 +46,8 @@ export interface KanbanProps<TCard, TGroup extends KanbanGroupKey> {
     renderColumnHeader?: (group: TGroup, cardCount: number) => ReactNode;
     /** Width of each column in pixels. Defaults to `320`. */
     columnWidth?: number;
+    /** Gap between columns in pixels. Defaults to `8`. */
+    columnGap?: number;
     /** Fixed column body height in pixels. If omitted, it grows with container layout. */
     columnHeight?: number;
     /** Fallback card height estimate for virtualization. Defaults to `100`. */
@@ -60,4 +62,6 @@ export interface KanbanProps<TCard, TGroup extends KanbanGroupKey> {
     emptyColumnPlaceholder?: ReactNode;
     /** Optional class name applied to the board root element. */
     className?: string;
+    /** Gap between cards in pixels. Defaults to `8`. */
+    cardGap?: number;
 }

package/dist/Kanban/virtualRow.d.ts

@@ -8,6 +8,7 @@ export interface ColumnRowData<TCard, TGroup extends KanbanGroupKey> {
     cardIdByToken: Map<string, string>;
     groupByToken: Map<string, TGroup>;
     renderCard: (args: RenderCardArgs<TCard, TGroup>) => ReactNode;
+    cardGap: number;
     onMeasure: (columnToken: string, cardToken: string, index: number, height: number) => void;
 }
 export declare const MemoizedSortableVirtualRow: import("react").MemoExoticComponent<({ data, index, style, }: ListChildComponentProps<ColumnRowData<any, any>>) => import("react/jsx-runtime").JSX.Element | null>;

package/dist/Kanban/virtualRow.js

@@ -4,7 +4,6 @@ import { CSS } from "@dnd-kit/utilities";
 import { areEqual, } from "react-window";
 import { memo, useCallback, useEffect, useState } from "react";
 import { CardContainer } from "./styles";
-import { CARD_GAP } from "./constants";
 const SortableVirtualRow = ({ data, index, style, }) => {
     const cardToken = data.itemTokens[index];
     const card = data.cardByToken.get(cardToken);
@@ -36,7 +35,7 @@ const SortableVirtualRow = ({ data, index, style, }) => {
             if (!nextHeight || nextHeight <= 0) {
                 return;
             }
-            data.onMeasure(data.columnToken, cardToken, index, Math.ceil(nextHeight) + CARD_GAP);
+            data.onMeasure(data.columnToken, cardToken, index, Math.ceil(nextHeight) + data.cardGap);
         });
         observer.observe(contentNode);
         return () => observer.disconnect();
@@ -44,7 +43,7 @@ const SortableVirtualRow = ({ data, index, style, }) => {
     if (!card || !cardId || group == null) {
         return null;
     }
-    return (_jsx("div", { ref: setCombinedRef, style: Object.assign(Object.assign({}, style), { transform: CSS.Transform.toString(transform), transition, willChange: isDragging || isSorting ? "transform" : undefined, zIndex: isDragging ? 2 : 1 }), children: _jsx(CardContainer, { ref: setContentNode, style: { marginBottom: CARD_GAP }, "$isDragging": isDragging, "$isDragOverlay": false, children: _jsx("div", Object.assign({}, attributes, listeners, { children: data.renderCard({
+    return (_jsx("div", { ref: setCombinedRef, style: Object.assign(Object.assign({}, style), { transform: CSS.Transform.toString(transform), transition, willChange: isDragging || isSorting ? "transform" : undefined, zIndex: isDragging ? 2 : 1 }), children: _jsx(CardContainer, { ref: setContentNode, style: { marginBottom: data.cardGap }, "$isDragging": isDragging, "$isDragOverlay": false, children: _jsx("div", Object.assign({}, attributes, listeners, { children: data.renderCard({
                     card,
                     cardId,
                     group,

package/dist/SegmentedControl/SegmentedControl.d.ts

@@ -0,0 +1,3 @@
+import { SegmentedControlProps } from "./SegmentedControl.types";
+export type { SegmentedControlDataItem, SegmentedControlProps, SegmentedControlVariant, } from "./SegmentedControl.types";
+export declare const SegmentedControl: React.FC<SegmentedControlProps>;

package/dist/SegmentedControl/SegmentedControl.js

@@ -0,0 +1,67 @@
+var __rest = (this && this.__rest) || function (s, e) {
+    var t = {};
+    for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
+        t[p] = s[p];
+    if (s != null && typeof Object.getOwnPropertySymbols === "function")
+        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
+            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
+                t[p[i]] = s[p[i]];
+        }
+    return t;
+};
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useUncontrolled } from "@mantine/hooks";
+import { useEffect, useMemo, useRef } from "react";
+import { getFirstEnabledIndex, normalizeSegmentedData } from "./SegmentedControl.utils";
+import { StyledIndicator, StyledRoot, StyledSegmentButton, } from "./SegmentedControl.styles";
+import { useSegmentedKeyboardNav } from "./useSegmentedKeyboardNav";
+export const SegmentedControl = (_a) => {
+    var { data, value, defaultValue, onChange, size = "sm", fullWidth = false, disabled = false, variant = "outlined", activeColor, name, className, style, onKeyDown } = _a, other = __rest(_a, ["data", "value", "defaultValue", "onChange", "size", "fullWidth", "disabled", "variant", "activeColor", "name", "className", "style", "onKeyDown"]);
+    const normalizedData = useMemo(() => normalizeSegmentedData(data), [data]);
+    const firstEnabledValue = useMemo(() => { var _a, _b; return (_b = (_a = normalizedData.find((item) => !item.disabled)) === null || _a === void 0 ? void 0 : _a.value) !== null && _b !== void 0 ? _b : ""; }, [normalizedData]);
+    const [_value, handleChange] = useUncontrolled({
+        value,
+        defaultValue,
+        finalValue: firstEnabledValue,
+        onChange,
+    });
+    const activeIndex = normalizedData.findIndex((item) => item.value === _value);
+    const selectedItem = normalizedData[activeIndex];
+    const buttonRefs = useRef([]);
+    useEffect(() => {
+        if (normalizedData.length === 0)
+            return;
+        if (selectedItem && !selectedItem.disabled)
+            return;
+        const firstEnabled = normalizedData.find((item) => !item.disabled);
+        if (!firstEnabled)
+            return;
+        if (_value !== firstEnabled.value) {
+            handleChange(firstEnabled.value);
+        }
+    }, [normalizedData, selectedItem, _value, handleChange]);
+    const handleSelect = (item) => {
+        if (disabled || item.disabled)
+            return;
+        handleChange(item.value);
+    };
+    const handleKeyDown = useSegmentedKeyboardNav({
+        disabled,
+        data: normalizedData,
+        activeIndex,
+        onChange: handleChange,
+        buttonRefs,
+        onKeyDown,
+    });
+    const columnCount = Math.max(normalizedData.length, 1);
+    const firstEnabledIndex = getFirstEnabledIndex(normalizedData);
+    return (_jsxs(StyledRoot, Object.assign({ role: "radiogroup", "aria-disabled": disabled, className: className, style: Object.assign({ gridTemplateColumns: `repeat(${columnCount}, minmax(0, 1fr))` }, style), "$fullWidth": fullWidth, "$disabled": disabled, onKeyDown: handleKeyDown }, other, { children: [name && _jsx("input", { type: "hidden", name: name, value: _value || "" }), activeIndex >= 0 && !(selectedItem === null || selectedItem === void 0 ? void 0 : selectedItem.disabled) && (_jsx(StyledIndicator, { "$index": activeIndex, "$count": columnCount, "$variant": variant, "$activeColor": activeColor })), normalizedData.map((item, index) => {
+                const isActive = item.value === _value && !item.disabled;
+                const isSegmentDisabled = disabled || item.disabled;
+                return (_jsx(StyledSegmentButton, { ref: (node) => {
+                        buttonRefs.current[index] = node;
+                    }, type: "button", role: "radio", "aria-checked": isActive, disabled: isSegmentDisabled, tabIndex: isActive || (activeIndex < 0 && index === firstEnabledIndex)
+                        ? 0
+                        : -1, "$size": size, "$active": isActive, "$variant": variant, "$activeColor": activeColor, onClick: () => handleSelect(item), children: item.label }, item.value));
+            })] })));
+};

package/dist/SegmentedControl/SegmentedControl.styles.d.ts

@@ -0,0 +1,18 @@
+import { Size } from "../core";
+import { SegmentedControlVariant } from "./SegmentedControl.types";
+export declare const StyledRoot: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components/dist/types").Substitute<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {
+    $fullWidth: boolean;
+    $disabled: boolean;
+}>> & string;
+export declare const StyledIndicator: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components/dist/types").Substitute<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {
+    $index: number;
+    $count: number;
+    $variant: SegmentedControlVariant;
+    $activeColor?: string;
+}>> & string;
+export declare const StyledSegmentButton: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components/dist/types").Substitute<import("react").DetailedHTMLProps<import("react").ButtonHTMLAttributes<HTMLButtonElement>, HTMLButtonElement>, {
+    $size?: Size;
+    $active: boolean;
+    $variant: SegmentedControlVariant;
+    $activeColor?: string;
+}>> & string;

package/dist/SegmentedControl/SegmentedControl.styles.js

@@ -0,0 +1,77 @@
+import styled from "styled-components";
+import { getSegmentFontSize, getSegmentHeight, resolveActiveColor, } from "./SegmentedControl.utils";
+export const StyledRoot = styled.div `
+  user-select: none;
+  position: relative;
+  display: grid;
+  align-items: center;
+  width: ${({ $fullWidth }) => ($fullWidth ? "100%" : "fit-content")};
+  min-width: ${({ $fullWidth }) => ($fullWidth ? "0" : "200px")};
+  padding: 3px;
+  border-radius: 8px;
+  border: 1px solid ${({ theme }) => theme.palette.action.hover};
+  background: ${({ theme }) => theme.palette.background.secondary};
+  opacity: ${({ $disabled }) => ($disabled ? 0.6 : 1)};
+  pointer-events: ${({ $disabled }) => ($disabled ? "none" : "auto")};
+`;
+export const StyledIndicator = styled.div `
+  position: absolute;
+  top: 3px;
+  left: 3px;
+  z-index: 1;
+  height: calc(100% - 6px);
+  width: ${({ $count }) => `calc((100% - 6px) / ${$count})`};
+  border-radius: 6px;
+  border: 1px solid
+    ${({ theme, $variant, $activeColor }) => {
+    const resolved = resolveActiveColor(theme, $activeColor);
+    return $variant === "contained" ? resolved.main : resolved.main;
+}};
+  background: ${({ theme, $variant, $activeColor }) => {
+    const resolved = resolveActiveColor(theme, $activeColor);
+    return $variant === "contained"
+        ? resolved.main
+        : theme.palette.background.paper;
+}};
+  transform: translateX(${({ $index }) => `${$index * 100}%`});
+  transition: transform 160ms ease;
+`;
+export const StyledSegmentButton = styled.button `
+  position: relative;
+  z-index: 2;
+  border: none;
+  outline: none;
+  padding: 0 12px;
+  margin: 0;
+  border-radius: 6px;
+  background: transparent;
+  color: ${({ theme, $active, $variant, $activeColor }) => {
+    const resolved = resolveActiveColor(theme, $activeColor);
+    if (!$active)
+        return theme.palette.text.secondary;
+    return $variant === "contained" ? resolved.contrastText : resolved.main;
+}};
+  font-size: ${({ $size }) => getSegmentFontSize($size)};
+  font-weight: 500;
+  line-height: 1;
+  height: ${({ $size }) => `${getSegmentHeight($size)}px`};
+  white-space: nowrap;
+  cursor: pointer;
+  transition:
+    color 160ms ease,
+    background-color 160ms ease;
+
+  &:hover {
+    background: ${({ theme, $active }) => $active ? "transparent" : theme.palette.action.hover};
+  }
+
+  &:focus-visible {
+    box-shadow: inset 0 0 0 1px ${({ theme }) => theme.palette.primary.main};
+  }
+
+  &:disabled {
+    cursor: not-allowed;
+    color: ${({ theme }) => theme.palette.text.disabled};
+    background: transparent;
+  }
+`;

package/dist/SegmentedControl/SegmentedControl.types.d.ts

@@ -0,0 +1,25 @@
+import { HTMLAttributes, ReactNode } from "react";
+import { Size } from "../core";
+export type NormalizedSegmentedItem = {
+    label: ReactNode;
+    value: string;
+    disabled: boolean;
+};
+export type SegmentedControlDataItem = string | {
+    label: ReactNode;
+    value: string;
+    disabled?: boolean;
+};
+export type SegmentedControlVariant = "outlined" | "contained";
+export interface SegmentedControlProps extends Omit<HTMLAttributes<HTMLDivElement>, "defaultValue" | "onChange"> {
+    data: SegmentedControlDataItem[];
+    value?: string;
+    defaultValue?: string;
+    onChange?: (value: string) => void;
+    size?: Size;
+    fullWidth?: boolean;
+    disabled?: boolean;
+    name?: string;
+    variant?: SegmentedControlVariant;
+    activeColor?: string;
+}

package/dist/SegmentedControl/SegmentedControl.types.js

@@ -0,0 +1 @@
+export {};

package/dist/SegmentedControl/SegmentedControl.utils.d.ts

@@ -0,0 +1,11 @@
+import { Size } from "../core";
+import { NormalizedSegmentedItem, SegmentedControlDataItem } from "./SegmentedControl.types";
+export declare const resolveActiveColor: (theme: any, activeColor?: string) => {
+    main: any;
+    contrastText: any;
+};
+export declare const getSegmentHeight: (size?: Size) => 32 | 38 | 22 | 26 | 46 | 56;
+export declare const getSegmentFontSize: (size?: Size) => "11px" | "12px" | "14px" | "16px" | "18px" | "20px";
+export declare const normalizeSegmentedData: (data: SegmentedControlDataItem[]) => NormalizedSegmentedItem[];
+export declare const getFirstEnabledIndex: (data: NormalizedSegmentedItem[]) => number;
+export declare const getNextEnabledIndex: (data: NormalizedSegmentedItem[], startIndex: number, direction: 1 | -1) => number;

package/dist/SegmentedControl/SegmentedControl.utils.js

@@ -0,0 +1,84 @@
+export const resolveActiveColor = (theme, activeColor) => {
+    var _a;
+    const fallback = {
+        main: theme.palette.primary.main,
+        contrastText: theme.palette.primary.contrastText,
+    };
+    if (!activeColor)
+        return fallback;
+    const paletteCandidate = (_a = theme.palette) === null || _a === void 0 ? void 0 : _a[activeColor];
+    if (paletteCandidate &&
+        typeof paletteCandidate === "object" &&
+        "main" in paletteCandidate) {
+        return {
+            main: paletteCandidate.main,
+            contrastText: paletteCandidate.contrastText || fallback.contrastText,
+        };
+    }
+    return {
+        main: activeColor,
+        contrastText: fallback.contrastText,
+    };
+};
+export const getSegmentHeight = (size) => {
+    switch (size) {
+        case "xxs":
+            return 22;
+        case "xs":
+            return 26;
+        case "md":
+            return 38;
+        case "lg":
+            return 46;
+        case "xl":
+            return 56;
+        case "sm":
+        default:
+            return 32;
+    }
+};
+export const getSegmentFontSize = (size) => {
+    switch (size) {
+        case "xxs":
+            return "11px";
+        case "xs":
+            return "12px";
+        case "md":
+            return "16px";
+        case "lg":
+            return "18px";
+        case "xl":
+            return "20px";
+        case "sm":
+        default:
+            return "14px";
+    }
+};
+export const normalizeSegmentedData = (data) => data.map((item) => {
+    var _a;
+    return typeof item === "string"
+        ? {
+            label: item,
+            value: item,
+            disabled: false,
+        }
+        : {
+            label: item.label,
+            value: item.value,
+            disabled: (_a = item.disabled) !== null && _a !== void 0 ? _a : false,
+        };
+});
+export const getFirstEnabledIndex = (data) => data.findIndex((item) => item.disabled === false);
+export const getNextEnabledIndex = (data, startIndex, direction) => {
+    var _a;
+    if (data.length === 0)
+        return -1;
+    let index = startIndex;
+    for (let i = 0; i < data.length; i += 1) {
+        index = (index + direction + data.length) % data.length;
+        if (!((_a = data[index]) === null || _a === void 0 ? void 0 : _a.disabled)) {
+            return index;
+        }
+    }
+    return -1;
+};

package/dist/SegmentedControl/index.d.ts

@@ -0,0 +1 @@
+export * from "./SegmentedControl";

package/dist/SegmentedControl/index.js

@@ -0,0 +1 @@
+export * from "./SegmentedControl";

package/dist/SegmentedControl/useSegmentedKeyboardNav.d.ts

@@ -0,0 +1,12 @@
+import { KeyboardEvent, KeyboardEventHandler, MutableRefObject } from "react";
+import { NormalizedSegmentedItem } from "./SegmentedControl.types";
+type UseSegmentedKeyboardNavProps = {
+    disabled: boolean;
+    data: NormalizedSegmentedItem[];
+    activeIndex: number;
+    onChange: (value: string) => void;
+    buttonRefs: MutableRefObject<Array<HTMLButtonElement | null>>;
+    onKeyDown?: KeyboardEventHandler<HTMLDivElement>;
+};
+export declare const useSegmentedKeyboardNav: ({ disabled, data, activeIndex, onChange, buttonRefs, onKeyDown, }: UseSegmentedKeyboardNavProps) => (event: KeyboardEvent<HTMLDivElement>) => void;
+export {};

package/dist/SegmentedControl/useSegmentedKeyboardNav.js

@@ -0,0 +1,53 @@
+import { useCallback, } from "react";
+import { getFirstEnabledIndex, getNextEnabledIndex } from "./SegmentedControl.utils";
+const getLastEnabledIndex = (data) => {
+    const reverseIndex = [...data].reverse().findIndex((item) => !item.disabled);
+    return reverseIndex < 0 ? -1 : data.length - 1 - reverseIndex;
+};
+export const useSegmentedKeyboardNav = ({ disabled, data, activeIndex, onChange, buttonRefs, onKeyDown, }) => {
+    return useCallback((event) => {
+        var _a, _b, _c;
+        onKeyDown === null || onKeyDown === void 0 ? void 0 : onKeyDown(event);
+        if (event.defaultPrevented || disabled || data.length === 0)
+            return;
+        const firstEnabledIndex = getFirstEnabledIndex(data);
+        if (firstEnabledIndex < 0)
+            return;
+        if (event.key === "Home") {
+            event.preventDefault();
+            const target = data[firstEnabledIndex];
+            if (target) {
+                onChange(target.value);
+                (_a = buttonRefs.current[firstEnabledIndex]) === null || _a === void 0 ? void 0 : _a.focus();
+            }
+            return;
+        }
+        if (event.key === "End") {
+            event.preventDefault();
+            const lastEnabledIndex = getLastEnabledIndex(data);
+            const target = data[lastEnabledIndex];
+            if (target) {
+                onChange(target.value);
+                (_b = buttonRefs.current[lastEnabledIndex]) === null || _b === void 0 ? void 0 : _b.focus();
+            }
+            return;
+        }
+        const directionKeys = {
+            ArrowRight: 1,
+            ArrowDown: 1,
+            ArrowLeft: -1,
+            ArrowUp: -1,
+        };
+        const direction = directionKeys[event.key];
+        if (!direction)
+            return;
+        event.preventDefault();
+        const startIndex = activeIndex >= 0 ? activeIndex : firstEnabledIndex;
+        const nextIndex = getNextEnabledIndex(data, startIndex, direction);
+        const target = data[nextIndex];
+        if (target) {
+            onChange(target.value);
+            (_c = buttonRefs.current[nextIndex]) === null || _c === void 0 ? void 0 : _c.focus();
+        }
+    }, [activeIndex, buttonRefs, data, disabled, onChange, onKeyDown]);
+};

package/dist/index.d.ts

@@ -41,3 +41,4 @@ export * from "./Table";
 export type { ColumnProps, TableProps } from "./Table";
 export * from "./Tabs";
 export * from "./Divider";
+export * from "./SegmentedControl";

package/dist/index.js

@@ -33,3 +33,4 @@ export * from "./FileViewer";
 export * from "./Table";
 export * from "./Tabs";
 export * from "./Divider";
+export * from "./SegmentedControl";

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@monolith-forensics/monolith-ui",
-  "version": "1.3.112-dev.0",
+  "version": "1.3.112-dev.2",
   "main": "./dist/index.js",
   "types": "./dist/index.d.ts",
   "author": "Matt Danner (Monolith Forensics LLC)",

package/dist/Kanban/ordering.d.ts

@@ -1,16 +0,0 @@
-export declare const ORDER_GAP = 1024;
-type GetOrderByCardId = (cardId: string) => number;
-export type OrderComputationResult = {
-    newOrder: number;
-    beforeCardId: string | null;
-    afterCardId: string | null;
-};
-type ComputeOrderParams = {
-    destinationCardIds: string[];
-    movedCardId: string;
-    destinationIndex: number;
-    getOrderByCardId: GetOrderByCardId;
-    orderGap?: number;
-};
-export declare const computeOrderForMove: ({ destinationCardIds, movedCardId, destinationIndex, getOrderByCardId, orderGap, }: ComputeOrderParams) => OrderComputationResult;
-export {};

package/dist/Kanban/ordering.js

@@ -1,52 +0,0 @@
-export const ORDER_GAP = 1024;
-const coerceOrderValue = (value, fallback) => {
-    return Number.isFinite(value) ? value : fallback;
-};
-export const computeOrderForMove = ({ destinationCardIds, movedCardId, destinationIndex, getOrderByCardId, orderGap = ORDER_GAP, }) => {
-    const total = destinationCardIds.length;
-    if (total === 0) {
-        return {
-            newOrder: 0,
-            beforeCardId: null,
-            afterCardId: null,
-        };
-    }
-    const safeIndex = Math.max(0, Math.min(destinationIndex, total - 1));
-    const currentCardId = destinationCardIds[safeIndex];
-    const resolvedIndex = currentCardId === movedCardId
-        ? safeIndex
-        : destinationCardIds.indexOf(movedCardId);
-    const targetIndex = resolvedIndex >= 0 ? resolvedIndex : safeIndex;
-    const beforeCardId = targetIndex > 0 ? destinationCardIds[targetIndex - 1] : null;
-    const afterCardId = targetIndex < total - 1 ? destinationCardIds[targetIndex + 1] : null;
-    if (beforeCardId === null && afterCardId === null) {
-        return {
-            newOrder: 0,
-            beforeCardId,
-            afterCardId,
-        };
-    }
-    if (beforeCardId === null && afterCardId !== null) {
-        const afterOrder = coerceOrderValue(getOrderByCardId(afterCardId), 0);
-        return {
-            newOrder: afterOrder - orderGap,
-            beforeCardId,
-            afterCardId,
-        };
-    }
-    if (beforeCardId !== null && afterCardId === null) {
-        const beforeOrder = coerceOrderValue(getOrderByCardId(beforeCardId), 0);
-        return {
-            newOrder: beforeOrder + orderGap,
-            beforeCardId,
-            afterCardId,
-        };
-    }
-    const beforeOrder = coerceOrderValue(getOrderByCardId(beforeCardId), 0);
-    const afterOrder = coerceOrderValue(getOrderByCardId(afterCardId), beforeOrder + orderGap);
-    return {
-        newOrder: (beforeOrder + afterOrder) / 2,
-        beforeCardId,
-        afterCardId,
-    };
-};