@conductor-by-89soone/react 0.3.1 → 0.4.1

package/dist/index.js

@@ -1,18 +1,73 @@
-export { Badge, SeverityTag, StatusBadge } from './chunk-535YGQAR.js';
-export { Card, CardGrid, Panel } from './chunk-TUHWL5JC.js';
-export { Button, IconButton } from './chunk-G7TRTZRR.js';
-export { CodeBlock, Kbd, Table, Timeline } from './chunk-RBD5Z2LR.js';
-export { Banner, EmptyState, Meter, ProgressRing, Spinner } from './chunk-NF3ZHADJ.js';
-export { Checkbox, Field, Select, Switch, TextArea, TextField } from './chunk-3YDK2JBK.js';
-export { Dialog, Drawer, DropdownMenu, Tooltip } from './chunk-MR7FIZKV.js';
-export { AppShell, NavList, TopBar } from './chunk-R5BLKHR2.js';
-export { cx } from './chunk-WEIMKRZV.js';
-import { PACKAGE_NAME as PACKAGE_NAME$1, CDT_PREFIX } from '@conductor-by-89soone/tokens';
-
-var PACKAGE_NAME = "@conductor-by-89soone/react";
-var CONSUMED_PACKAGES = [PACKAGE_NAME$1, "@conductor-by-89soone/css"];
+import { CDT_PREFIX, PACKAGE_NAME as TOKENS_PACKAGE_NAME } from "@conductor-by-89soone/tokens";
+import { cx } from "./cx.js";
+import { Button, IconButton } from "./action.js";
+import { Card, CardGrid, Panel } from "./surface.js";
+import { Badge, SeverityTag, StatusBadge } from "./status.js";
+import { CodeBlock, Kbd, Table, Timeline } from "./data.js";
+import { Dialog, Drawer, DropdownMenu, Tooltip } from "./overlay.js";
+import { Checkbox, Field, Select, Switch, TextArea, TextField } from "./form.js";
+import { Banner, EmptyState, Meter, ProgressRing, Spinner } from "./feedback.js";
+import { AppShell, NavList, TopBar } from "./shell.js";
+const PACKAGE_NAME = "@conductor-by-89soone/react";
+const CONSUMED_PACKAGES = [TOKENS_PACKAGE_NAME, "@conductor-by-89soone/css"];
 function blockClassName(block) {
   return `${CDT_PREFIX}${block}`;
 }
-
-export { CONSUMED_PACKAGES, PACKAGE_NAME, blockClassName };
+import { Combobox, MultiSelect, FilterChip, FilterToolbar, DataTable, WorkbenchLayout, DetailInspector, PathList, Breadcrumb, Skeleton, CopyButton, ProcessingStatus } from "./workbench.js";
+import { Tabs, Popover, Collapsible } from "./interaction.js";
+import { AppShellNavTrigger } from "./shell.js";
+import { RelationGraph, layoutRelationNodes } from "./relation.js";
+export {
+  AppShell,
+  AppShellNavTrigger,
+  Badge,
+  Banner,
+  Breadcrumb,
+  Button,
+  CONSUMED_PACKAGES,
+  Card,
+  CardGrid,
+  Checkbox,
+  CodeBlock,
+  Collapsible,
+  Combobox,
+  CopyButton,
+  DataTable,
+  DetailInspector,
+  Dialog,
+  Drawer,
+  DropdownMenu,
+  EmptyState,
+  Field,
+  FilterChip,
+  FilterToolbar,
+  IconButton,
+  Kbd,
+  Meter,
+  MultiSelect,
+  NavList,
+  PACKAGE_NAME,
+  Panel,
+  PathList,
+  Popover,
+  ProcessingStatus,
+  ProgressRing,
+  RelationGraph,
+  Select,
+  SeverityTag,
+  Skeleton,
+  Spinner,
+  StatusBadge,
+  Switch,
+  Table,
+  Tabs,
+  TextArea,
+  TextField,
+  Timeline,
+  Tooltip,
+  TopBar,
+  WorkbenchLayout,
+  blockClassName,
+  cx,
+  layoutRelationNodes
+};

package/dist/interaction.d.ts

@@ -0,0 +1,37 @@
+import * as react from 'react';
+import { ComponentPropsWithoutRef } from 'react';
+import * as RadixTabs from '@radix-ui/react-tabs';
+import * as RadixPopover from '@radix-ui/react-popover';
+import * as RadixCollapsible from '@radix-ui/react-collapsible';
+
+type TabsRootProps = ComponentPropsWithoutRef<typeof RadixTabs.Root>;
+/** Inactive children unmount by default. forceMount preserves their state, but keeps them hidden. */
+type TabsContentProps = ComponentPropsWithoutRef<typeof RadixTabs.Content>;
+declare const Tabs: {
+    readonly Root: react.ForwardRefExoticComponent<Omit<RadixTabs.TabsProps & react.RefAttributes<HTMLDivElement>, "ref"> & react.RefAttributes<HTMLDivElement>>;
+    readonly List: react.ForwardRefExoticComponent<Omit<RadixTabs.TabsListProps & react.RefAttributes<HTMLDivElement>, "ref"> & react.RefAttributes<HTMLDivElement>>;
+    readonly Trigger: react.ForwardRefExoticComponent<Omit<RadixTabs.TabsTriggerProps & react.RefAttributes<HTMLButtonElement>, "ref"> & react.RefAttributes<HTMLButtonElement>>;
+    readonly Content: react.ForwardRefExoticComponent<Omit<RadixTabs.TabsContentProps & react.RefAttributes<HTMLDivElement>, "ref"> & react.RefAttributes<HTMLDivElement>>;
+};
+type PopoverContentProps = ComponentPropsWithoutRef<typeof RadixPopover.Content> & {
+    /** Keep a locally scoped theme by portalling into its container. Defaults to document.body. */
+    readonly container?: ComponentPropsWithoutRef<typeof RadixPopover.Portal>["container"];
+};
+declare const Popover: {
+    readonly Root: react.FC<RadixPopover.PopoverProps>;
+    readonly Trigger: react.ForwardRefExoticComponent<RadixPopover.PopoverTriggerProps & react.RefAttributes<HTMLButtonElement>>;
+    readonly Anchor: react.ForwardRefExoticComponent<RadixPopover.PopoverAnchorProps & react.RefAttributes<HTMLDivElement>>;
+    readonly Content: react.ForwardRefExoticComponent<Omit<RadixPopover.PopoverContentProps & react.RefAttributes<HTMLDivElement>, "ref"> & {
+        /** Keep a locally scoped theme by portalling into its container. Defaults to document.body. */
+        readonly container?: ComponentPropsWithoutRef<typeof RadixPopover.Portal>["container"];
+    } & react.RefAttributes<HTMLDivElement>>;
+    readonly Close: react.ForwardRefExoticComponent<RadixPopover.PopoverCloseProps & react.RefAttributes<HTMLButtonElement>>;
+    readonly Arrow: react.ForwardRefExoticComponent<RadixPopover.PopoverArrowProps & react.RefAttributes<SVGSVGElement>>;
+};
+declare const Collapsible: {
+    readonly Root: react.ForwardRefExoticComponent<Omit<RadixCollapsible.CollapsibleProps & react.RefAttributes<HTMLDivElement>, "ref"> & react.RefAttributes<HTMLDivElement>>;
+    readonly Trigger: react.ForwardRefExoticComponent<Omit<RadixCollapsible.CollapsibleTriggerProps & react.RefAttributes<HTMLButtonElement>, "ref"> & react.RefAttributes<HTMLButtonElement>>;
+    readonly Content: react.ForwardRefExoticComponent<Omit<RadixCollapsible.CollapsibleContentProps & react.RefAttributes<HTMLDivElement>, "ref"> & react.RefAttributes<HTMLDivElement>>;
+};
+
+export { Collapsible, Popover, type PopoverContentProps, Tabs, type TabsContentProps, type TabsRootProps };

package/dist/interaction.js

@@ -0,0 +1,47 @@
+"use client";
+"use client";
+import { jsx } from "react/jsx-runtime";
+import * as RadixTabs from "@radix-ui/react-tabs";
+import * as RadixPopover from "@radix-ui/react-popover";
+import * as RadixCollapsible from "@radix-ui/react-collapsible";
+import { createContext, useContext, useState, forwardRef } from "react";
+import { cx } from "./cx.js";
+const TabValue = createContext(void 0);
+const TabsRoot = forwardRef(function TabsRoot2({ className, activationMode = "manual", value, defaultValue, onValueChange, ...props }, ref) {
+  const [localValue, setLocalValue] = useState(defaultValue);
+  const selected = value ?? localValue;
+  return /* @__PURE__ */ jsx(TabValue.Provider, { value: selected, children: /* @__PURE__ */ jsx(RadixTabs.Root, { ...props, ref, className: cx("cdt-tabs", className), activationMode, value: selected, onValueChange: (next) => {
+    setLocalValue(next);
+    onValueChange?.(next);
+  } }) });
+});
+const TabsList = forwardRef(function TabsList2({ className, ...props }, ref) {
+  return /* @__PURE__ */ jsx(RadixTabs.List, { ...props, ref, className: cx("cdt-tabs__list", className) });
+});
+const TabsTrigger = forwardRef(function TabsTrigger2({ className, ...props }, ref) {
+  return /* @__PURE__ */ jsx(RadixTabs.Trigger, { ...props, ref, className: cx("cdt-tabs__trigger", className) });
+});
+const TabsContent = forwardRef(function TabsContent2({ className, value, ...props }, ref) {
+  const selected = useContext(TabValue);
+  return /* @__PURE__ */ jsx(RadixTabs.Content, { ...props, value, ref, hidden: selected !== value, className: cx("cdt-tabs__content", className) });
+});
+const Tabs = { Root: TabsRoot, List: TabsList, Trigger: TabsTrigger, Content: TabsContent };
+const PopoverContent = forwardRef(function PopoverContent2({ className, container, ...props }, ref) {
+  return /* @__PURE__ */ jsx(RadixPopover.Portal, { container, children: /* @__PURE__ */ jsx(RadixPopover.Content, { ...props, ref, className: cx("cdt-popover", className) }) });
+});
+const Popover = { Root: RadixPopover.Root, Trigger: RadixPopover.Trigger, Anchor: RadixPopover.Anchor, Content: PopoverContent, Close: RadixPopover.Close, Arrow: RadixPopover.Arrow };
+const CollapsibleRoot = forwardRef(function CollapsibleRoot2({ className, ...props }, ref) {
+  return /* @__PURE__ */ jsx(RadixCollapsible.Root, { ...props, ref, className: cx("cdt-collapsible", className) });
+});
+const CollapsibleTrigger = forwardRef(function CollapsibleTrigger2({ className, ...props }, ref) {
+  return /* @__PURE__ */ jsx(RadixCollapsible.Trigger, { ...props, ref, className: cx("cdt-collapsible__trigger", className) });
+});
+const CollapsibleContent = forwardRef(function CollapsibleContent2({ className, ...props }, ref) {
+  return /* @__PURE__ */ jsx(RadixCollapsible.Content, { ...props, ref, className: cx("cdt-collapsible__content", className) });
+});
+const Collapsible = { Root: CollapsibleRoot, Trigger: CollapsibleTrigger, Content: CollapsibleContent };
+export {
+  Collapsible,
+  Popover,
+  Tabs
+};

package/dist/overlay.js

@@ -1,2 +1,227 @@
-export { Dialog, Drawer, DropdownMenu, Tooltip } from './chunk-MR7FIZKV.js';
-import './chunk-WEIMKRZV.js';
+"use client";
+import { jsx, jsxs } from "react/jsx-runtime";
+import * as RadixDialog from "@radix-ui/react-dialog";
+import * as RadixDropdownMenu from "@radix-ui/react-dropdown-menu";
+import * as RadixTooltip from "@radix-ui/react-tooltip";
+import {
+  forwardRef
+} from "react";
+import { cx } from "./cx.js";
+const DialogContent = forwardRef(
+  function DialogContent2({ children, className, size = "md", ...props }, ref) {
+    return /* @__PURE__ */ jsxs(RadixDialog.Portal, { children: [
+      /* @__PURE__ */ jsx(RadixDialog.Overlay, { className: "cdt-overlay" }),
+      /* @__PURE__ */ jsx(
+        RadixDialog.Content,
+        {
+          ...props,
+          ref,
+          className: cx(
+            "cdt-dialog",
+            size === "sm" && "cdt-dialog--sm",
+            className
+          ),
+          children
+        }
+      )
+    ] });
+  }
+);
+DialogContent.displayName = "Dialog.Content";
+const DialogTitle = forwardRef(function DialogTitle2({ className, ...props }, ref) {
+  return /* @__PURE__ */ jsx(
+    RadixDialog.Title,
+    {
+      ...props,
+      ref,
+      className: cx("cdt-dialog__title", className)
+    }
+  );
+});
+DialogTitle.displayName = "Dialog.Title";
+const DialogDescription = forwardRef(function DialogDescription2({ className, ...props }, ref) {
+  return /* @__PURE__ */ jsx(
+    RadixDialog.Description,
+    {
+      ...props,
+      ref,
+      className: cx("cdt-dialog__description", className)
+    }
+  );
+});
+DialogDescription.displayName = "Dialog.Description";
+const DialogClose = forwardRef(
+  function DialogClose2({ asChild = false, className, ...props }, ref) {
+    return /* @__PURE__ */ jsx(
+      RadixDialog.Close,
+      {
+        ...props,
+        ref,
+        asChild,
+        className: cx(
+          "cdt-dialog__close",
+          !asChild && "cdt-btn",
+          !asChild && "cdt-btn--secondary",
+          !asChild && "cdt-btn--sm",
+          className
+        )
+      }
+    );
+  }
+);
+DialogClose.displayName = "Dialog.Close";
+const Dialog = {
+  Root: RadixDialog.Root,
+  Trigger: RadixDialog.Trigger,
+  Content: DialogContent,
+  Title: DialogTitle,
+  Description: DialogDescription,
+  Close: DialogClose
+};
+const DrawerContent = forwardRef(
+  function DrawerContent2({ children, className, side = "right", ...props }, ref) {
+    return /* @__PURE__ */ jsxs(RadixDialog.Portal, { children: [
+      /* @__PURE__ */ jsx(RadixDialog.Overlay, { className: "cdt-overlay" }),
+      /* @__PURE__ */ jsx(
+        RadixDialog.Content,
+        {
+          ...props,
+          ref,
+          className: cx("cdt-drawer", `cdt-drawer--${side}`, className),
+          children
+        }
+      )
+    ] });
+  }
+);
+DrawerContent.displayName = "Drawer.Content";
+const DrawerTitle = forwardRef(function DrawerTitle2({ className, ...props }, ref) {
+  return /* @__PURE__ */ jsx(
+    RadixDialog.Title,
+    {
+      ...props,
+      ref,
+      className: cx("cdt-drawer__title", className)
+    }
+  );
+});
+DrawerTitle.displayName = "Drawer.Title";
+const DrawerClose = forwardRef(
+  function DrawerClose2({ asChild = false, className, ...props }, ref) {
+    return /* @__PURE__ */ jsx(
+      RadixDialog.Close,
+      {
+        ...props,
+        ref,
+        asChild,
+        className: cx(
+          "cdt-drawer__close",
+          !asChild && "cdt-btn",
+          !asChild && "cdt-btn--secondary",
+          !asChild && "cdt-btn--sm",
+          className
+        )
+      }
+    );
+  }
+);
+DrawerClose.displayName = "Drawer.Close";
+const Drawer = {
+  Root: RadixDialog.Root,
+  Trigger: RadixDialog.Trigger,
+  Content: DrawerContent,
+  Title: DrawerTitle,
+  Description: RadixDialog.Description,
+  Close: DrawerClose
+};
+const TooltipContent = forwardRef(
+  function TooltipContent2({ children, className, showArrow = true, ...props }, ref) {
+    return /* @__PURE__ */ jsx(RadixTooltip.Portal, { children: /* @__PURE__ */ jsxs(
+      RadixTooltip.Content,
+      {
+        ...props,
+        ref,
+        className: cx("cdt-tooltip", className),
+        children: [
+          children,
+          showArrow ? /* @__PURE__ */ jsx(RadixTooltip.Arrow, { className: "cdt-tooltip__arrow" }) : null
+        ]
+      }
+    ) });
+  }
+);
+TooltipContent.displayName = "Tooltip.Content";
+const Tooltip = {
+  Provider: RadixTooltip.Provider,
+  Root: RadixTooltip.Root,
+  Trigger: RadixTooltip.Trigger,
+  Content: TooltipContent
+};
+const DropdownMenuContent = forwardRef(function DropdownMenuContent2({ className, ...props }, ref) {
+  return /* @__PURE__ */ jsx(RadixDropdownMenu.Portal, { children: /* @__PURE__ */ jsx(
+    RadixDropdownMenu.Content,
+    {
+      ...props,
+      ref,
+      className: cx("cdt-menu", className)
+    }
+  ) });
+});
+DropdownMenuContent.displayName = "DropdownMenu.Content";
+const DropdownMenuItem = forwardRef(
+  function DropdownMenuItem2({ children, className, icon, tone = "neutral", ...props }, ref) {
+    return /* @__PURE__ */ jsxs(
+      RadixDropdownMenu.Item,
+      {
+        ...props,
+        ref,
+        className: cx(
+          "cdt-menu__item",
+          tone === "danger" && "cdt-menu__item--danger",
+          className
+        ),
+        children: [
+          icon === void 0 ? null : /* @__PURE__ */ jsx("span", { className: "cdt-menu__item-icon", "aria-hidden": "true", children: icon }),
+          children
+        ]
+      }
+    );
+  }
+);
+DropdownMenuItem.displayName = "DropdownMenu.Item";
+const DropdownMenuLabel = forwardRef(function DropdownMenuLabel2({ className, ...props }, ref) {
+  return /* @__PURE__ */ jsx(
+    RadixDropdownMenu.Label,
+    {
+      ...props,
+      ref,
+      className: cx("cdt-menu__label", className)
+    }
+  );
+});
+DropdownMenuLabel.displayName = "DropdownMenu.Label";
+const DropdownMenuSeparator = forwardRef(function DropdownMenuSeparator2({ className, ...props }, ref) {
+  return /* @__PURE__ */ jsx(
+    RadixDropdownMenu.Separator,
+    {
+      ...props,
+      ref,
+      className: cx("cdt-menu__separator", className)
+    }
+  );
+});
+DropdownMenuSeparator.displayName = "DropdownMenu.Separator";
+const DropdownMenu = {
+  Root: RadixDropdownMenu.Root,
+  Trigger: RadixDropdownMenu.Trigger,
+  Content: DropdownMenuContent,
+  Item: DropdownMenuItem,
+  Label: DropdownMenuLabel,
+  Separator: DropdownMenuSeparator
+};
+export {
+  Dialog,
+  Drawer,
+  DropdownMenu,
+  Tooltip
+};

package/dist/relation.d.ts

@@ -0,0 +1,56 @@
+import * as react from 'react';
+import { HTMLAttributes } from 'react';
+
+interface RelationNode {
+    readonly id: string;
+    readonly label: string;
+    readonly description?: string;
+    /** Consumer-sanitized state; never infer or reveal why content is unavailable. */
+    readonly unavailable?: boolean;
+}
+interface RelationEdge {
+    readonly id: string;
+    readonly source: string;
+    readonly target: string;
+    readonly type: string;
+    /** A verb phrase read as “source → label → target”. */
+    readonly label: string;
+    readonly evidence: string;
+    readonly confidence?: string;
+    readonly unresolved?: boolean;
+    readonly ambiguous?: boolean;
+    readonly retracted?: boolean;
+}
+type RelationSelection = {
+    readonly kind: "node" | "edge";
+    readonly id: string;
+} | null;
+interface RelationViewport {
+    readonly x: number;
+    readonly y: number;
+    readonly zoom: number;
+}
+interface RelationGraphProps extends Omit<HTMLAttributes<HTMLDivElement>, "children" | "onSelect"> {
+    readonly nodes: readonly RelationNode[];
+    readonly edges: readonly RelationEdge[];
+    readonly label: string;
+    readonly selection?: RelationSelection;
+    readonly onSelectionChange?: (selection: RelationSelection) => void;
+    readonly viewport?: RelationViewport;
+    readonly onViewportChange?: (viewport: RelationViewport) => void;
+    readonly state?: "ready" | "loading" | "empty" | "error" | "partial";
+    readonly stateMessage?: string;
+    readonly onRetry?: () => void;
+}
+/** Stable ID order, bounded O(n log n), and no assumption of a directed acyclic graph. */
+declare function layoutRelationNodes(nodes: readonly RelationNode[]): {
+    x: number;
+    y: number;
+    id: string;
+    label: string;
+    description?: string;
+    unavailable?: boolean;
+}[];
+declare const RelationGraph: react.ForwardRefExoticComponent<RelationGraphProps & react.RefAttributes<HTMLDivElement>>;
+
+export { type RelationEdge, RelationGraph, type RelationGraphProps, type RelationNode, type RelationSelection, type RelationViewport, layoutRelationNodes };