@conductor-by-89soone/react 0.3.0 → 0.4.0

package/dist/workbench.d.ts

@@ -0,0 +1,125 @@
+import * as react from 'react';
+import { HTMLAttributes, Ref, ReactNode } from 'react';
+
+interface SearchOption {
+    readonly id: string;
+    readonly label: string;
+    readonly disabled?: boolean;
+}
+interface ComboboxProps extends Omit<HTMLAttributes<HTMLDivElement>, "onChange"> {
+    readonly label: string;
+    readonly options: readonly SearchOption[];
+    readonly value: string | null;
+    readonly query: string;
+    readonly onQueryChange: (query: string) => void;
+    readonly onValueChange: (id: string | null) => void;
+    readonly state?: "ready" | "loading" | "error";
+    /** Results must belong to the current query; stale batches are hidden. */
+    readonly resultsQuery?: string;
+    readonly disabled?: boolean;
+    readonly inputRef?: Ref<HTMLInputElement>;
+}
+declare const Combobox: react.ForwardRefExoticComponent<ComboboxProps & react.RefAttributes<HTMLDivElement>>;
+interface FilterChipProps extends Omit<HTMLAttributes<HTMLSpanElement>, "children"> {
+    readonly children: ReactNode;
+    readonly onRemove: () => void;
+    readonly removeLabel: string;
+    readonly disabled?: boolean;
+}
+declare const FilterChip: react.ForwardRefExoticComponent<FilterChipProps & react.RefAttributes<HTMLSpanElement>>;
+interface MultiSelectProps extends HTMLAttributes<HTMLFieldSetElement> {
+    readonly label: string;
+    readonly options: readonly SearchOption[];
+    readonly value: readonly string[];
+    readonly onValueChange: (ids: readonly string[]) => void;
+    readonly disabled?: boolean;
+}
+declare const MultiSelect: react.ForwardRefExoticComponent<MultiSelectProps & react.RefAttributes<HTMLFieldSetElement>>;
+declare const FilterToolbar: react.ForwardRefExoticComponent<HTMLAttributes<HTMLDivElement> & react.RefAttributes<HTMLDivElement>>;
+interface DataColumn<Row> {
+    readonly id: string;
+    readonly header: string;
+    readonly cell: (row: Row) => ReactNode;
+    readonly sortable?: boolean;
+    readonly numeric?: boolean;
+}
+interface DataSort {
+    readonly column: string;
+    readonly direction: "ascending" | "descending";
+}
+interface DataTableProps<Row> extends Omit<HTMLAttributes<HTMLDivElement>, "onSelect"> {
+    readonly label: string;
+    readonly rows: readonly Row[];
+    readonly columns: readonly DataColumn<Row>[];
+    readonly rowId: (row: Row) => string;
+    readonly rowLabel: (row: Row) => string;
+    readonly selectedId?: string | null;
+    readonly onSelect?: (id: string, trigger: HTMLButtonElement) => void;
+    /** Parent sorts the full source or requests server ordering; this component never sorts. */
+    readonly sort?: DataSort;
+    readonly onSortChange?: (sort: DataSort) => void;
+    readonly visibleColumns?: readonly string[];
+    readonly density?: "comfortable" | "compact";
+    readonly state?: "ready" | "loading" | "error" | "partial";
+    readonly message?: string;
+    readonly hasMore?: boolean;
+    readonly onLoadMore?: () => void;
+    readonly loadingMore?: boolean;
+}
+declare const DataTable: <Row>(props: DataTableProps<Row> & {
+    readonly ref?: Ref<HTMLDivElement>;
+}) => ReactNode;
+interface WorkbenchLayoutProps extends HTMLAttributes<HTMLDivElement> {
+    readonly inspector?: ReactNode;
+    readonly width?: number;
+    readonly onWidthChange?: (width: number) => void;
+}
+declare const WorkbenchLayout: react.ForwardRefExoticComponent<WorkbenchLayoutProps & react.RefAttributes<HTMLDivElement>>;
+interface DetailInspectorProps extends HTMLAttributes<HTMLElement> {
+    readonly label: string;
+    readonly onClose: () => void;
+    readonly returnFocusRef?: {
+        readonly current: HTMLElement | null;
+    };
+}
+declare const DetailInspector: react.ForwardRefExoticComponent<DetailInspectorProps & react.RefAttributes<HTMLElement>>;
+declare const Skeleton: react.ForwardRefExoticComponent<HTMLAttributes<HTMLDivElement> & {
+    readonly label: string;
+} & react.RefAttributes<HTMLDivElement>>;
+declare const Breadcrumb: react.ForwardRefExoticComponent<HTMLAttributes<HTMLElement> & react.RefAttributes<HTMLElement>>;
+interface PathItem {
+    readonly id: string;
+    readonly label: string;
+    readonly children?: readonly PathItem[];
+    readonly state?: "loading" | "error";
+}
+interface PathListProps extends HTMLAttributes<HTMLUListElement> {
+    readonly items: readonly PathItem[];
+    readonly selectedId?: string;
+    readonly onPathSelect?: (id: string) => void;
+}
+declare const PathList: react.ForwardRefExoticComponent<PathListProps & react.RefAttributes<HTMLUListElement>>;
+interface CopyButtonProps extends Omit<HTMLAttributes<HTMLSpanElement>, "children"> {
+    readonly value: string;
+    readonly label?: string;
+}
+declare const CopyButton: react.ForwardRefExoticComponent<CopyButtonProps & react.RefAttributes<HTMLSpanElement>>;
+interface ProcessingStage {
+    readonly id: string;
+    readonly label: string;
+    readonly status: "complete" | "pending" | "delayed" | "failed" | "unknown";
+    readonly detail: string;
+    readonly action?: {
+        readonly label: string;
+        readonly onAction: () => void;
+        readonly disabledReason?: string;
+        readonly busy?: boolean;
+    };
+}
+interface ProcessingStatusProps extends HTMLAttributes<HTMLDivElement> {
+    readonly stages: readonly ProcessingStage[];
+    readonly label: string;
+}
+declare const ProcessingStatus: react.ForwardRefExoticComponent<ProcessingStatusProps & react.RefAttributes<HTMLDivElement>>;
+
+export { Breadcrumb, Combobox, type ComboboxProps, CopyButton, type CopyButtonProps, type DataColumn, type DataSort, DataTable, type DataTableProps, DetailInspector, type DetailInspectorProps, FilterChip, type FilterChipProps, FilterToolbar, MultiSelect, type MultiSelectProps, type PathItem, PathList, type PathListProps, type ProcessingStage, ProcessingStatus, type ProcessingStatusProps, type SearchOption, Skeleton, WorkbenchLayout, type WorkbenchLayoutProps };

package/dist/workbench.js

@@ -0,0 +1,200 @@
+"use client";
+"use client";
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+import { createElement } from "react";
+import { forwardRef, useEffect, useId, useRef, useState } from "react";
+import { useCombobox } from "downshift";
+import { Button } from "./action.js";
+import { Checkbox, TextField } from "./form.js";
+import { Table, Timeline } from "./data.js";
+import { Banner, EmptyState } from "./feedback.js";
+import { Badge } from "./status.js";
+import { cx } from "./cx.js";
+const Combobox = /* @__PURE__ */ forwardRef(function Combobox2({ label, options, value, query, onQueryChange, onValueChange, state = "ready", resultsQuery = query, disabled, inputRef, className, ...props }, ref) {
+  const uid = useId();
+  const composing = useRef(false);
+  const items = !disabled && state === "ready" && resultsQuery === query ? [...options] : [];
+  const combo = useCombobox({
+    id: uid,
+    items,
+    inputValue: query,
+    selectedItem: options.find((item) => item.id === value) ?? null,
+    itemToString: (item) => item?.label ?? "",
+    isItemDisabled: (item) => !!item.disabled,
+    onInputValueChange: (changes) => {
+      if (changes.type === useCombobox.stateChangeTypes.InputChange) onQueryChange(changes.inputValue);
+    },
+    onSelectedItemChange: (changes) => onValueChange(changes.selectedItem?.id ?? null)
+  });
+  return /* @__PURE__ */ jsxs("div", { ...props, ref, className: cx("cdt-combobox", className), children: [
+    /* @__PURE__ */ jsx("label", { ...combo.getLabelProps(), children: label }),
+    /* @__PURE__ */ jsx(TextField, { ...combo.getInputProps({ disabled, ref: inputRef, onCompositionStart: () => {
+      composing.current = true;
+    }, onCompositionEnd: () => {
+      composing.current = false;
+    }, onKeyDown: (event) => {
+      if (composing.current || event.nativeEvent.isComposing || event.keyCode === 229) {
+        event.nativeEvent.preventDownshiftDefault = true;
+        event.preventDownshiftDefault = true;
+        if (event.key === "Enter") event.preventDefault();
+      }
+    } }) }),
+    /* @__PURE__ */ jsx("ul", { ...combo.getMenuProps(), className: "cdt-combobox__options", hidden: !combo.isOpen || disabled, children: combo.isOpen && items.map((item, index) => /* @__PURE__ */ createElement("li", { ...combo.getItemProps({ item, index }), key: item.id, "data-highlighted": combo.highlightedIndex === index || void 0 }, item.label)) }),
+    /* @__PURE__ */ jsx("span", { role: "status", children: state === "loading" || resultsQuery !== query ? "\uC635\uC158 \uBD88\uB7EC\uC624\uB294 \uC911" : state === "error" ? "\uC635\uC158\uC744 \uBD88\uB7EC\uC624\uC9C0 \uBABB\uD588\uC2B5\uB2C8\uB2E4" : combo.isOpen && items.length === 0 ? "\uC635\uC158 \uC5C6\uC74C" : "" })
+  ] });
+});
+const FilterChip = /* @__PURE__ */ forwardRef(function FilterChip2({ children, onRemove, removeLabel, disabled, className, ...props }, ref) {
+  return /* @__PURE__ */ jsxs("span", { ...props, ref, className: cx("cdt-filter-chip", className), children: [
+    children,
+    /* @__PURE__ */ jsx(Button, { size: "sm", variant: "ghost", "aria-label": removeLabel, disabled, onClick: onRemove, children: "\xD7" })
+  ] });
+});
+const MultiSelect = /* @__PURE__ */ forwardRef(function MultiSelect2({ label, options, value, onValueChange, disabled, className, ...props }, ref) {
+  const [query, setQuery] = useState("");
+  const searchId = useId();
+  return /* @__PURE__ */ jsxs("fieldset", { ...props, ref, disabled, className: cx("cdt-multi-select", className), children: [
+    /* @__PURE__ */ jsx("legend", { children: label }),
+    /* @__PURE__ */ jsx("label", { htmlFor: searchId, children: "\uC635\uC158 \uCC3E\uAE30" }),
+    /* @__PURE__ */ jsx(TextField, { id: searchId, "aria-label": `${label} \uC635\uC158 \uCC3E\uAE30`, value: query, disabled, onChange: (event) => setQuery(event.target.value) }),
+    /* @__PURE__ */ jsx("div", { className: "cdt-filter-toolbar", children: options.filter((option) => value.includes(option.id)).map((option) => /* @__PURE__ */ jsx(FilterChip, { disabled: disabled || option.disabled, removeLabel: `${option.label} \uC81C\uAC70`, onRemove: () => onValueChange(value.filter((id) => id !== option.id)), children: option.label }, option.id)) }),
+    /* @__PURE__ */ jsx("ul", { children: options.filter((option) => option.label.toLocaleLowerCase().includes(query.toLocaleLowerCase())).map((option) => /* @__PURE__ */ jsx("li", { children: /* @__PURE__ */ jsxs("label", { children: [
+      /* @__PURE__ */ jsx(Checkbox, { disabled: disabled || option.disabled, checked: value.includes(option.id), onCheckedChange: (checked) => onValueChange(checked ? [...value, option.id] : value.filter((id) => id !== option.id)) }),
+      option.label
+    ] }) }, option.id)) })
+  ] });
+});
+const FilterToolbar = /* @__PURE__ */ forwardRef(function FilterToolbar2({ className, ...props }, ref) {
+  return /* @__PURE__ */ jsx("div", { ...props, ref, className: cx("cdt-filter-toolbar", className) });
+});
+function DataTableRoot({ label, rows, columns, rowId, rowLabel, selectedId, onSelect, sort, onSortChange, visibleColumns, density = "comfortable", state = "ready", message, hasMore, onLoadMore, loadingMore, className, ...props }, ref) {
+  const shown = columns.filter((column) => visibleColumns === void 0 || visibleColumns.includes(column.id));
+  return /* @__PURE__ */ jsxs("div", { ...props, ref, className: cx("cdt-data-table", className), "data-density": density, "aria-busy": state === "loading" || loadingMore || void 0, children: [
+    state === "error" || state === "partial" ? /* @__PURE__ */ jsx(Banner, { tone: "warning", children: message ?? (state === "error" ? "\uACB0\uACFC\uB97C \uBD88\uB7EC\uC624\uC9C0 \uBABB\uD588\uC2B5\uB2C8\uB2E4" : "\uC77C\uBD80 \uACB0\uACFC\uB9CC \uD45C\uC2DC\uD569\uB2C8\uB2E4") }) : null,
+    /* @__PURE__ */ jsxs(Table, { caption: label, children: [
+      /* @__PURE__ */ jsx(Table.Head, { children: /* @__PURE__ */ jsxs(Table.Row, { children: [
+        onSelect && /* @__PURE__ */ jsx(Table.HeaderCell, { children: "\uBBF8\uB9AC\uBCF4\uAE30" }),
+        shown.map((column) => /* @__PURE__ */ jsx(Table.HeaderCell, { "aria-sort": sort?.column === column.id ? sort.direction : void 0, children: column.sortable && onSortChange ? /* @__PURE__ */ jsxs(Button, { variant: "ghost", size: "sm", onClick: () => onSortChange({ column: column.id, direction: sort?.column === column.id && sort.direction === "ascending" ? "descending" : "ascending" }), children: [
+          column.header,
+          sort?.column === column.id ? sort.direction === "ascending" ? " \u2191" : " \u2193" : " \u2195"
+        ] }) : column.header }, column.id))
+      ] }) }),
+      /* @__PURE__ */ jsxs(Table.Body, { children: [
+        state !== "loading" && rows.map((row) => /* @__PURE__ */ jsxs(Table.Row, { "data-selected": selectedId === rowId(row) || void 0, children: [
+          onSelect && /* @__PURE__ */ jsx(Table.Cell, { children: /* @__PURE__ */ jsx(Button, { size: "sm", variant: "ghost", "aria-label": `${rowLabel(row)} \uBBF8\uB9AC\uBCF4\uAE30`, "aria-pressed": selectedId === rowId(row), onClick: (event) => onSelect(rowId(row), event.currentTarget), children: "\uC120\uD0DD" }) }),
+          shown.map((column) => /* @__PURE__ */ jsx(Table.Cell, { numeric: column.numeric, children: column.cell(row) }, column.id))
+        ] }, rowId(row))),
+        (state === "loading" || rows.length === 0) && /* @__PURE__ */ jsx(Table.Row, { children: /* @__PURE__ */ jsx(Table.Cell, { colSpan: shown.length + (onSelect ? 1 : 0), children: state === "loading" ? /* @__PURE__ */ jsx(Skeleton, { label: "\uACB0\uACFC \uBD88\uB7EC\uC624\uB294 \uC911" }) : /* @__PURE__ */ jsx(EmptyState, { title: state === "error" ? "\uC870\uD68C \uC2E4\uD328" : "\uAC80\uC0C9 \uACB0\uACFC \uC5C6\uC74C" }) }) })
+      ] })
+    ] }),
+    /* @__PURE__ */ jsxs("div", { className: "cdt-filter-toolbar", children: [
+      /* @__PURE__ */ jsxs("span", { role: "status", children: [
+        "\uD604\uC7AC \uB85C\uB4DC\uB41C ",
+        state === "loading" ? 0 : rows.length,
+        "\uAC1C"
+      ] }),
+      hasMore && onLoadMore ? /* @__PURE__ */ jsx(Button, { onClick: onLoadMore, loading: loadingMore, disabled: state === "loading", children: "\uC774\uC5B4 \uBCF4\uAE30" }) : null
+    ] })
+  ] });
+}
+const DataTable = /* @__PURE__ */ forwardRef(DataTableRoot);
+const WorkbenchLayout = /* @__PURE__ */ forwardRef(function WorkbenchLayout2({ inspector, width = 40, onWidthChange, children, className, style, ...props }, ref) {
+  return /* @__PURE__ */ jsxs("div", { ...props, ref, style: { ...style, "--cdt-workbench-inspector-share": `${Math.max(25, Math.min(60, width))}%` }, className: cx("cdt-workbench", className), "data-inspecting": !!inspector || void 0, children: [
+    /* @__PURE__ */ jsx("div", { className: "cdt-workbench__results", children }),
+    inspector && /* @__PURE__ */ jsxs("div", { className: "cdt-workbench__inspector", children: [
+      onWidthChange && /* @__PURE__ */ jsxs("label", { className: "cdt-workbench__resize", children: [
+        "\uBBF8\uB9AC\uBCF4\uAE30 \uD3ED ",
+        /* @__PURE__ */ jsx("input", { type: "range", min: 25, max: 60, value: width, onChange: (event) => onWidthChange(Number(event.target.value)) })
+      ] }),
+      inspector
+    ] })
+  ] });
+});
+const DetailInspector = /* @__PURE__ */ forwardRef(function DetailInspector2({ label, onClose, returnFocusRef, className, children, onKeyDown, ...props }, ref) {
+  const close = () => {
+    onClose();
+    returnFocusRef?.current?.focus({ preventScroll: true });
+  };
+  return /* @__PURE__ */ jsxs("section", { ...props, ref, "aria-label": props["aria-label"] ?? label, className: cx("cdt-detail-inspector", className), onKeyDown: (event) => {
+    onKeyDown?.(event);
+    if (!event.defaultPrevented && event.key === "Escape") {
+      event.preventDefault();
+      close();
+    }
+  }, children: [
+    /* @__PURE__ */ jsxs("header", { children: [
+      /* @__PURE__ */ jsx("h2", { children: label }),
+      /* @__PURE__ */ jsx(Button, { variant: "ghost", size: "sm", onClick: close, children: "\uBBF8\uB9AC\uBCF4\uAE30 \uB2EB\uAE30" })
+    ] }),
+    children
+  ] });
+});
+const Skeleton = /* @__PURE__ */ forwardRef(function Skeleton2({ label, className, ...props }, ref) {
+  return /* @__PURE__ */ jsx("div", { ...props, ref, role: "status", className: cx("cdt-skeleton", className), children: label });
+});
+const Breadcrumb = /* @__PURE__ */ forwardRef(function Breadcrumb2({ className, "aria-label": label = "\uACBD\uB85C", ...props }, ref) {
+  return /* @__PURE__ */ jsx("nav", { ...props, ref, "aria-label": label, className: cx("cdt-breadcrumb", className) });
+});
+const PathList = /* @__PURE__ */ forwardRef(function PathListRoot({ items, selectedId, onPathSelect, className, ...props }, ref) {
+  return /* @__PURE__ */ jsx("ul", { ...props, ref, className: cx("cdt-path-list", className), children: items.map((item) => /* @__PURE__ */ jsxs("li", { children: [
+    item.children !== void 0 ? /* @__PURE__ */ jsxs("details", { children: [
+      /* @__PURE__ */ jsx("summary", { children: item.label }),
+      /* @__PURE__ */ jsx(PathList, { items: item.children, selectedId, onPathSelect })
+    ] }) : /* @__PURE__ */ jsx(Button, { variant: "ghost", size: "sm", "aria-pressed": selectedId === item.id, onClick: () => onPathSelect?.(item.id), disabled: !onPathSelect, children: item.label }),
+    item.state && /* @__PURE__ */ jsx("span", { role: "status", children: item.state === "loading" ? "\uACBD\uB85C \uBD88\uB7EC\uC624\uB294 \uC911" : "\uACBD\uB85C \uC870\uD68C \uC2E4\uD328" })
+  ] }, item.id)) });
+});
+const CopyButton = /* @__PURE__ */ forwardRef(function CopyButton2({ value, label = "\uBCF5\uC0AC", className, ...props }, ref) {
+  const [result, setResult] = useState(null);
+  const generation = useRef(0);
+  useEffect(() => {
+    ++generation.current;
+    setResult(null);
+    return () => {
+      ++generation.current;
+    };
+  }, [value]);
+  return /* @__PURE__ */ jsxs("span", { ...props, ref, className: cx("cdt-copy-feedback", className), children: [
+    /* @__PURE__ */ jsx(Button, { size: "sm", variant: "ghost", onClick: () => {
+      const mine = ++generation.current;
+      const write = typeof navigator !== "undefined" ? navigator.clipboard?.writeText(value) : void 0;
+      if (!write) {
+        setResult({ value, text: "\uBCF5\uC0AC \uBD88\uAC00 \xB7 \uD14D\uC2A4\uD2B8\uB97C \uC120\uD0DD\uD574 \uBCF5\uC0AC\uD558\uC138\uC694" });
+        return;
+      }
+      void write.then(() => {
+        if (mine === generation.current) setResult({ value, text: "\uBCF5\uC0AC\uD588\uC2B5\uB2C8\uB2E4" });
+      }, () => {
+        if (mine === generation.current) setResult({ value, text: "\uBCF5\uC0AC \uC2E4\uD328 \xB7 \uD14D\uC2A4\uD2B8\uB97C \uC120\uD0DD\uD574 \uBCF5\uC0AC\uD558\uC138\uC694" });
+      });
+    }, children: label }),
+    /* @__PURE__ */ jsx("span", { role: "status", children: result?.value === value ? result.text : "" })
+  ] });
+});
+const ProcessingStatus = /* @__PURE__ */ forwardRef(function ProcessingStatus2({ stages, label, className, ...props }, ref) {
+  const labels = { complete: "\uD655\uC778\uB428", pending: "\uB300\uAE30", delayed: "\uC9C0\uC5F0", failed: "\uC2E4\uD328", unknown: "\uBBF8\uD655\uC778" };
+  return /* @__PURE__ */ jsx("div", { ...props, ref, className: cx("cdt-processing-status", className), children: /* @__PURE__ */ jsx(Timeline, { "aria-label": label, children: stages.map((stage) => /* @__PURE__ */ jsxs(Timeline.Step, { children: [
+    /* @__PURE__ */ jsxs("div", { className: "cdt-filter-toolbar", children: [
+      /* @__PURE__ */ jsx("strong", { children: stage.label }),
+      /* @__PURE__ */ jsx(Badge, { children: labels[stage.status] })
+    ] }),
+    /* @__PURE__ */ jsx("p", { children: stage.detail }),
+    stage.action && /* @__PURE__ */ jsxs(Fragment, { children: [
+      /* @__PURE__ */ jsx(Button, { loading: stage.action.busy, blockedReason: stage.action.disabledReason, onClick: stage.action.onAction, children: stage.action.label }),
+      stage.action.disabledReason && /* @__PURE__ */ jsx("p", { children: stage.action.disabledReason })
+    ] })
+  ] }, stage.id)) }) });
+});
+export {
+  Breadcrumb,
+  Combobox,
+  CopyButton,
+  DataTable,
+  DetailInspector,
+  FilterChip,
+  FilterToolbar,
+  MultiSelect,
+  PathList,
+  ProcessingStatus,
+  Skeleton,
+  WorkbenchLayout
+};

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@conductor-by-89soone/react",
-  "version": "0.3.0",
+  "version": "0.4.0",
   "description": "Accessible React primitives for Conductor.",
   "license": "MIT",
   "homepage": "https://89sooner.github.io/design-system/",
@@ -25,17 +25,25 @@
       "types": "./dist/index.d.ts",
       "import": "./dist/index.js"
     },
-    "./package.json": "./package.json"
+    "./package.json": "./package.json",
+    "./relation": {
+      "types": "./dist/relation.d.ts",
+      "import": "./dist/relation.js"
+    }
   },
   "dependencies": {
-    "@radix-ui/react-dialog": "1.1.19",
     "@radix-ui/react-checkbox": "1.3.2",
+    "@radix-ui/react-collapsible": "1.1.20",
+    "@radix-ui/react-dialog": "1.1.19",
     "@radix-ui/react-dropdown-menu": "2.1.20",
+    "@radix-ui/react-popover": "1.1.23",
     "@radix-ui/react-select": "2.2.5",
     "@radix-ui/react-switch": "1.2.5",
+    "@radix-ui/react-tabs": "1.1.21",
     "@radix-ui/react-tooltip": "1.2.12",
-    "@conductor-by-89soone/css": "0.3.0",
-    "@conductor-by-89soone/tokens": "0.3.0"
+    "downshift": "9.4.0",
+    "@conductor-by-89soone/css": "0.4.0",
+    "@conductor-by-89soone/tokens": "0.4.0"
   },
   "peerDependencies": {
     "lucide-react": ">=0.400.0 <2",

package/dist/chunk-3YDK2JBK.js

@@ -1,103 +0,0 @@
-import { cx } from './chunk-WEIMKRZV.js';
-import * as RadixCheckbox from '@radix-ui/react-checkbox';
-import * as RadixSelect from '@radix-ui/react-select';
-import * as RadixSwitch from '@radix-ui/react-switch';
-import { createContext, forwardRef, useId, useContext, useEffect } from 'react';
-import { jsx, jsxs } from 'react/jsx-runtime';
-
-var FieldContext = createContext(null);
-function joinDescribedBy(...ids) {
-  const result = ids.filter((id) => id !== void 0).join(" ");
-  return result === "" ? void 0 : result;
-}
-function useFieldControl(invalid, describedBy) {
-  const field = useContext(FieldContext);
-  return {
-    id: field?.id ?? "",
-    descriptionId: field?.descriptionId,
-    errorId: field?.errorId,
-    invalid: invalid ?? field?.invalid ?? false,
-    required: field?.required ?? false,
-    describedBy: joinDescribedBy(describedBy, field?.descriptionId, field?.errorId)
-  };
-}
-var Field = forwardRef(function Field2({ children, className, description, error, id: providedId, label, required = false, ...props }, ref) {
-  const generatedId = useId();
-  const id = providedId ?? generatedId;
-  const descriptionId = description === void 0 ? void 0 : `${id}-description`;
-  const errorId = error === void 0 ? void 0 : `${id}-error`;
-  const invalid = error !== void 0;
-  return /* @__PURE__ */ jsx(FieldContext.Provider, { value: { id, descriptionId, errorId, invalid, required }, children: /* @__PURE__ */ jsxs("div", { ...props, ref, className: cx("cdt-field", className), children: [
-    /* @__PURE__ */ jsxs("label", { className: "cdt-field__label", htmlFor: id, children: [
-      label,
-      required ? /* @__PURE__ */ jsx("span", { className: "cdt-field__required", "aria-hidden": "true", children: "*" }) : null
-    ] }),
-    description === void 0 ? null : /* @__PURE__ */ jsx("div", { id: descriptionId, className: "cdt-field__description", children: description }),
-    children,
-    error === void 0 ? null : /* @__PURE__ */ jsx("div", { id: errorId, className: "cdt-field__error", children: error })
-  ] }) });
-});
-Field.displayName = "Field";
-function useMissingLabelWarning(name, hasField, ariaLabel, ariaLabelledBy) {
-  useEffect(() => {
-    if (process.env.NODE_ENV !== "production" && !hasField && ariaLabel === void 0 && ariaLabelledBy === void 0) {
-      console.warn(`[conductor] ${name} requires Field, aria-label, or aria-labelledby.`);
-    }
-  }, [ariaLabel, ariaLabelledBy, hasField, name]);
-}
-var TextField = forwardRef(function TextField2({ "aria-describedby": ariaDescribedBy, "aria-invalid": ariaInvalid, "aria-label": ariaLabel, "aria-labelledby": ariaLabelledBy, className, iconStart, id: ownId, invalid, required, size = "md", variant = "solid", ...props }, ref) {
-  const field = useContext(FieldContext);
-  const control = useFieldControl(invalid, ariaDescribedBy);
-  useMissingLabelWarning("TextField", field !== null, ariaLabel, ariaLabelledBy);
-  const input = /* @__PURE__ */ jsx("input", { ...props, ref, id: ownId ?? (field === null ? void 0 : control.id), "aria-label": ariaLabel, "aria-labelledby": ariaLabelledBy, "aria-describedby": control.describedBy, "aria-invalid": ariaInvalid ?? (control.invalid || void 0), required: required ?? control.required, className: cx("cdt-input", variant === "glass" && "cdt-input--glass", size === "sm" && "cdt-input--sm", control.invalid && "cdt-input--invalid", iconStart !== void 0 && "cdt-input--icon-start", className) });
-  return iconStart === void 0 ? input : /* @__PURE__ */ jsxs("span", { className: "cdt-input-wrap", children: [
-    /* @__PURE__ */ jsx("span", { className: "cdt-input__icon", "aria-hidden": "true", children: iconStart }),
-    input
-  ] });
-});
-TextField.displayName = "TextField";
-var TextArea = forwardRef(function TextArea2({ "aria-describedby": ariaDescribedBy, "aria-invalid": ariaInvalid, "aria-label": ariaLabel, "aria-labelledby": ariaLabelledBy, className, id: ownId, invalid, required, rows = 3, variant = "solid", ...props }, ref) {
-  const field = useContext(FieldContext);
-  const control = useFieldControl(invalid, ariaDescribedBy);
-  useMissingLabelWarning("TextArea", field !== null, ariaLabel, ariaLabelledBy);
-  return /* @__PURE__ */ jsx("textarea", { ...props, ref, id: ownId ?? (field === null ? void 0 : control.id), rows, "aria-label": ariaLabel, "aria-labelledby": ariaLabelledBy, "aria-describedby": control.describedBy, "aria-invalid": ariaInvalid ?? (control.invalid || void 0), required: required ?? control.required, className: cx("cdt-textarea", variant === "glass" && "cdt-textarea--glass", control.invalid && "cdt-textarea--invalid", className) });
-});
-TextArea.displayName = "TextArea";
-var SelectTrigger = forwardRef(function SelectTrigger2({ "aria-describedby": ariaDescribedBy, "aria-invalid": ariaInvalid, "aria-required": ariaRequired, className, id: ownId, invalid, size = "md", ...props }, ref) {
-  const field = useContext(FieldContext);
-  const control = useFieldControl(invalid, ariaDescribedBy);
-  const requiredAttribute = ariaRequired ?? (control.required ? true : void 0);
-  return /* @__PURE__ */ jsx(RadixSelect.Trigger, { ...props, ref, id: ownId ?? (field === null ? void 0 : control.id), "aria-describedby": control.describedBy, "aria-invalid": ariaInvalid ?? (control.invalid || void 0), ...requiredAttribute === void 0 ? {} : { "aria-required": requiredAttribute }, className: cx("cdt-select__trigger", size === "sm" && "cdt-select__trigger--sm", control.invalid && "cdt-select__trigger--invalid", className) });
-});
-SelectTrigger.displayName = "Select.Trigger";
-var SelectContent = forwardRef(function SelectContent2({ children, className, ...props }, ref) {
-  return /* @__PURE__ */ jsx(RadixSelect.Portal, { children: /* @__PURE__ */ jsx(RadixSelect.Content, { ...props, ref, className: cx("cdt-select__content", className), children: /* @__PURE__ */ jsx(RadixSelect.Viewport, { children }) }) });
-});
-SelectContent.displayName = "Select.Content";
-var SelectItem = forwardRef(function SelectItem2({ children, className, indicator = "\u2713", ...props }, ref) {
-  return /* @__PURE__ */ jsxs(RadixSelect.Item, { ...props, ref, className: cx("cdt-select__item", className), children: [
-    /* @__PURE__ */ jsx(RadixSelect.ItemText, { children }),
-    /* @__PURE__ */ jsx(RadixSelect.ItemIndicator, { className: "cdt-select__indicator", "aria-hidden": "true", children: indicator })
-  ] });
-});
-SelectItem.displayName = "Select.Item";
-function SelectRoot({ required, ...props }) {
-  const field = useContext(FieldContext);
-  return /* @__PURE__ */ jsx(RadixSelect.Root, { ...props, required: required ?? field?.required });
-}
-SelectRoot.displayName = "Select.Root";
-var Select = { Root: SelectRoot, Trigger: SelectTrigger, Value: RadixSelect.Value, Content: SelectContent, Item: SelectItem, Group: RadixSelect.Group, Label: RadixSelect.Label };
-var Switch = forwardRef(function Switch2({ className, ...props }, ref) {
-  const field = useContext(FieldContext);
-  const control = useFieldControl(void 0, props["aria-describedby"]);
-  return /* @__PURE__ */ jsx(RadixSwitch.Root, { ...props, ref, id: props.id ?? (field === null ? void 0 : control.id), "aria-describedby": control.describedBy, "aria-invalid": control.invalid || void 0, required: props.required ?? control.required, className: cx("cdt-switch", control.invalid && "cdt-switch--invalid", className), children: /* @__PURE__ */ jsx(RadixSwitch.Thumb, { className: "cdt-switch__thumb" }) });
-});
-Switch.displayName = "Switch";
-var Checkbox = forwardRef(function Checkbox2({ className, indicator = "\u2713", ...props }, ref) {
-  const field = useContext(FieldContext);
-  const control = useFieldControl(void 0, props["aria-describedby"]);
-  return /* @__PURE__ */ jsx(RadixCheckbox.Root, { ...props, ref, id: props.id ?? (field === null ? void 0 : control.id), "aria-describedby": control.describedBy, "aria-invalid": control.invalid || void 0, required: props.required ?? control.required, className: cx("cdt-checkbox", control.invalid && "cdt-checkbox--invalid", className), children: /* @__PURE__ */ jsx(RadixCheckbox.Indicator, { className: "cdt-checkbox__indicator", "aria-hidden": "true", children: indicator }) });
-});
-Checkbox.displayName = "Checkbox";
-
-export { Checkbox, Field, Select, Switch, TextArea, TextField };

package/dist/chunk-535YGQAR.js

@@ -1,32 +0,0 @@
-import { cx } from './chunk-WEIMKRZV.js';
-import { STATUS_ICONS, SEVERITY_ICONS } from '@conductor-by-89soone/tokens';
-import { forwardRef } from 'react';
-import { jsxs, jsx } from 'react/jsx-runtime';
-
-var Badge = forwardRef(function Badge2({ children, className, icon, tone = "neutral", ...props }, ref) {
-  return /* @__PURE__ */ jsxs("span", { ...props, ref, className: cx("cdt-badge", `cdt-badge--${tone}`, className), children: [
-    icon === void 0 ? null : /* @__PURE__ */ jsx("span", { className: "cdt-badge__icon", "aria-hidden": "true", children: icon }),
-    children
-  ] });
-});
-Badge.displayName = "Badge";
-var markerStatuses = ["queued", "neutralEnd"];
-var StatusBadge = forwardRef(function StatusBadge2({ className, icon, label, status, ...props }, ref) {
-  const isMarker = markerStatuses.includes(status);
-  const statusClass = status === "neutralEnd" ? "neutral-end" : status;
-  return /* @__PURE__ */ jsxs("span", { ...props, ref, className: cx("cdt-badge", "cdt-status-badge", `cdt-status-badge--${statusClass}`, className), children: [
-    isMarker ? /* @__PURE__ */ jsx("span", { className: cx("cdt-status-badge__marker", status === "neutralEnd" && "cdt-status-badge__marker--neutral-end"), "aria-hidden": "true" }) : null,
-    /* @__PURE__ */ jsx("span", { className: "cdt-badge__icon", "aria-hidden": "true", "data-cdt-icon": STATUS_ICONS[status], children: icon }),
-    label
-  ] });
-});
-StatusBadge.displayName = "StatusBadge";
-var SeverityTag = forwardRef(function SeverityTag2({ className, icon, label, severity, ...props }, ref) {
-  return /* @__PURE__ */ jsxs("span", { ...props, ref, className: cx("cdt-badge", "cdt-severity-tag", `cdt-severity-tag--${severity}`, className), children: [
-    /* @__PURE__ */ jsx("span", { className: "cdt-badge__icon", "aria-hidden": "true", "data-cdt-icon": SEVERITY_ICONS[severity], children: icon }),
-    label
-  ] });
-});
-SeverityTag.displayName = "SeverityTag";
-
-export { Badge, SeverityTag, StatusBadge };

package/dist/chunk-G7TRTZRR.js

@@ -1,60 +0,0 @@
-import { Spinner } from './chunk-NF3ZHADJ.js';
-import { cx } from './chunk-WEIMKRZV.js';
-import { forwardRef } from 'react';
-import { jsxs, jsx } from 'react/jsx-runtime';
-
-function buttonClasses({ variant = "secondary", tone = "neutral", size = "md", blockedReason, className }) {
-  return cx(
-    "cdt-btn",
-    `cdt-btn--${variant}`,
-    `cdt-btn--tone-${tone}`,
-    size === "sm" && "cdt-btn--sm",
-    blockedReason !== void 0 && "cdt-btn--blocked",
-    className
-  );
-}
-var Button = forwardRef(function Button2({ blockedReason, className, disabled, iconEnd, iconStart, loading = false, onClick, title, variant, tone, size, children, ...props }, ref) {
-  const isBlocked = blockedReason !== void 0;
-  const isDisabled = disabled || isBlocked;
-  return /* @__PURE__ */ jsxs(
-    "button",
-    {
-      ...props,
-      ref,
-      className: buttonClasses({ variant, tone, size, blockedReason, className}),
-      disabled: isDisabled,
-      "aria-busy": loading || void 0,
-      title: isBlocked ? blockedReason : title,
-      onClick: (event) => {
-        if (loading) {
-          event.preventDefault();
-          event.stopPropagation();
-          return;
-        }
-        onClick?.(event);
-      },
-      children: [
-        loading ? /* @__PURE__ */ jsx(Spinner, { size: "sm", label: "", "aria-hidden": "true" }) : iconStart === void 0 ? null : /* @__PURE__ */ jsx("span", { "aria-hidden": "true", children: iconStart }),
-        children,
-        iconEnd === void 0 ? null : /* @__PURE__ */ jsx("span", { "aria-hidden": "true", children: iconEnd })
-      ]
-    }
-  );
-});
-Button.displayName = "Button";
-var IconButton = forwardRef(function IconButton2({ icon, size, ...props }, ref) {
-  return /* @__PURE__ */ jsx(
-    Button,
-    {
-      ...props,
-      ref,
-      size,
-      iconStart: icon,
-      className: cx("cdt-btn--icon", props.className),
-      children: null
-    }
-  );
-});
-IconButton.displayName = "IconButton";
-
-export { Button, IconButton };