@socprime/react-ui 0.0.8 → 0.0.10

package/README.md

@@ -125,7 +125,7 @@ Deep imports such as `@socprime/react-ui/dist/ui/Button` are blocked by the `exp
 `Aside`, `PageHeader`, `Tabs`, `Accordion`, `AccordionItem`, `AccordionTrigger`, `AccordionContent`, `AccordionSection`, `FolderTreeExpandTrigger`, `ScrollArea`, `ScrollBar`, `Separator`, `TreeGuide`, `TreeRow`
 
 **Feedback and state**
-`Spinner`, `SpinnerCustom`, `SpinnerSquare`, `AnimatedDots`, `Skeleton`, `ConditionalContent`
+`Spinner`, `SpinnerCustom`, `SpinnerSquare`, `AnimatedDots`, `Skeleton`, `Progress`, `ConditionalContent`
 
 **Theming**
 `ThemeToggle`, `applyTheme`, `useDocumentTheme`, `ThemeName`

package/domain.d.ts

@@ -1,6 +1,18 @@
 import * as React$1 from 'react';
 import { ComponentProps } from 'react';
 
+interface AttackTimelineStep {
+    name: string;
+    description: string;
+    hit: boolean;
+    code: string;
+}
+
+interface AttackTimelineProps {
+    steps?: AttackTimelineStep[];
+}
+declare const AttackTimeline: React.FC<AttackTimelineProps>;
+
 interface CorrelationTimerProps {
     isRunning: boolean;
     runningTime?: number | null;
@@ -20,4 +32,4 @@ declare const SyncProcessBar: () => React$1.JSX.Element;
 
 type SyncProcessBarProps = ComponentProps<typeof SyncProcessBar>;
 
-export { CorrelationTimer, type CorrelationTimerProps, Severity, type SeverityProps, SyncProcessBar, type SyncProcessBarProps, type TSeverity };
+export { AttackTimeline, type AttackTimelineProps, type AttackTimelineStep, CorrelationTimer, type CorrelationTimerProps, Severity, type SeverityProps, SyncProcessBar, type SyncProcessBarProps, type TSeverity };

package/index.d.ts

@@ -10,6 +10,7 @@ import * as DialogPrimitive from '@radix-ui/react-dialog';
 import * as DropdownMenuPrimitive from '@radix-ui/react-dropdown-menu';
 import * as LabelPrimitive from '@radix-ui/react-label';
 import * as TooltipPrimitive from '@radix-ui/react-tooltip';
+import * as ProgressPrimitive from '@radix-ui/react-progress';
 import { Root, Item } from '@radix-ui/react-radio-group';
 import * as ScrollAreaPrimitive from '@radix-ui/react-scroll-area';
 import * as SelectPrimitive from '@radix-ui/react-select';
@@ -73,6 +74,12 @@ interface AsideProps {
 }
 declare const Aside: React.FC<AsideProps>;
 
+interface AsideHorizontalProps {
+    tabs: AsideTab[];
+    className?: string;
+}
+declare const AsideHorizontal: React.FC<AsideHorizontalProps>;
+
 declare const badgeVariants: (props?: ({
     variant?: "secondary" | "outline" | "yellow" | "purple" | "default" | "dark" | "defaultOutline" | "warning" | "critical" | "success" | "lightBlue" | "redViolet" | null | undefined;
 } & class_variance_authority_types.ClassProp) | undefined) => string;
@@ -376,6 +383,22 @@ interface LabelInfoProps extends React.ComponentProps<typeof LabelPrimitive.Root
 }
 declare const LabelInfo: React.FC<LabelInfoProps>;
 
+interface MobileNavItem {
+    id: string;
+    label: string;
+    icon: React.FC<{
+        className?: string;
+    }>;
+    to?: string;
+}
+interface MobileNavProps {
+    items: MobileNavItem[];
+    logo?: React.ReactNode;
+    title?: string;
+    className?: string;
+}
+declare const MobileNav: React.FC<MobileNavProps>;
+
 interface MultiSelectOption {
     label: string;
     value: string;
@@ -450,6 +473,11 @@ type PaginationItemProps = ComponentProps<typeof PaginationItem>;
 type PaginationNextProps = ComponentProps<typeof PaginationNext>;
 type PaginationPreviousProps = ComponentProps<typeof PaginationPrevious>;
 
+interface ProgressProps extends React$1.ComponentProps<typeof ProgressPrimitive.Root> {
+    indicatorClassName?: string;
+}
+declare const Progress: React$1.FC<ProgressProps>;
+
 declare function RadioGroup({ className, ...props }: React$1.ComponentProps<typeof Root>): React$1.JSX.Element;
 declare function RadioGroupItem({ className, ...props }: React$1.ComponentProps<typeof Item>): React$1.JSX.Element;
 
@@ -503,6 +531,7 @@ interface SelectDefaultProps {
     loading?: boolean;
     disabled?: boolean;
     style?: React.CSSProperties;
+    icon?: React.ReactNode;
     renderItemLabel?: (value: string) => React.ReactNode;
     renderTriggerLabel?: (value: string) => React.ReactNode;
     onChange?: (value: string) => void;
@@ -706,4 +735,4 @@ declare function TreeRow({ className, children, ...props }: ComponentProps<'div'
 type TreeGuideProps = ComponentProps<typeof TreeGuide>;
 type TreeRowProps = ComponentProps<typeof TreeRow>;
 
-export { Accordion, type AccordionChevronVariant, AccordionContent, type AccordionContentProps, AccordionItem, type AccordionItemProps, type AccordionProps, AccordionSection, type AccordionSectionProps, AccordionTrigger, type AccordionTriggerProps, AnimatedDots, type AnimatedDotsProps, Aside, type AsideProps, type AsideTab, Badge, type BadgeProps, Button, type ButtonProps, Checkbox, type CheckboxProps, ConditionalContent, type ConditionalContentProps, ConfirmDeleteDialog, type ConfirmDeleteDialogProps, ConfirmDeleteDialog as ConfirmDialog, DefaultDialog, type DefaultDialogProps, DeleteButtonConfirm, type DeleteButtonConfirmProps, Dialog, DialogClose, type DialogCloseProps, DialogContent, type DialogContentProps, DialogDescription, type DialogDescriptionProps, DialogFooter, type DialogFooterProps, DialogHeader, type DialogHeaderProps, DialogOverlay, type DialogOverlayProps, DialogPortal, type DialogPortalProps, type DialogProps, DialogTitle, type DialogTitleProps, DialogTrigger, type DialogTriggerProps, DropdownMenu, DropdownMenuCheckboxItem, type DropdownMenuCheckboxItemProps, DropdownMenuContent, type DropdownMenuContentProps, DropdownMenuGroup, type DropdownMenuGroupProps, DropdownMenuItem, type DropdownMenuItemProps, DropdownMenuLabel, type DropdownMenuLabelProps, DropdownMenuPortal, type DropdownMenuPortalProps, type DropdownMenuProps, DropdownMenuRadioGroup, type DropdownMenuRadioGroupProps, DropdownMenuRadioItem, type DropdownMenuRadioItemProps, DropdownMenuSeparator, type DropdownMenuSeparatorProps, DropdownMenuShortcut, type DropdownMenuShortcutProps, DropdownMenuSub, DropdownMenuSubContent, type DropdownMenuSubContentProps, type DropdownMenuSubProps, DropdownMenuSubTrigger, type DropdownMenuSubTriggerProps, DropdownMenuTrigger, type DropdownMenuTriggerProps, DropdownsCheckbox, type DropdownsCheckboxOption, type DropdownsCheckboxProps, DropdownsSelect, type DropdownsSelectOption, type DropdownsSelectProps, EmptyState, type EmptyStateProps, Field, FieldContent, type FieldContentProps, FieldDescription, type FieldDescriptionProps, FieldError, type FieldErrorProps, FieldGroup, type FieldGroupProps, FieldLabel, type FieldLabelProps, FieldLegend, type FieldLegendProps, type FieldProps, FieldSeparator, type FieldSeparatorProps, FieldSet, type FieldSetProps, FieldTitle, type FieldTitleProps, FolderTreeExpandTrigger, type FolderTreeExpandTriggerProps, GroupHeaderRow, type GroupHeaderRowProps, HelperText, type HelperTextProps, Input, InputNumber, type InputNumberProps, InputPassword, type InputPasswordProps, type InputProps, Label, LabelInfo, type LabelInfoProps, type LabelProps, MultiSelect, type MultiSelectOption, type MultiSelectProps, PageHeader, type PageHeaderProps, Pagination, PaginationContent, type PaginationContentProps, PaginationEllipsis, type PaginationEllipsisProps, PaginationItem, type PaginationItemProps, PaginationLink, type PaginationLinkProps, PaginationNext, type PaginationNextProps, PaginationPrevious, type PaginationPreviousProps, type PaginationProps, PaginationWrap, type PaginationWrapProps, RadioGroup, RadioGroupItem, type RadioGroupItemProps, type RadioGroupProps, ScrollArea, type ScrollAreaOrientation, type ScrollAreaProps, ScrollBar, SearchInput, SearchInputFields, type SearchInputFieldsProps, type SearchInputProps, Select, SelectContent, type SelectContentProps, SelectDefault, type SelectDefaultProps, SelectGroup, type SelectGroupProps, SelectItem, type SelectItemProps, SelectLabel, type SelectLabelProps, type SelectProps, SelectScrollDownButton, type SelectScrollDownButtonProps, SelectScrollUpButton, type SelectScrollUpButtonProps, SelectSeparator, type SelectSeparatorProps, SelectTrigger, type SelectTriggerProps, SelectValue, type SelectValueProps, Separator, type SeparatorProps, ServerGroupedTableBody, type ServerGroupedTableBodyProps, Skeleton, type SkeletonProps, SkeletonTable, type SkeletonTableProps, Slider, type SliderProps, SortableHeader, type SortableHeaderProps, Spinner, SpinnerCircle, type SpinnerCircleProps, SpinnerCustom, type SpinnerProps, SpinnerSquare, type SpinnerSquareProps, type SuggestionOption, Suggestions, type SuggestionsProps, Switch, type SwitchProps, type TabItem, Table, TableBody, type TableBodyProps, TableCaption, type TableCaptionProps, TableCell, type TableCellProps, TableFooter, type TableFooterProps, TableHead, type TableHeadProps, TableHeader, type TableHeaderProps, type TableProps, TableRow, type TableRowProps, TableWrap, type TableWrapProps, Tabs, type TabsProps, TextTruncate, type TextTruncateProps, Textarea, type TextareaProps, ThemeToggle, type ThemeToggleProps, Toaster, Tooltip, TooltipContent, type TooltipContentProps, TooltipParent, type TooltipParentProps, type TooltipProps, TooltipProvider, type TooltipProviderProps, TooltipTrigger, type TooltipTriggerProps, TreeGuide, type TreeGuideProps, TreeRow, type TreeRowProps, badgeVariants, buttonVariants };
+export { Accordion, type AccordionChevronVariant, AccordionContent, type AccordionContentProps, AccordionItem, type AccordionItemProps, type AccordionProps, AccordionSection, type AccordionSectionProps, AccordionTrigger, type AccordionTriggerProps, AnimatedDots, type AnimatedDotsProps, Aside, AsideHorizontal, type AsideHorizontalProps, type AsideProps, type AsideTab, Badge, type BadgeProps, Button, type ButtonProps, Checkbox, type CheckboxProps, ConditionalContent, type ConditionalContentProps, ConfirmDeleteDialog, type ConfirmDeleteDialogProps, ConfirmDeleteDialog as ConfirmDialog, DefaultDialog, type DefaultDialogProps, DeleteButtonConfirm, type DeleteButtonConfirmProps, Dialog, DialogClose, type DialogCloseProps, DialogContent, type DialogContentProps, DialogDescription, type DialogDescriptionProps, DialogFooter, type DialogFooterProps, DialogHeader, type DialogHeaderProps, DialogOverlay, type DialogOverlayProps, DialogPortal, type DialogPortalProps, type DialogProps, DialogTitle, type DialogTitleProps, DialogTrigger, type DialogTriggerProps, DropdownMenu, DropdownMenuCheckboxItem, type DropdownMenuCheckboxItemProps, DropdownMenuContent, type DropdownMenuContentProps, DropdownMenuGroup, type DropdownMenuGroupProps, DropdownMenuItem, type DropdownMenuItemProps, DropdownMenuLabel, type DropdownMenuLabelProps, DropdownMenuPortal, type DropdownMenuPortalProps, type DropdownMenuProps, DropdownMenuRadioGroup, type DropdownMenuRadioGroupProps, DropdownMenuRadioItem, type DropdownMenuRadioItemProps, DropdownMenuSeparator, type DropdownMenuSeparatorProps, DropdownMenuShortcut, type DropdownMenuShortcutProps, DropdownMenuSub, DropdownMenuSubContent, type DropdownMenuSubContentProps, type DropdownMenuSubProps, DropdownMenuSubTrigger, type DropdownMenuSubTriggerProps, DropdownMenuTrigger, type DropdownMenuTriggerProps, DropdownsCheckbox, type DropdownsCheckboxOption, type DropdownsCheckboxProps, DropdownsSelect, type DropdownsSelectOption, type DropdownsSelectProps, EmptyState, type EmptyStateProps, Field, FieldContent, type FieldContentProps, FieldDescription, type FieldDescriptionProps, FieldError, type FieldErrorProps, FieldGroup, type FieldGroupProps, FieldLabel, type FieldLabelProps, FieldLegend, type FieldLegendProps, type FieldProps, FieldSeparator, type FieldSeparatorProps, FieldSet, type FieldSetProps, FieldTitle, type FieldTitleProps, FolderTreeExpandTrigger, type FolderTreeExpandTriggerProps, GroupHeaderRow, type GroupHeaderRowProps, HelperText, type HelperTextProps, Input, InputNumber, type InputNumberProps, InputPassword, type InputPasswordProps, type InputProps, Label, LabelInfo, type LabelInfoProps, type LabelProps, MobileNav, type MobileNavItem, type MobileNavProps, MultiSelect, type MultiSelectOption, type MultiSelectProps, PageHeader, type PageHeaderProps, Pagination, PaginationContent, type PaginationContentProps, PaginationEllipsis, type PaginationEllipsisProps, PaginationItem, type PaginationItemProps, PaginationLink, type PaginationLinkProps, PaginationNext, type PaginationNextProps, PaginationPrevious, type PaginationPreviousProps, type PaginationProps, PaginationWrap, type PaginationWrapProps, Progress, type ProgressProps, RadioGroup, RadioGroupItem, type RadioGroupItemProps, type RadioGroupProps, ScrollArea, type ScrollAreaOrientation, type ScrollAreaProps, ScrollBar, SearchInput, SearchInputFields, type SearchInputFieldsProps, type SearchInputProps, Select, SelectContent, type SelectContentProps, SelectDefault, type SelectDefaultProps, SelectGroup, type SelectGroupProps, SelectItem, type SelectItemProps, SelectLabel, type SelectLabelProps, type SelectProps, SelectScrollDownButton, type SelectScrollDownButtonProps, SelectScrollUpButton, type SelectScrollUpButtonProps, SelectSeparator, type SelectSeparatorProps, SelectTrigger, type SelectTriggerProps, SelectValue, type SelectValueProps, Separator, type SeparatorProps, ServerGroupedTableBody, type ServerGroupedTableBodyProps, Skeleton, type SkeletonProps, SkeletonTable, type SkeletonTableProps, Slider, type SliderProps, SortableHeader, type SortableHeaderProps, Spinner, SpinnerCircle, type SpinnerCircleProps, SpinnerCustom, type SpinnerProps, SpinnerSquare, type SpinnerSquareProps, type SuggestionOption, Suggestions, type SuggestionsProps, Switch, type SwitchProps, type TabItem, Table, TableBody, type TableBodyProps, TableCaption, type TableCaptionProps, TableCell, type TableCellProps, TableFooter, type TableFooterProps, TableHead, type TableHeadProps, TableHeader, type TableHeaderProps, type TableProps, TableRow, type TableRowProps, TableWrap, type TableWrapProps, Tabs, type TabsProps, TextTruncate, type TextTruncateProps, Textarea, type TextareaProps, ThemeToggle, type ThemeToggleProps, Toaster, Tooltip, TooltipContent, type TooltipContentProps, TooltipParent, type TooltipParentProps, type TooltipProps, TooltipProvider, type TooltipProviderProps, TooltipTrigger, type TooltipTriggerProps, TreeGuide, type TreeGuideProps, TreeRow, type TreeRowProps, badgeVariants, buttonVariants };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@socprime/react-ui",
-  "version": "0.0.8",
+  "version": "0.0.10",
   "description": "SOC Prime React UI component library and Storybook design system.",
   "license": "MIT",
   "engines": {
@@ -92,6 +92,7 @@
     "@radix-ui/react-label": "^2.1.8",
     "@radix-ui/react-navigation-menu": "^1.2.14",
     "@radix-ui/react-popover": "^1.1.15",
+    "@radix-ui/react-progress": "^1.1.8",
     "@radix-ui/react-radio-group": "^1.3.8",
     "@radix-ui/react-scroll-area": "^1.2.10",
     "@radix-ui/react-select": "^2.2.6",

package/ui/Aside/AsideHorizontal.js

@@ -0,0 +1,39 @@
+import { jsx, jsxs } from "react/jsx-runtime";
+import { useEffect, useRef } from "react";
+import { Link, useLocation } from "react-router-dom";
+import { cn } from "../../lib/cn.js";
+const AsideHorizontal = ({ tabs, className }) => {
+  const { pathname } = useLocation();
+  const activeRef = useRef(null);
+  useEffect(() => {
+    activeRef.current?.scrollIntoView({ behavior: "smooth", inline: "center", block: "nearest" });
+  }, [pathname]);
+  const links = tabs.filter(({ title }) => !title);
+  return /* @__PURE__ */ jsxs("div", { className: cn("relative", className), children: [
+    /* @__PURE__ */ jsx("div", { className: "flex snap-x gap-2 overflow-x-auto pb-1 [scrollbar-width:none] [&::-webkit-scrollbar]:hidden", children: links.map(({ id, label, icon, to }) => {
+      const Icon = icon || void 0;
+      const isActive = pathname.startsWith(id);
+      return /* @__PURE__ */ jsxs(
+        Link,
+        {
+          ref: isActive ? activeRef : void 0,
+          to: to ?? id,
+          className: cn(
+            "flex shrink-0 snap-start items-center gap-2 rounded-full border px-4 py-2 text-xs font-medium whitespace-nowrap transition-colors",
+            isActive ? "border-btn-primary/50 bg-btn-primary/10 text-foreground [&_svg]:text-btn-primary" : "border-border text-subdued hover:bg-hover hover:text-foreground"
+          ),
+          children: [
+            Icon && /* @__PURE__ */ jsx(Icon, { className: "size-4" }),
+            label
+          ]
+        },
+        id
+      );
+    }) }),
+    /* @__PURE__ */ jsx("div", { className: "from-primary pointer-events-none absolute inset-y-0 left-0 w-6 bg-gradient-to-r to-transparent" }),
+    /* @__PURE__ */ jsx("div", { className: "from-primary pointer-events-none absolute inset-y-0 right-0 w-6 bg-gradient-to-l to-transparent" })
+  ] });
+};
+export {
+  AsideHorizontal
+};

package/ui/Aside/index.js

@@ -1,4 +1,6 @@
 import { Aside } from "./Aside.js";
+import { AsideHorizontal } from "./AsideHorizontal.js";
 export {
-  Aside
+  Aside,
+  AsideHorizontal
 };

package/ui/AttackTimeline/AttackTimeline.js

@@ -0,0 +1,35 @@
+import { jsx, jsxs } from "react/jsx-runtime";
+import { CyberpunkCorner } from "./CyberpunkCorner.js";
+import { TimelineDividers } from "./TimelineDividers.js";
+import { TimelineSegments } from "./TimelineSegments.js";
+import { TimelineStepItem } from "./TimelineStepItem.js";
+import { useTimeline } from "./useTimeline.js";
+const AttackTimeline = ({ steps }) => {
+  const { mouseX, timelineWidth, handleMouseMove, handleMouseLeave } = useTimeline();
+  if (!steps) {
+    return null;
+  }
+  return /* @__PURE__ */ jsxs("div", { className: "relative p-[12px]", children: [
+    /* @__PURE__ */ jsx(CyberpunkCorner, { position: "top-left" }),
+    /* @__PURE__ */ jsx(CyberpunkCorner, { position: "top-right" }),
+    /* @__PURE__ */ jsx(CyberpunkCorner, { position: "bottom-left" }),
+    /* @__PURE__ */ jsx(CyberpunkCorner, { position: "bottom-right" }),
+    /* @__PURE__ */ jsx("div", { className: "mb-4 flex items-center gap-2" }),
+    /* @__PURE__ */ jsxs(
+      "div",
+      {
+        className: "relative flex w-full items-start justify-between pt-2.5",
+        onMouseMove: handleMouseMove,
+        onMouseLeave: handleMouseLeave,
+        children: [
+          /* @__PURE__ */ jsx(TimelineSegments, { steps }),
+          /* @__PURE__ */ jsx(TimelineDividers, { mouseX, timelineWidth }),
+          steps.map((step, index) => /* @__PURE__ */ jsx(TimelineStepItem, { step, index, totalSteps: steps.length }, index))
+        ]
+      }
+    )
+  ] });
+};
+export {
+  AttackTimeline
+};

package/ui/AttackTimeline/CyberpunkCorner.js

@@ -0,0 +1,29 @@
+import { jsx, jsxs } from "react/jsx-runtime";
+import { useThemeColors } from "../../lib/useThemeColors.js";
+const GLOW_SHADOW = "0 0 8px rgba(74, 193, 142, 0.6)";
+const CyberpunkCorner = ({ position }) => {
+  const { success } = useThemeColors();
+  const isTop = position.startsWith("top");
+  const isLeft = position.endsWith("left");
+  const edge = isTop ? "top-0" : "bottom-0";
+  const side = isLeft ? "left-0" : "right-0";
+  return /* @__PURE__ */ jsxs("div", { className: `pointer-events-none absolute ${edge} ${side} h-3 w-3`, children: [
+    /* @__PURE__ */ jsx(
+      "div",
+      {
+        className: `absolute ${edge} ${side} h-[1px] w-3`,
+        style: { backgroundColor: success, boxShadow: GLOW_SHADOW }
+      }
+    ),
+    /* @__PURE__ */ jsx(
+      "div",
+      {
+        className: `absolute ${edge} ${side} h-3 w-[1px]`,
+        style: { backgroundColor: success, boxShadow: GLOW_SHADOW }
+      }
+    )
+  ] });
+};
+export {
+  CyberpunkCorner
+};

package/ui/AttackTimeline/TimelineDividers.js

@@ -0,0 +1,36 @@
+import { Fragment, jsx } from "react/jsx-runtime";
+import { memo, useMemo } from "react";
+import { calculateLineHeight } from "./useTimeline.js";
+const TOTAL_MARKS = Math.floor(100 / 0.4);
+const TimelineDividers = memo(
+  ({ mouseX, timelineWidth }) => {
+    const marks = useMemo(
+      () => Array.from({ length: TOTAL_MARKS }, (_, i) => {
+        const leftPosition = i * 0.4;
+        const height = calculateLineHeight(leftPosition, mouseX, timelineWidth);
+        const opacity = i % 3 === 0 ? 0.6 : 0.4;
+        const topOffset = 16 - height / 2;
+        return { i, leftPosition, height, opacity, topOffset };
+      }),
+      [mouseX, timelineWidth]
+    );
+    return /* @__PURE__ */ jsx(Fragment, { children: marks.map(({ i, leftPosition, height, opacity, topOffset }) => /* @__PURE__ */ jsx(
+      "div",
+      {
+        className: "absolute w-[1px] bg-[#3b3d4f] transition-all duration-75",
+        style: {
+          height: `${height}px`,
+          opacity,
+          left: `${leftPosition}%`,
+          top: `${topOffset}px`,
+          zIndex: 0
+        }
+      },
+      `mark-${i}`
+    )) });
+  }
+);
+TimelineDividers.displayName = "TimelineDividers";
+export {
+  TimelineDividers
+};

package/ui/AttackTimeline/TimelineSegments.js

@@ -0,0 +1,42 @@
+import { jsx } from "react/jsx-runtime";
+const getSegmentColor = (current, next) => {
+  const isActiveStatus = (s) => s.hit === true || s.hit === false;
+  const currentActive = isActiveStatus(current);
+  const nextActive = isActiveStatus(next);
+  if (currentActive && nextActive) {
+    return "#4ac18e";
+  }
+  if (currentActive && !nextActive) {
+    return "linear-gradient(to right, #4ac18e, #3b3d4f)";
+  }
+  if (!currentActive && nextActive) {
+    return "linear-gradient(to right, #3b3d4f, #4ac18e)";
+  }
+  return "#3b3d4f";
+};
+const TimelineSegments = ({ steps }) => {
+  const segmentWidth = 100 / steps.length;
+  return steps.map((step, index) => {
+    if (index === steps.length - 1) {
+      return null;
+    }
+    const leftPosition = index * segmentWidth + segmentWidth / 2;
+    const lineColor = getSegmentColor(step, steps[index + 1]);
+    return /* @__PURE__ */ jsx(
+      "div",
+      {
+        className: "absolute top-4 h-[1px]",
+        style: {
+          left: `${leftPosition}%`,
+          width: `${segmentWidth}%`,
+          background: lineColor,
+          zIndex: 1
+        }
+      },
+      `segment-${index}`
+    );
+  });
+};
+export {
+  TimelineSegments
+};

package/ui/AttackTimeline/TimelineStepItem.js

@@ -0,0 +1,58 @@
+import { jsx, jsxs } from "react/jsx-runtime";
+import { ScrollArea } from "../ScrollArea/index.js";
+import { Tooltip } from "../Tooltip/index.js";
+const TimelineStepItem = ({ step, totalSteps }) => {
+  return /* @__PURE__ */ jsxs(
+    "div",
+    {
+      className: "relative flex flex-col items-center text-center",
+      style: { width: `${100 / totalSteps}%`, zIndex: 1 },
+      children: [
+        /* @__PURE__ */ jsx(
+          Tooltip,
+          {
+            className: "border-border bg-secondary w-[820px] border py-4 text-center",
+            classNameArrow: "bg-secondary fill-secondary",
+            content: /* @__PURE__ */ jsxs("div", { className: "relative", children: [
+              /* @__PURE__ */ jsxs("div", { className: "text-default mb-1 text-xs font-medium", children: [
+                step.name,
+                " ",
+                /* @__PURE__ */ jsxs("span", { className: `${step.hit ? "text-success" : "text-gray-chateau/80"} text-xs`, children: [
+                  "(",
+                  step.code,
+                  ")"
+                ] })
+              ] }),
+              /* @__PURE__ */ jsx(
+                ScrollArea,
+                {
+                  orientation: "vertical",
+                  className: "max-h-[300px]",
+                  onWheel: (event) => event.stopPropagation(),
+                  children: /* @__PURE__ */ jsx("div", { className: "text-subdued text-2xs", children: step.description })
+                }
+              )
+            ] }),
+            children: /* @__PURE__ */ jsx("div", { className: "group mb-4", children: /* @__PURE__ */ jsx(
+              "div",
+              {
+                className: `h-[13px] w-[13px] rotate-45 transform shadow-[0_0_0_4px_#252838] transition-all duration-300 ${step.hit ? "group-hover:border-success group-hover:bg-success border-success bg-secondary border-[1.5px] group-hover:scale-150 group-hover:shadow-[0_0_16px_rgba(74,193,142,0.6)]" : "bg-secondary border-gray-chateau/80 border-[1.5px]"}`,
+                children: step.hit && /* @__PURE__ */ jsx("div", { className: "bg-success absolute top-1/2 left-1/2 h-1 w-1 -translate-x-1/2 -translate-y-1/2 transform" })
+              }
+            ) })
+          }
+        ),
+        /* @__PURE__ */ jsx(
+          "span",
+          {
+            className: `text-3xs font-medium ${step.hit ? "text-default" : "text-gray-chateau/80"}`,
+            children: step.name
+          }
+        )
+      ]
+    }
+  );
+};
+export {
+  TimelineStepItem
+};

package/ui/AttackTimeline/index.js

@@ -0,0 +1,4 @@
+import { AttackTimeline } from "./AttackTimeline.js";
+export {
+  AttackTimeline
+};

package/ui/AttackTimeline/useTimeline.js

@@ -0,0 +1,34 @@
+import { useCallback, useState } from "react";
+const calculateLineHeight = (linePositionPercent, mouseX, timelineWidth) => {
+  if (mouseX === null || timelineWidth === 0) return 24;
+  const linePositionPx = linePositionPercent / 100 * timelineWidth;
+  const distance = Math.abs(mouseX - linePositionPx);
+  const maxDistance = 80;
+  if (distance > maxDistance) return 24;
+  const factor = 1 - distance / maxDistance;
+  const maxHeight = 72;
+  return 24 + (maxHeight - 24) * factor;
+};
+const useTimeline = () => {
+  const [hoveredIndex, setHoveredIndex] = useState(null);
+  const [mouseX, setMouseX] = useState(null);
+  const [timelineWidth, setTimelineWidth] = useState(0);
+  const handleMouseMove = useCallback((e) => {
+    const rect = e.currentTarget.getBoundingClientRect();
+    setMouseX(e.clientX - rect.left);
+    setTimelineWidth(rect.width);
+  }, []);
+  const handleMouseLeave = useCallback(() => setMouseX(null), []);
+  return {
+    mouseX,
+    hoveredIndex,
+    timelineWidth,
+    setHoveredIndex,
+    handleMouseMove,
+    handleMouseLeave
+  };
+};
+export {
+  calculateLineHeight,
+  useTimeline
+};

package/ui/MobileNav/MobileNav.js

@@ -0,0 +1,111 @@
+import { jsx, jsxs } from "react/jsx-runtime";
+import * as DialogPrimitive from "@radix-ui/react-dialog";
+import { MenuIcon, XIcon } from "lucide-react";
+import { motion } from "motion/react";
+import { useState } from "react";
+import { Link, useLocation } from "react-router-dom";
+import { cn } from "../../lib/cn.js";
+import { Dialog, DialogClose, DialogOverlay, DialogPortal, DialogTrigger } from "../Dialog/index.js";
+const isPathActive = (pathname, linkTo) => pathname === linkTo || pathname.startsWith(`${linkTo}/`);
+const MobileNav = ({ items, logo, title, className }) => {
+  const [open, setOpen] = useState(false);
+  const { pathname } = useLocation();
+  return /* @__PURE__ */ jsxs(Dialog, { open, onOpenChange: setOpen, children: [
+    /* @__PURE__ */ jsx(DialogTrigger, { asChild: true, children: /* @__PURE__ */ jsx(
+      "button",
+      {
+        "aria-label": "Open menu",
+        className: cn(
+          "border-border text-foreground hover:bg-hover flex size-10 cursor-pointer items-center justify-center rounded-full border transition-colors lg:hidden",
+          className
+        ),
+        children: /* @__PURE__ */ jsx(MenuIcon, { className: "size-5" })
+      }
+    ) }),
+    /* @__PURE__ */ jsxs(DialogPortal, { children: [
+      /* @__PURE__ */ jsx(DialogOverlay, { className: "backdrop-blur-sm" }),
+      /* @__PURE__ */ jsx(DialogPrimitive.Content, { asChild: true, "aria-describedby": void 0, children: /* @__PURE__ */ jsxs(
+        motion.div,
+        {
+          className: "border-border bg-primary fixed inset-y-0 left-0 z-50 flex w-[300px] max-w-[85vw] flex-col border-r shadow-2xl",
+          initial: { x: "-100%" },
+          animate: { x: 0 },
+          transition: { type: "spring", damping: 30, stiffness: 300 },
+          children: [
+            /* @__PURE__ */ jsxs("div", { className: "border-border flex items-center justify-between border-b px-5 py-4", children: [
+              /* @__PURE__ */ jsxs(DialogPrimitive.Title, { className: "flex items-center gap-3", children: [
+                logo,
+                title && /* @__PURE__ */ jsx("span", { className: "text-lg font-semibold", children: title })
+              ] }),
+              /* @__PURE__ */ jsx(DialogClose, { asChild: true, children: /* @__PURE__ */ jsx(
+                "button",
+                {
+                  "aria-label": "Close menu",
+                  className: "border-border text-foreground hover:bg-hover flex size-9 cursor-pointer items-center justify-center rounded-full border transition-colors",
+                  children: /* @__PURE__ */ jsx(XIcon, { className: "size-4" })
+                }
+              ) })
+            ] }),
+            /* @__PURE__ */ jsx("nav", { className: "flex flex-1 flex-col gap-1 overflow-y-auto p-4", children: items.map(({ id, label, icon, to }, index) => {
+              const Icon = icon;
+              const linkTo = to ?? id;
+              const isActive = isPathActive(pathname, linkTo);
+              return /* @__PURE__ */ jsx(
+                motion.div,
+                {
+                  initial: { opacity: 0, x: -24 },
+                  animate: { opacity: 1, x: 0 },
+                  transition: { delay: 0.08 + index * 0.05, duration: 0.25 },
+                  children: /* @__PURE__ */ jsx(DialogClose, { asChild: true, children: /* @__PURE__ */ jsxs(
+                    Link,
+                    {
+                      to: linkTo,
+                      className: cn(
+                        "group relative flex w-full items-center gap-3 rounded-lg px-4 py-3 transition-colors",
+                        isActive ? "bg-btn-primary/10" : "hover:bg-hover"
+                      ),
+                      children: [
+                        /* @__PURE__ */ jsx(
+                          "span",
+                          {
+                            className: cn(
+                              "bg-btn-primary absolute inset-y-2 left-0 w-1 rounded-full transition-opacity",
+                              isActive ? "opacity-100" : "opacity-0"
+                            )
+                          }
+                        ),
+                        /* @__PURE__ */ jsx(
+                          Icon,
+                          {
+                            className: cn(
+                              "size-5 transition-colors",
+                              isActive ? "text-btn-primary" : "text-subdued group-hover:text-foreground"
+                            )
+                          }
+                        ),
+                        /* @__PURE__ */ jsx(
+                          "span",
+                          {
+                            className: cn(
+                              "text-sm font-medium transition-colors",
+                              isActive ? "text-foreground" : "text-subdued group-hover:text-foreground"
+                            ),
+                            children: label
+                          }
+                        )
+                      ]
+                    }
+                  ) })
+                },
+                id
+              );
+            }) })
+          ]
+        }
+      ) })
+    ] })
+  ] });
+};
+export {
+  MobileNav
+};

package/ui/MobileNav/index.js

@@ -0,0 +1,4 @@
+import { MobileNav } from "./MobileNav.js";
+export {
+  MobileNav
+};

package/ui/Progress/Progress.js

@@ -0,0 +1,33 @@
+import { jsx } from "react/jsx-runtime";
+import * as ProgressPrimitive from "@radix-ui/react-progress";
+import { cn } from "../../lib/cn.js";
+const Progress = ({
+  className,
+  value,
+  max = 100,
+  indicatorClassName,
+  ...props
+}) => {
+  const percentage = max > 0 ? Math.min(100, Math.max(0, (value ?? 0) / max * 100)) : 0;
+  return /* @__PURE__ */ jsx(
+    ProgressPrimitive.Root,
+    {
+      "data-slot": "progress",
+      className: cn("bg-border relative h-1.5 w-full overflow-hidden rounded-full", className),
+      value,
+      max,
+      ...props,
+      children: /* @__PURE__ */ jsx(
+        ProgressPrimitive.Indicator,
+        {
+          "data-slot": "progress-indicator",
+          className: cn("bg-btn-primary h-full w-full flex-1 transition-all", indicatorClassName),
+          style: { transform: `translateX(-${100 - percentage}%)` }
+        }
+      )
+    }
+  );
+};
+export {
+  Progress
+};

package/ui/Progress/index.js

@@ -0,0 +1,4 @@
+import { Progress } from "./Progress.js";
+export {
+  Progress
+};

package/ui/Select/SelectDefault.js

@@ -18,10 +18,16 @@ const SelectDefault = ({
   loading,
   disabled,
   style,
+  icon,
   renderItemLabel,
   renderTriggerLabel,
   onChange
 }) => {
+  const selectValueDefault = /* @__PURE__ */ jsx(SelectValue, { placeholder, children: value && renderTriggerLabel ? renderTriggerLabel(value) : void 0 });
+  const renderValue = icon ? /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-2", children: [
+    icon,
+    selectValueDefault
+  ] }) : selectValueDefault;
   return /* @__PURE__ */ jsxs(Select, { value, onValueChange: onChange, children: [
     /* @__PURE__ */ jsx(
       SelectTrigger,
@@ -32,7 +38,7 @@ const SelectDefault = ({
         disabled,
         loading,
         style,
-        children: /* @__PURE__ */ jsx(SelectValue, { placeholder, children: value && renderTriggerLabel ? renderTriggerLabel(value) : void 0 })
+        children: renderValue
       }
     ),
     /* @__PURE__ */ jsx(SelectContent, { children: /* @__PURE__ */ jsx(SelectGroup, { children: options.filter((option) => option.value !== "").map((option) => /* @__PURE__ */ jsx(SelectItem, { className: "cursor-pointer", value: option.value, children: renderItemLabel ? renderItemLabel(option.value) : option.label }, option.value)) }) })

package/ui/entries/domain.js

@@ -1,3 +1,4 @@
+export * from "../AttackTimeline/index.js";
 export * from "../CorrelationTimer/index.js";
 export * from "../Severity/index.js";
 export * from "../SyncProcessBar/index.js";

package/ui/index.js

@@ -15,9 +15,11 @@ export * from "./Input/index.js";
 export * from "./InputNumber/index.js";
 export * from "./InputPassword/index.js";
 export * from "./Label/index.js";
+export * from "./MobileNav/index.js";
 export * from "./MultiSelect/index.js";
 export * from "./PageHeader/index.js";
 export * from "./Pagination/index.js";
+export * from "./Progress/index.js";
 export * from "./RadioGroup/index.js";
 export * from "./ScrollArea/index.js";
 export * from "./SearchInput/index.js";