@socprime/react-ui 0.0.5

package/lib/cn.js

@@ -0,0 +1,8 @@
+import { clsx } from "clsx";
+import { twMerge } from "tailwind-merge";
+function cn(...inputs) {
+  return twMerge(clsx(inputs));
+}
+export {
+  cn
+};

package/lib/theme.js

@@ -0,0 +1,26 @@
+import { useSyncExternalStore } from "react";
+function applyTheme(theme) {
+  const root = document.documentElement;
+  root.classList.remove("dark", "light");
+  root.classList.add(theme);
+  root.setAttribute("data-theme", theme);
+}
+function getTheme() {
+  const theme = document.documentElement.getAttribute("data-theme");
+  return theme === "light" ? "light" : "dark";
+}
+function subscribe(onStoreChange) {
+  const observer = new MutationObserver(onStoreChange);
+  observer.observe(document.documentElement, {
+    attributes: true,
+    attributeFilter: ["data-theme"]
+  });
+  return () => observer.disconnect();
+}
+function useDocumentTheme() {
+  return useSyncExternalStore(subscribe, getTheme, () => "dark");
+}
+export {
+  applyTheme,
+  useDocumentTheme
+};

package/lib/useFullscreen.js

@@ -0,0 +1,52 @@
+import { useCallback, useEffect, useState } from "react";
+function useFullscreen(element, onFullscreenChange) {
+  const [isFullscreen, setIsFullscreen] = useState(false);
+  const handleFullscreenChange = useCallback(() => {
+    const { fullscreenElement } = document;
+    const isCurrentlyFullscreen = !!fullscreenElement;
+    setIsFullscreen(isCurrentlyFullscreen);
+    onFullscreenChange?.(isCurrentlyFullscreen);
+  }, [onFullscreenChange]);
+  useEffect(() => {
+    document.addEventListener("fullscreenchange", handleFullscreenChange);
+    return () => {
+      document.removeEventListener("fullscreenchange", handleFullscreenChange);
+    };
+  }, [handleFullscreenChange]);
+  const enterFullscreen = useCallback(async () => {
+    if (!element.current) {
+      return;
+    }
+    try {
+      await element.current.requestFullscreen();
+    } catch (error) {
+      console.error(error);
+    }
+  }, [element]);
+  const exitFullscreen = useCallback(async () => {
+    if (!document.fullscreenElement) {
+      return;
+    }
+    try {
+      await document.exitFullscreen();
+    } catch (error) {
+      console.error(error);
+    }
+  }, []);
+  const toggleFullscreen = useCallback(async () => {
+    if (document.fullscreenElement) {
+      await exitFullscreen();
+    } else {
+      await enterFullscreen();
+    }
+  }, [enterFullscreen, exitFullscreen]);
+  return {
+    isFullscreen,
+    toggleFullscreen,
+    enterFullscreen,
+    exitFullscreen
+  };
+}
+export {
+  useFullscreen
+};

package/lib/useListenOnResizeDebounce.js

@@ -0,0 +1,22 @@
+import { useEffect } from "react";
+const useListenOnResizeDebounce = (handleResize) => {
+  useEffect(() => {
+    let resizeTimeout;
+    const debouncedResize = () => {
+      if (resizeTimeout) {
+        clearTimeout(resizeTimeout);
+      }
+      resizeTimeout = setTimeout(handleResize, 200);
+    };
+    window.addEventListener("resize", debouncedResize);
+    return () => {
+      window.removeEventListener("resize", debouncedResize);
+      if (resizeTimeout) {
+        clearTimeout(resizeTimeout);
+      }
+    };
+  }, [handleResize]);
+};
+export {
+  useListenOnResizeDebounce
+};

package/lib/useThemeColors.js

@@ -0,0 +1,39 @@
+import { useSyncExternalStore } from "react";
+function colorsEqual(a, b) {
+  return a.primary === b.primary && a.secondary === b.secondary && a.success === b.success && a.lightBlue === b.lightBlue && a.purple === b.purple && a.default === b.default && a.subdued === b.subdued && a.warning === b.warning && a.critical === b.critical && a.border === b.border;
+}
+let cachedColors = null;
+function getThemeColors() {
+  const styles = getComputedStyle(document.documentElement);
+  const nextColors = {
+    primary: styles.getPropertyValue("--bg-primary").trim(),
+    secondary: styles.getPropertyValue("--bg-secondary").trim(),
+    success: styles.getPropertyValue("--bg-success").trim(),
+    lightBlue: styles.getPropertyValue("--bg-light-blue").trim(),
+    purple: styles.getPropertyValue("--bg-purple").trim(),
+    default: styles.getPropertyValue("--text-default").trim(),
+    subdued: styles.getPropertyValue("--text-subdued").trim(),
+    warning: styles.getPropertyValue("--text-warning").trim(),
+    critical: styles.getPropertyValue("--text-critical").trim(),
+    border: styles.getPropertyValue("--border").trim()
+  };
+  if (cachedColors && colorsEqual(cachedColors, nextColors)) {
+    return cachedColors;
+  }
+  cachedColors = nextColors;
+  return cachedColors;
+}
+function subscribe(onStoreChange) {
+  const observer = new MutationObserver(onStoreChange);
+  observer.observe(document.documentElement, {
+    attributes: true,
+    attributeFilter: ["data-theme", "class"]
+  });
+  return () => observer.disconnect();
+}
+function useThemeColors() {
+  return useSyncExternalStore(subscribe, getThemeColors, getThemeColors);
+}
+export {
+  useThemeColors
+};

package/package.json

@@ -0,0 +1,113 @@
+{
+  "name": "@socprime/react-ui",
+  "version": "0.0.5",
+  "description": "SOC Prime React UI component library and Storybook design system.",
+  "license": "MIT",
+  "engines": {
+    "node": ">=20"
+  },
+  "type": "module",
+  "sideEffects": [
+    "**/*.css"
+  ],
+  "main": "./ui/index.js",
+  "types": "./index.d.ts",
+  "exports": {
+    ".": {
+      "types": "./index.d.ts",
+      "import": "./ui/index.js"
+    },
+    "./editor": {
+      "types": "./editor.d.ts",
+      "import": "./ui/Editor/index.js"
+    },
+    "./charts": {
+      "types": "./charts.d.ts",
+      "import": "./ui/entries/charts.js"
+    },
+    "./domain": {
+      "types": "./domain.d.ts",
+      "import": "./ui/entries/domain.js"
+    },
+    "./attack-flow": {
+      "types": "./attack-flow.d.ts",
+      "import": "./ui/AttackFlow/index.js"
+    },
+    "./preset": {
+      "types": "./preset.d.ts",
+      "import": "./preset/index.js"
+    },
+    "./decorators": {
+      "types": "./decorators.d.ts",
+      "import": "./decorators/index.js"
+    },
+    "./package.json": "./package.json"
+  },
+  "peerDependencies": {
+    "@monaco-editor/react": "^4.7.0",
+    "@storybook/react-vite": "^10.0.0",
+    "@tanstack/react-table": "^8.21.0",
+    "@xyflow/react": "^12.9.2",
+    "dagre": "^0.8.5",
+    "monaco-editor": "^0.55.1",
+    "react": "^19.0.0",
+    "react-dom": "^19.0.0",
+    "react-router-dom": "^7.0.0",
+    "recharts": "^3.8.1",
+    "vite": "^7.0.0",
+    "vite-plugin-svgr": "^4.0.0"
+  },
+  "peerDependenciesMeta": {
+    "@monaco-editor/react": {
+      "optional": true
+    },
+    "@storybook/react-vite": {
+      "optional": true
+    },
+    "@xyflow/react": {
+      "optional": true
+    },
+    "dagre": {
+      "optional": true
+    },
+    "monaco-editor": {
+      "optional": true
+    },
+    "recharts": {
+      "optional": true
+    },
+    "vite": {
+      "optional": true
+    },
+    "vite-plugin-svgr": {
+      "optional": true
+    }
+  },
+  "dependencies": {
+    "@radix-ui/react-accordion": "^1.2.12",
+    "@radix-ui/react-checkbox": "^1.3.3",
+    "@radix-ui/react-dialog": "^1.1.15",
+    "@radix-ui/react-dropdown-menu": "^2.1.16",
+    "@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-radio-group": "^1.3.8",
+    "@radix-ui/react-scroll-area": "^1.2.10",
+    "@radix-ui/react-select": "^2.2.6",
+    "@radix-ui/react-separator": "^1.1.8",
+    "@radix-ui/react-slider": "^1.3.6",
+    "@radix-ui/react-slot": "^1.2.4",
+    "@radix-ui/react-switch": "^1.2.6",
+    "@radix-ui/react-tabs": "^1.1.13",
+    "@radix-ui/react-tooltip": "^1.2.8",
+    "class-variance-authority": "^0.7.1",
+    "clsx": "^2.1.1",
+    "lucide-react": "^0.552.0",
+    "motion": "^12.23.24",
+    "sonner": "^2.0.7",
+    "tailwind-merge": "^3.3.1"
+  },
+  "publishConfig": {
+    "access": "public"
+  }
+}

package/preset/createConfig.js

@@ -0,0 +1,98 @@
+import { existsSync, readFileSync } from "node:fs";
+import path from "node:path";
+import { fileURLToPath } from "node:url";
+import { mergeConfig } from "vite";
+import svgr from "vite-plugin-svgr";
+const PACKAGE_NAME = "@socprime/react-ui";
+function findPackageRoot(startDir) {
+  let dir = startDir;
+  while (!existsSync(path.join(dir, "package.json"))) {
+    const parent = path.dirname(dir);
+    if (parent === dir) {
+      throw new Error(`Could not locate a package.json above ${startDir}`);
+    }
+    dir = parent;
+  }
+  return dir;
+}
+function resolvePackageRoot(explicitPackageRoot) {
+  if (explicitPackageRoot) {
+    return explicitPackageRoot;
+  }
+  const presetDir = path.dirname(fileURLToPath(import.meta.url));
+  const root = findPackageRoot(presetDir);
+  const { name } = JSON.parse(readFileSync(path.join(root, "package.json"), "utf-8"));
+  if (name === PACKAGE_NAME) {
+    throw new Error(
+      `createStorybookConfig(): could not infer "packageRoot" because "${PACKAGE_NAME}/preset" is running from an installed dependency. Pass "packageRoot" explicitly \u2014 the root of your own Storybook package that owns the "stories/" directory.`
+    );
+  }
+  return root;
+}
+function createStorybookConfig(options) {
+  const packageRoot = resolvePackageRoot(options.packageRoot);
+  const storiesDir = path.join(packageRoot, "stories");
+  const stories = [
+    path.join(storiesDir, "**/*.stories.@(js|jsx|mjs|ts|tsx)"),
+    ...options.extraStories?.map((glob) => path.join(packageRoot, glob)) ?? []
+  ];
+  return {
+    stories,
+    addons: ["@storybook/addon-docs", "@storybook/addon-a11y"],
+    framework: "@storybook/react-vite",
+    features: {
+      changeDetection: false,
+      sidebarOnboardingChecklist: false,
+      menuOnboardingChecklist: false
+    },
+    staticDirs: [
+      {
+        from: path.join(options.hostRoot, "public"),
+        to: "/"
+      }
+    ],
+    async viteFinal(config) {
+      return mergeConfig(config, {
+        define: {
+          __APP_VERSION__: JSON.stringify(options.appVersion ?? "0.0.0")
+        },
+        resolve: {
+          alias: {
+            "@": packageRoot,
+            "@storybook-host/theme-entry": options.themeEntry
+          }
+        },
+        plugins: [
+          svgr({
+            svgrOptions: {
+              icon: true
+            }
+          })
+        ],
+        css: {
+          preprocessorOptions: {
+            scss: {
+              loadPaths: [options.hostSrcDir],
+              additionalData: `@use 'assets/scss/palette' as palette;`
+            }
+          }
+        },
+        server: {
+          fs: {
+            allow: [options.hostRoot, packageRoot]
+          }
+        },
+        worker: {
+          format: "es"
+        },
+        optimizeDeps: {
+          include: ["monaco-editor"],
+          exclude: ["@monaco-editor/react"]
+        }
+      });
+    }
+  };
+}
+export {
+  createStorybookConfig
+};

package/preset/createPreview.js

@@ -0,0 +1,53 @@
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+import { withRouter, withTheme } from "../decorators/index.js";
+import { Toaster } from "../ui/index.js";
+import { restoreNativeFocus } from "./restoreNativeFocus.js";
+function createStorybookPreview() {
+  return {
+    globalTypes: {
+      theme: {
+        description: "Host color theme (CSS tokens from theme entry)",
+        toolbar: {
+          title: "Theme",
+          icon: "circlehollow",
+          items: [
+            { value: "dark", title: "Dark", icon: "moon" },
+            { value: "light", title: "Light", icon: "sun" }
+          ],
+          dynamicTitle: true
+        }
+      }
+    },
+    initialGlobals: {
+      theme: "dark"
+    },
+    parameters: {
+      layout: "centered",
+      controls: {
+        matchers: {
+          color: /(background|color)$/i,
+          date: /Date$/i
+        }
+      },
+      backgrounds: { disable: true },
+      a11y: {
+        // Fails interaction/test-runner runs when violations are found.
+        test: "error"
+      }
+    },
+    decorators: [
+      withRouter,
+      withTheme,
+      (Story) => /* @__PURE__ */ jsxs(Fragment, { children: [
+        /* @__PURE__ */ jsx(Story, {}),
+        /* @__PURE__ */ jsx(Toaster, {})
+      ] })
+    ],
+    beforeEach() {
+      restoreNativeFocus();
+    }
+  };
+}
+export {
+  createStorybookPreview
+};

package/preset/index.js

@@ -0,0 +1,6 @@
+import { createStorybookConfig } from "./createConfig.js";
+import { createStorybookPreview } from "./createPreview.js";
+export {
+  createStorybookConfig,
+  createStorybookPreview
+};

package/preset/restoreNativeFocus.js

@@ -0,0 +1,33 @@
+let cachedNativeFocus = null;
+function getNativeFocus() {
+  if (cachedNativeFocus) {
+    return cachedNativeFocus;
+  }
+  const iframe = document.createElement("iframe");
+  iframe.style.display = "none";
+  document.body.appendChild(iframe);
+  const contentWindow = iframe.contentWindow;
+  if (!contentWindow) {
+    throw new Error("Unable to access iframe content window");
+  }
+  const { focus } = contentWindow.HTMLElement.prototype;
+  document.body.removeChild(iframe);
+  cachedNativeFocus = focus;
+  return focus;
+}
+function restoreNativeFocus() {
+  if (typeof HTMLElement === "undefined") {
+    return;
+  }
+  const nativeFocus = getNativeFocus();
+  Object.defineProperty(HTMLElement.prototype, "focus", {
+    configurable: true,
+    writable: true,
+    value: function focus(options) {
+      return nativeFocus.call(this, options);
+    }
+  });
+}
+export {
+  restoreNativeFocus
+};

package/preset.d.ts

@@ -0,0 +1,27 @@
+import { StorybookConfig, Preview } from '@storybook/react-vite';
+
+interface StorybookHostOptions {
+    /** Absolute path to the host application root (Vite `server.fs.allow`). */
+    hostRoot: string;
+    /** Absolute path to the host `src/` directory (Sass load path for palette tokens). */
+    hostSrcDir: string;
+    /** Absolute path to the host global theme entry SCSS (e.g. `src/index.scss`). */
+    themeEntry: string;
+    /** Absolute path to the package root where `stories/` lives. Defaults to the preset package root. */
+    packageRoot?: string;
+    /** Injected as `__APP_VERSION__` in Storybook builds. */
+    appVersion?: string;
+    /** Additional story globs relative to `packageRoot`. */
+    extraStories?: string[];
+}
+
+/**
+ * Creates a Storybook config for a UI component catalog.
+ * Component code under `ui/` must not import from the host `src/` —
+ * `@/` resolves only within this package root.
+ */
+declare function createStorybookConfig(options: StorybookHostOptions): StorybookConfig;
+
+declare function createStorybookPreview(): Preview;
+
+export { type StorybookHostOptions, createStorybookConfig, createStorybookPreview };

package/theme-9m7j1UoI.d.ts

@@ -0,0 +1,5 @@
+type ThemeName = 'dark' | 'light';
+declare function applyTheme(theme: ThemeName): void;
+declare function useDocumentTheme(): ThemeName;
+
+export { type ThemeName as T, applyTheme as a, useDocumentTheme as u };

package/ui/Accordion/Accordion.js

@@ -0,0 +1,82 @@
+import { jsx, jsxs } from "react/jsx-runtime";
+import * as AccordionPrimitive from "@radix-ui/react-accordion";
+import { ChevronDownIcon } from "lucide-react";
+import { cn } from "../../lib/cn.js";
+import {
+  accordionChevronVariants,
+  resolveAccordionChevronVariant
+} from "./chevronVariants.js";
+const Accordion = ({ children, ...props }) => {
+  return /* @__PURE__ */ jsx(AccordionPrimitive.Root, { "data-slot": "accordion", ...props, children });
+};
+const AccordionItem = ({ className, children, ...props }) => {
+  return /* @__PURE__ */ jsx(
+    AccordionPrimitive.Item,
+    {
+      "data-slot": "accordion-item",
+      className: cn("border-border border-b last:border-b-0", className),
+      ...props,
+      children
+    }
+  );
+};
+const AccordionTrigger = ({
+  className,
+  children,
+  chevronPosition,
+  chevronVariant,
+  ...props
+}) => {
+  const resolvedVariant = resolveAccordionChevronVariant(chevronPosition, chevronVariant);
+  const showChevron = Boolean(chevronPosition) && resolvedVariant !== "none";
+  const isChevronLeft = chevronPosition === "left";
+  const variantConfig = resolvedVariant !== "none" ? accordionChevronVariants[resolvedVariant] : void 0;
+  const chevron = showChevron ? /* @__PURE__ */ jsx(
+    ChevronDownIcon,
+    {
+      className: cn(
+        "text-muted-foreground pointer-events-none size-4 shrink-0 translate-y-0.5 transition-transform duration-200",
+        variantConfig?.icon
+      )
+    }
+  ) : null;
+  return /* @__PURE__ */ jsx(AccordionPrimitive.Header, { className: "flex", children: /* @__PURE__ */ jsxs(
+    AccordionPrimitive.Trigger,
+    {
+      "data-slot": "accordion-trigger",
+      className: cn(
+        "group/accordion-trigger flex flex-1 items-start gap-2 px-2 py-4 text-left text-sm font-medium transition-all outline-none disabled:pointer-events-none disabled:opacity-50",
+        !isChevronLeft && "justify-between",
+        variantConfig?.trigger,
+        className
+      ),
+      ...props,
+      children: [
+        isChevronLeft && chevron,
+        children,
+        !isChevronLeft && chevron
+      ]
+    }
+  ) });
+};
+const AccordionContent = ({
+  className,
+  children,
+  ...props
+}) => {
+  return /* @__PURE__ */ jsx(
+    AccordionPrimitive.Content,
+    {
+      "data-slot": "accordion-content",
+      className: "data-[state=closed]:animate-accordion-up data-[state=open]:animate-accordion-down overflow-hidden text-xs",
+      ...props,
+      children: /* @__PURE__ */ jsx("div", { className, children })
+    }
+  );
+};
+export {
+  Accordion,
+  AccordionContent,
+  AccordionItem,
+  AccordionTrigger
+};

package/ui/Accordion/AccordionSection.js

@@ -0,0 +1,41 @@
+import { jsx, jsxs } from "react/jsx-runtime";
+import { cn } from "../../lib/cn.js";
+import { AccordionContent, AccordionItem, AccordionTrigger } from "./Accordion.js";
+const AccordionSection = ({
+  value,
+  title,
+  description,
+  children,
+  itemClassName,
+  triggerClassName,
+  contentClassName
+}) => {
+  return /* @__PURE__ */ jsxs(
+    AccordionItem,
+    {
+      value,
+      className: cn(
+        "border-border bg-primary overflow-hidden rounded-sm border last:border-b-1",
+        itemClassName
+      ),
+      children: [
+        /* @__PURE__ */ jsx(
+          AccordionTrigger,
+          {
+            className: cn("hover:bg-secondary items-center justify-start gap-4 px-4 py-2", triggerClassName),
+            chevronPosition: "left",
+            chevronVariant: "section",
+            children: /* @__PURE__ */ jsxs("div", { className: "flex min-w-0 flex-1 flex-col gap-2", children: [
+              typeof title === "string" ? /* @__PURE__ */ jsx("h6", { className: "text-default text-xs font-medium", children: title }) : title,
+              description != null && (typeof description === "string" ? /* @__PURE__ */ jsx("p", { className: "text-gray-chateau text-2xs", children: description }) : description)
+            ] })
+          }
+        ),
+        /* @__PURE__ */ jsx(AccordionContent, { className: cn("border-border bg-secondary border-t", contentClassName), children })
+      ]
+    }
+  );
+};
+export {
+  AccordionSection
+};

package/ui/Accordion/FolderTreeExpandTrigger.js

@@ -0,0 +1,29 @@
+import { jsx, jsxs } from "react/jsx-runtime";
+import { cn } from "../../lib/cn.js";
+import { AccordionTrigger } from "./Accordion.js";
+const FolderTreeExpandTrigger = ({
+  label,
+  className,
+  chevronVariant = "tree",
+  ...props
+}) => {
+  return /* @__PURE__ */ jsx(
+    AccordionTrigger,
+    {
+      className: cn(
+        "text-subdued shrink-0 rounded-xs p-0 text-xs font-normal hover:cursor-pointer hover:no-underline",
+        className
+      ),
+      chevronPosition: "left",
+      chevronVariant,
+      ...props,
+      children: /* @__PURE__ */ jsxs("span", { className: "sr-only", children: [
+        "Expand ",
+        label
+      ] })
+    }
+  );
+};
+export {
+  FolderTreeExpandTrigger
+};

package/ui/Accordion/chevronVariants.js

@@ -0,0 +1,31 @@
+const accordionChevronVariants = {
+  down: {
+    trigger: "[&[data-state=open]>svg]:rotate-180",
+    icon: ""
+  },
+  section: {
+    trigger: "",
+    icon: "rotate-[-90deg] group-data-[state=open]/accordion-trigger:rotate-0"
+  },
+  tree: {
+    trigger: "",
+    icon: "size-3 translate-y-0 rotate-[-90deg] group-data-[state=open]/accordion-trigger:rotate-0"
+  },
+  "tree-sm": {
+    trigger: "",
+    icon: "mb-1 size-3.5 rotate-[-90deg] group-data-[state=open]/accordion-trigger:rotate-0"
+  }
+};
+function resolveAccordionChevronVariant(chevronPosition, chevronVariant) {
+  if (chevronVariant) {
+    return chevronVariant;
+  }
+  if (chevronPosition) {
+    return "down";
+  }
+  return "none";
+}
+export {
+  accordionChevronVariants,
+  resolveAccordionChevronVariant
+};