@xenide-io/the-old-ui-theme 0.7.0 → 0.7.1

package/dist/suite.mjs

@@ -1,8 +1,11 @@
 import {
+  Button,
   DropdownItem,
   DropdownMenu,
+  Input,
+  Modal,
   Tooltip
-} from "./chunk-KDR6HI6F.mjs";
+} from "./chunk-YB4TBWHV.mjs";
 import {
   SuiteThemeProvider,
   useSuiteTheme
@@ -3625,6 +3628,81 @@ function SuiteAppLayout({
     }
   );
 }
+
+// src/suite/components/suite-integration-picker.tsx
+import { useMemo, useState as useState10 } from "react";
+import { NavArrowDown as NavArrowDown2, NavArrowUp, Server as Plug, Xmark } from "iconoir-react";
+import { jsx as jsx24, jsxs as jsxs21 } from "react/jsx-runtime";
+var DESCRIPTION_LIMIT = 90;
+function SuiteIntegrationPicker({
+  open,
+  items,
+  connectedItems = [],
+  loading = false,
+  onClose,
+  onConnect,
+  onDisconnect,
+  title = "Integrate an app",
+  description = "Connect an app to this workspace securely.",
+  dataTest = "suite-integration-picker"
+}) {
+  const [query, setQuery] = useState10("");
+  const [category, setCategory] = useState10("all");
+  const [expanded, setExpanded] = useState10(null);
+  const categories = useMemo(
+    () => Array.from(new Set(items.flatMap((item) => {
+      var _a;
+      return (_a = item.categories) != null ? _a : [];
+    }))).sort(),
+    [items]
+  );
+  const filtered = items.filter((item) => {
+    var _a;
+    const haystack = `${item.label} ${item.description}`.toLowerCase();
+    return haystack.includes(query.trim().toLowerCase()) && (category === "all" || ((_a = item.categories) != null ? _a : []).includes(category));
+  });
+  return /* @__PURE__ */ jsx24(Modal, { open, onClose, title, description, size: "xl", dataTest, children: /* @__PURE__ */ jsxs21("div", { className: "space-y-4", children: [
+    /* @__PURE__ */ jsx24(Input, { value: query, onChange: (event) => setQuery(event.target.value), placeholder: "Search apps...", "aria-label": "Search apps" }),
+    /* @__PURE__ */ jsx24("div", { className: "flex flex-wrap gap-2", role: "group", "aria-label": "Integration categories", children: ["all", ...categories].map((value) => /* @__PURE__ */ jsx24("button", { type: "button", onClick: () => setCategory(value), className: category === value ? "rounded-full bg-ph-brand px-3 py-1.5 text-xs font-semibold text-white" : "rounded-full border border-ph-border px-3 py-1.5 text-xs text-ph-subtle hover:bg-ph-muted", children: value === "all" ? "All apps" : value }, value)) }),
+    loading ? /* @__PURE__ */ jsx24("p", { className: "text-sm text-ph-subtle", children: "Loading apps..." }) : /* @__PURE__ */ jsx24("div", { className: "grid max-h-[60vh] gap-3 overflow-y-auto sm:grid-cols-2 lg:grid-cols-3", children: filtered.map((item) => {
+      var _a, _b;
+      const isExpanded = expanded === item.id;
+      const longDescription = item.description.length > DESCRIPTION_LIMIT;
+      const text = isExpanded || !longDescription ? item.description : `${item.description.slice(0, DESCRIPTION_LIMIT).trimEnd()}...`;
+      return /* @__PURE__ */ jsxs21("div", { className: "flex min-h-36 flex-col justify-between rounded-xl border border-ph-border bg-ph-surface p-4", children: [
+        /* @__PURE__ */ jsx24("button", { type: "button", className: "text-left", onClick: () => longDescription && setExpanded(isExpanded ? null : item.id), "aria-expanded": isExpanded, children: /* @__PURE__ */ jsxs21("span", { className: "flex items-start gap-3", children: [
+          /* @__PURE__ */ jsx24("span", { className: "flex h-10 w-10 shrink-0 items-center justify-center rounded-lg bg-ph-muted text-ph-ink", children: (_a = item.icon) != null ? _a : /* @__PURE__ */ jsx24(Plug, { className: "h-5 w-5", "aria-hidden": true }) }),
+          /* @__PURE__ */ jsxs21("span", { className: "min-w-0", children: [
+            /* @__PURE__ */ jsx24("span", { className: "block font-medium text-ph-ink", children: item.label }),
+            /* @__PURE__ */ jsx24("span", { className: "mt-1 block text-xs text-ph-subtle", children: text }),
+            longDescription ? /* @__PURE__ */ jsxs21("span", { className: "mt-1 block text-xs font-medium text-ph-brand", children: [
+              isExpanded ? "See less" : "See more",
+              " ",
+              isExpanded ? /* @__PURE__ */ jsx24(NavArrowUp, { className: "inline h-3 w-3" }) : /* @__PURE__ */ jsx24(NavArrowDown2, { className: "inline h-3 w-3" })
+            ] }) : null
+          ] })
+        ] }) }),
+        /* @__PURE__ */ jsx24(Button, { type: "button", variant: "primary", className: "mt-3 self-start", disabled: Boolean(item.unavailableReason) || item.connecting, onClick: () => onConnect(item), children: /* @__PURE__ */ jsxs21("span", { className: "flex items-center gap-1.5", children: [
+          /* @__PURE__ */ jsx24(Plug, { className: "h-3.5 w-3.5", "aria-hidden": true }),
+          item.connecting ? "Connecting..." : (_b = item.unavailableReason) != null ? _b : "Connect"
+        ] }) })
+      ] }, item.id);
+    }) }),
+    connectedItems.length > 0 && onDisconnect ? /* @__PURE__ */ jsxs21("div", { className: "space-y-2 border-t border-ph-border pt-4", children: [
+      /* @__PURE__ */ jsx24("h3", { className: "font-medium text-ph-ink", children: "Connected apps" }),
+      connectedItems.map((item) => /* @__PURE__ */ jsxs21("div", { className: "flex items-center justify-between gap-3 rounded-lg border border-ph-border bg-ph-muted p-3", children: [
+        /* @__PURE__ */ jsxs21("span", { className: "flex min-w-0 items-center gap-2 text-sm text-ph-ink", children: [
+          item.icon,
+          /* @__PURE__ */ jsx24("span", { className: "truncate", children: item.label })
+        ] }),
+        /* @__PURE__ */ jsx24(Button, { type: "button", variant: "danger", onClick: () => onDisconnect(item), children: /* @__PURE__ */ jsxs21("span", { className: "flex items-center gap-1.5", children: [
+          /* @__PURE__ */ jsx24(Xmark, { className: "h-4 w-4", "aria-hidden": true }),
+          "Disconnect"
+        ] }) })
+      ] }, item.id))
+    ] }) : null
+  ] }) });
+}
 export {
   APP_ACCENTS,
   APP_GLYPHS,
@@ -3660,6 +3738,7 @@ export {
   SuiteBreadcrumbs,
   SuiteEmptyState,
   SuiteIcon,
+  SuiteIntegrationPicker,
   SuiteMobileDrawer,
   SuiteMobileHeader,
   SuiteMotionProvider,

package/dist/ui.mjs

@@ -9,6 +9,7 @@ import {
   AvatarGroup,
   Badge,
   Button,
+  ButtonChrome,
   Calendar,
   Caption,
   Card,
@@ -20,6 +21,11 @@ import {
   ComponentDocs,
   Display,
   Dot,
+  DropdownButton,
+  DropdownItem,
+  DropdownMenu,
+  DropdownRadioGroup,
+  DropdownRadioItem,
   EmptyState,
   FileUpload,
   FilterBar,
@@ -32,6 +38,8 @@ import {
   H3,
   H4,
   H5,
+  IconBase,
+  IconByName,
   Input,
   Kbd,
   Label,
@@ -64,20 +72,10 @@ import {
   Textarea,
   ThemeDomSync,
   ThemeSwitcher,
-  Toggle
-} from "./chunk-VXISSXTB.mjs";
-import {
-  ButtonChrome,
-  DropdownButton,
-  DropdownItem,
-  DropdownMenu,
-  DropdownRadioGroup,
-  DropdownRadioItem,
-  IconBase,
-  IconByName,
+  Toggle,
   Tooltip,
   TooltipProvider
-} from "./chunk-KDR6HI6F.mjs";
+} from "./chunk-YB4TBWHV.mjs";
 import "./chunk-FWCSY2DS.mjs";
 export {
   Accordion,

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@xenide-io/the-old-ui-theme",
-  "version": "0.7.0",
+  "version": "0.7.1",
   "description": "Props-driven React components and theme tokens inspired by classic interface design \u2014 optimized for Next.js apps and internal tools.",
   "author": "Xenide",
   "license": "MIT",

package/src/suite/components/suite-integration-picker.tsx

@@ -0,0 +1,68 @@
+"use client";
+
+import { useMemo, useState, type ReactNode } from "react";
+import { NavArrowDown, NavArrowUp, Server as Plug, Xmark } from "iconoir-react";
+import { Button, Input, Modal } from "@/components/ui";
+
+export interface SuiteIntegrationPickerItem {
+  id: string;
+  label: string;
+  description: string;
+  icon?: ReactNode;
+  categories?: string[];
+  connecting?: boolean;
+  unavailableReason?: string;
+}
+
+export interface SuiteIntegrationPickerProps {
+  open: boolean;
+  items: SuiteIntegrationPickerItem[];
+  connectedItems?: SuiteIntegrationPickerItem[];
+  loading?: boolean;
+  onClose: () => void;
+  onConnect: (item: SuiteIntegrationPickerItem) => void;
+  onDisconnect?: (item: SuiteIntegrationPickerItem) => void;
+  title?: string;
+  description?: string;
+  dataTest?: string;
+}
+
+const DESCRIPTION_LIMIT = 90;
+
+export function SuiteIntegrationPicker({
+  open,
+  items,
+  connectedItems = [],
+  loading = false,
+  onClose,
+  onConnect,
+  onDisconnect,
+  title = "Integrate an app",
+  description = "Connect an app to this workspace securely.",
+  dataTest = "suite-integration-picker",
+}: SuiteIntegrationPickerProps) {
+  const [query, setQuery] = useState("");
+  const [category, setCategory] = useState("all");
+  const [expanded, setExpanded] = useState<string | null>(null);
+  const categories = useMemo(
+    () => Array.from(new Set(items.flatMap((item) => item.categories ?? []))).sort(),
+    [items],
+  );
+  const filtered = items.filter((item) => {
+    const haystack = `${item.label} ${item.description}`.toLowerCase();
+    return haystack.includes(query.trim().toLowerCase()) && (category === "all" || (item.categories ?? []).includes(category));
+  });
+
+  return (
+    <Modal open={open} onClose={onClose} title={title} description={description} size="xl" dataTest={dataTest}>
+      <div className="space-y-4">
+        <Input value={query} onChange={(event) => setQuery(event.target.value)} placeholder="Search apps..." aria-label="Search apps" />
+        <div className="flex flex-wrap gap-2" role="group" aria-label="Integration categories">
+          {["all", ...categories].map((value) => <button key={value} type="button" onClick={() => setCategory(value)} className={category === value ? "rounded-full bg-ph-brand px-3 py-1.5 text-xs font-semibold text-white" : "rounded-full border border-ph-border px-3 py-1.5 text-xs text-ph-subtle hover:bg-ph-muted"}>{value === "all" ? "All apps" : value}</button>)}
+        </div>
+        {loading ? <p className="text-sm text-ph-subtle">Loading apps...</p> : <div className="grid max-h-[60vh] gap-3 overflow-y-auto sm:grid-cols-2 lg:grid-cols-3">{filtered.map((item) => { const isExpanded = expanded === item.id; const longDescription = item.description.length > DESCRIPTION_LIMIT; const text = isExpanded || !longDescription ? item.description : `${item.description.slice(0, DESCRIPTION_LIMIT).trimEnd()}...`; return <div key={item.id} className="flex min-h-36 flex-col justify-between rounded-xl border border-ph-border bg-ph-surface p-4"><button type="button" className="text-left" onClick={() => longDescription && setExpanded(isExpanded ? null : item.id)} aria-expanded={isExpanded}><span className="flex items-start gap-3"><span className="flex h-10 w-10 shrink-0 items-center justify-center rounded-lg bg-ph-muted text-ph-ink">{item.icon ?? <Plug className="h-5 w-5" aria-hidden />}</span><span className="min-w-0"><span className="block font-medium text-ph-ink">{item.label}</span><span className="mt-1 block text-xs text-ph-subtle">{text}</span>{longDescription ? <span className="mt-1 block text-xs font-medium text-ph-brand">{isExpanded ? "See less" : "See more"} {isExpanded ? <NavArrowUp className="inline h-3 w-3" /> : <NavArrowDown className="inline h-3 w-3" />}</span> : null}</span></span></button><Button type="button" variant="primary" className="mt-3 self-start" disabled={Boolean(item.unavailableReason) || item.connecting} onClick={() => onConnect(item)}><span className="flex items-center gap-1.5"><Plug className="h-3.5 w-3.5" aria-hidden />{item.connecting ? "Connecting..." : item.unavailableReason ?? "Connect"}</span></Button></div>; })}</div>}
+        {connectedItems.length > 0 && onDisconnect ? <div className="space-y-2 border-t border-ph-border pt-4"><h3 className="font-medium text-ph-ink">Connected apps</h3>{connectedItems.map((item) => <div key={item.id} className="flex items-center justify-between gap-3 rounded-lg border border-ph-border bg-ph-muted p-3"><span className="flex min-w-0 items-center gap-2 text-sm text-ph-ink">{item.icon}<span className="truncate">{item.label}</span></span><Button type="button" variant="danger" onClick={() => onDisconnect(item)}><span className="flex items-center gap-1.5"><Xmark className="h-4 w-4" aria-hidden />Disconnect</span></Button></div>)}</div> : null}
+      </div>
+    </Modal>
+  );
+}

package/src/suite/index.ts

@@ -147,3 +147,8 @@ export {
   SuiteAppLayout,
   type SuiteAppLayoutProps,
 } from "./components/suite-app-layout";
+export {
+  SuiteIntegrationPicker,
+  type SuiteIntegrationPickerItem,
+  type SuiteIntegrationPickerProps,
+} from "./components/suite-integration-picker";