@kopexa/sidebar 17.1.74 → 17.2.0

package/dist/index.mjs

@@ -21,7 +21,46 @@ import {
   SidebarTrigger,
   useSidebar
 } from "./chunk-FPVGSRAX.mjs";
+import {
+  SidebarV2
+} from "./chunk-WA2NSEYE.mjs";
+import {
+  AppShell,
+  AppShellAside,
+  AppShellHeader,
+  AppShellMain,
+  AppShellPanelContent,
+  AppShellRoot
+} from "./chunk-PZFEB2PM.mjs";
+import {
+  SidebarV2FromConfig
+} from "./chunk-CMYTESJM.mjs";
+import {
+  SidebarV2Inset,
+  SidebarV2Panel,
+  SidebarV2PanelGroup,
+  SidebarV2PanelItems,
+  SidebarV2PanelLabel,
+  SidebarV2PanelLeaf,
+  SidebarV2Rail,
+  SidebarV2RailItem,
+  SidebarV2RailLink,
+  SidebarV2RailSpacer,
+  SidebarV2Trigger,
+  SidebarV2Workspace
+} from "./chunk-EIXUCY5M.mjs";
+import "./chunk-SDMGFB6V.mjs";
+import {
+  SidebarV2Provider,
+  useSidebarV2
+} from "./chunk-3L2F566G.mjs";
 export {
+  AppShell,
+  AppShellAside,
+  AppShellHeader,
+  AppShellMain,
+  AppShellPanelContent,
+  AppShellRoot,
   Sidebar,
   SidebarContent,
   SidebarFooter,
@@ -41,5 +80,21 @@ export {
   SidebarRoot,
   SidebarSeparator,
   SidebarTrigger,
-  useSidebar
+  SidebarV2,
+  SidebarV2FromConfig,
+  SidebarV2Inset,
+  SidebarV2Panel,
+  SidebarV2PanelGroup,
+  SidebarV2PanelItems,
+  SidebarV2PanelLabel,
+  SidebarV2PanelLeaf,
+  SidebarV2Provider,
+  SidebarV2Rail,
+  SidebarV2RailItem,
+  SidebarV2RailLink,
+  SidebarV2RailSpacer,
+  SidebarV2Trigger,
+  SidebarV2Workspace,
+  useSidebar,
+  useSidebarV2
 };

package/dist/v2/app-shell.d.mts

@@ -0,0 +1,43 @@
+import * as react from 'react';
+import { ComponentProps, ReactNode } from 'react';
+import * as react_jsx_runtime from 'react/jsx-runtime';
+
+/**
+ * AppShell — the layout owner: a CSS grid with named zones.
+ *
+ *   ┌──────────────────────────────────────┐
+ *   │                Header                 │   (full width)
+ *   ├──────┬────────┬───────────────┬───────┤
+ *   │ rail │ panel  │     main      │ aside │
+ *   └──────┴────────┴───────────────┴───────┘
+ *
+ * Rail + panel content come from <SidebarV2.FromConfig> (or primitives), which
+ * place themselves into the `rail` / `panel` grid areas. Must be used inside
+ * <SidebarV2> (the context provider).
+ */
+declare function AppShellRoot({ className, style, children, ...props }: ComponentProps<"div">): react_jsx_runtime.JSX.Element;
+declare function AppShellHeader({ className, style, ...props }: ComponentProps<"header">): react_jsx_runtime.JSX.Element;
+declare function AppShellMain({ className, style, ...props }: ComponentProps<"main">): react_jsx_runtime.JSX.Element;
+declare function AppShellAside({ className, style, ...props }: ComponentProps<"aside">): react_jsx_runtime.JSX.Element;
+type AppShellPanelContentProps = {
+    children: ReactNode;
+};
+/**
+ * Render arbitrary content into the shell's panel zone from any page/sub-layout
+ * (e.g. an LLM "Threats" panel). While mounted it overrides the nav panel.
+ *
+ * @example
+ * // app/(demo)/threats/page.tsx
+ * <AppShell.PanelContent>
+ *   <SidebarV2.Panel title="Threats">{…}</SidebarV2.Panel>
+ * </AppShell.PanelContent>
+ */
+declare function AppShellPanelContent({ children }: AppShellPanelContentProps): react.ReactPortal | null;
+declare const AppShell: typeof AppShellRoot & {
+    Header: typeof AppShellHeader;
+    Main: typeof AppShellMain;
+    Aside: typeof AppShellAside;
+    PanelContent: typeof AppShellPanelContent;
+};
+
+export { AppShell, AppShellAside, AppShellHeader, AppShellMain, AppShellPanelContent, type AppShellPanelContentProps, AppShellRoot };

package/dist/v2/app-shell.d.ts

@@ -0,0 +1,43 @@
+import * as react from 'react';
+import { ComponentProps, ReactNode } from 'react';
+import * as react_jsx_runtime from 'react/jsx-runtime';
+
+/**
+ * AppShell — the layout owner: a CSS grid with named zones.
+ *
+ *   ┌──────────────────────────────────────┐
+ *   │                Header                 │   (full width)
+ *   ├──────┬────────┬───────────────┬───────┤
+ *   │ rail │ panel  │     main      │ aside │
+ *   └──────┴────────┴───────────────┴───────┘
+ *
+ * Rail + panel content come from <SidebarV2.FromConfig> (or primitives), which
+ * place themselves into the `rail` / `panel` grid areas. Must be used inside
+ * <SidebarV2> (the context provider).
+ */
+declare function AppShellRoot({ className, style, children, ...props }: ComponentProps<"div">): react_jsx_runtime.JSX.Element;
+declare function AppShellHeader({ className, style, ...props }: ComponentProps<"header">): react_jsx_runtime.JSX.Element;
+declare function AppShellMain({ className, style, ...props }: ComponentProps<"main">): react_jsx_runtime.JSX.Element;
+declare function AppShellAside({ className, style, ...props }: ComponentProps<"aside">): react_jsx_runtime.JSX.Element;
+type AppShellPanelContentProps = {
+    children: ReactNode;
+};
+/**
+ * Render arbitrary content into the shell's panel zone from any page/sub-layout
+ * (e.g. an LLM "Threats" panel). While mounted it overrides the nav panel.
+ *
+ * @example
+ * // app/(demo)/threats/page.tsx
+ * <AppShell.PanelContent>
+ *   <SidebarV2.Panel title="Threats">{…}</SidebarV2.Panel>
+ * </AppShell.PanelContent>
+ */
+declare function AppShellPanelContent({ children }: AppShellPanelContentProps): react.ReactPortal | null;
+declare const AppShell: typeof AppShellRoot & {
+    Header: typeof AppShellHeader;
+    Main: typeof AppShellMain;
+    Aside: typeof AppShellAside;
+    PanelContent: typeof AppShellPanelContent;
+};
+
+export { AppShell, AppShellAside, AppShellHeader, AppShellMain, AppShellPanelContent, type AppShellPanelContentProps, AppShellRoot };

package/dist/v2/app-shell.js

@@ -0,0 +1,147 @@
+"use client";
+"use strict";
+"use client";
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __export = (target, all) => {
+  for (var name in all)
+    __defProp(target, name, { get: all[name], enumerable: true });
+};
+var __copyProps = (to, from, except, desc) => {
+  if (from && typeof from === "object" || typeof from === "function") {
+    for (let key of __getOwnPropNames(from))
+      if (!__hasOwnProp.call(to, key) && key !== except)
+        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
+  }
+  return to;
+};
+var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
+
+// src/v2/app-shell.tsx
+var app_shell_exports = {};
+__export(app_shell_exports, {
+  AppShell: () => AppShell,
+  AppShellAside: () => AppShellAside,
+  AppShellHeader: () => AppShellHeader,
+  AppShellMain: () => AppShellMain,
+  AppShellPanelContent: () => AppShellPanelContent,
+  AppShellRoot: () => AppShellRoot
+});
+module.exports = __toCommonJS(app_shell_exports);
+var import_shared_utils = require("@kopexa/shared-utils");
+var import_react2 = require("react");
+var import_react_dom = require("react-dom");
+
+// src/v2/context.tsx
+var import_react_utils = require("@kopexa/react-utils");
+var import_tooltip = require("@kopexa/tooltip");
+var import_use_is_mobile = require("@kopexa/use-is-mobile");
+var import_react = require("react");
+var import_jsx_runtime = require("react/jsx-runtime");
+var PIN_COOKIE_MAX_AGE = 60 * 60 * 24 * 7;
+var [Provider, useSidebarV2] = (0, import_react_utils.createContext)({
+  name: "SidebarV2Context",
+  errorMessage: "useSidebarV2 must be used within <SidebarV2> (the provider component)."
+});
+
+// src/v2/app-shell.tsx
+var import_jsx_runtime2 = require("react/jsx-runtime");
+var RAIL_WIDTH = "4rem";
+var PANEL_WIDTH = "15rem";
+function AppShellRoot({
+  className,
+  style,
+  children,
+  ...props
+}) {
+  const { tone } = useSidebarV2();
+  return /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
+    "div",
+    {
+      "data-slot": "app-shell",
+      "data-tone": tone,
+      className: (0, import_shared_utils.cn)(
+        "relative isolate grid h-svh w-full overflow-hidden antialiased",
+        tone === "light" ? "bg-muted text-foreground" : "bg-sidebar text-sidebar-foreground",
+        className
+      ),
+      style: {
+        "--kpx-rail-width": RAIL_WIDTH,
+        "--kpx-panel-width": PANEL_WIDTH,
+        gridTemplateAreas: '"header header header header" "rail panel main aside"',
+        gridTemplateRows: "auto 1fr",
+        gridTemplateColumns: "auto auto 1fr auto",
+        ...style
+      },
+      ...props,
+      children
+    }
+  );
+}
+function AppShellHeader({
+  className,
+  style,
+  ...props
+}) {
+  return /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
+    "header",
+    {
+      "data-slot": "app-shell-header",
+      className: (0, import_shared_utils.cn)("z-20 flex h-14 items-center gap-3 px-2", className),
+      style: { gridArea: "header", ...style },
+      ...props
+    }
+  );
+}
+function AppShellMain({ className, style, ...props }) {
+  return /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
+    "main",
+    {
+      "data-slot": "app-shell-main",
+      className: (0, import_shared_utils.cn)(
+        "relative flex min-h-0 min-w-0 flex-col overflow-hidden bg-background",
+        "m-2 rounded-xl shadow-sm",
+        className
+      ),
+      style: { gridArea: "main", ...style },
+      ...props
+    }
+  );
+}
+function AppShellAside({
+  className,
+  style,
+  ...props
+}) {
+  return /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
+    "aside",
+    {
+      "data-slot": "app-shell-aside",
+      className: (0, import_shared_utils.cn)("min-h-0 min-w-0 overflow-hidden", className),
+      style: { gridArea: "aside", ...style },
+      ...props
+    }
+  );
+}
+function AppShellPanelContent({ children }) {
+  const { panelHost, registerPanelOverride, navPreviewActive } = useSidebarV2();
+  (0, import_react2.useEffect)(() => registerPanelOverride(), [registerPanelOverride]);
+  if (!panelHost || navPreviewActive) return null;
+  return (0, import_react_dom.createPortal)(children, panelHost);
+}
+var AppShell = AppShellRoot;
+AppShell.Header = AppShellHeader;
+AppShell.Main = AppShellMain;
+AppShell.Aside = AppShellAside;
+AppShell.PanelContent = AppShellPanelContent;
+// Annotate the CommonJS export names for ESM import in node:
+0 && (module.exports = {
+  AppShell,
+  AppShellAside,
+  AppShellHeader,
+  AppShellMain,
+  AppShellPanelContent,
+  AppShellRoot
+});

package/dist/v2/app-shell.mjs

@@ -0,0 +1,19 @@
+"use client";
+"use client";
+import {
+  AppShell,
+  AppShellAside,
+  AppShellHeader,
+  AppShellMain,
+  AppShellPanelContent,
+  AppShellRoot
+} from "../chunk-PZFEB2PM.mjs";
+import "../chunk-3L2F566G.mjs";
+export {
+  AppShell,
+  AppShellAside,
+  AppShellHeader,
+  AppShellMain,
+  AppShellPanelContent,
+  AppShellRoot
+};

package/dist/v2/components.d.mts

@@ -0,0 +1,78 @@
+import * as react from 'react';
+import { ComponentProps, ReactNode } from 'react';
+import * as react_jsx_runtime from 'react/jsx-runtime';
+import { IconButton } from '@kopexa/button';
+import { SidebarV2Icon, SidebarV2PanelItem } from './types.mjs';
+
+declare function SidebarV2Inset({ className, ...props }: ComponentProps<"main">): react_jsx_runtime.JSX.Element;
+declare function SidebarV2Rail({ className, ...props }: ComponentProps<"nav">): react_jsx_runtime.JSX.Element;
+declare function SidebarV2RailSpacer(): react_jsx_runtime.JSX.Element;
+type SidebarV2WorkspaceProps = ComponentProps<"button"> & {
+    /** Workspace display name, e.g. "Webinar". */
+    name: string;
+    /** Secondary line, e.g. "Administrator". */
+    role?: string;
+    /** Custom logo node. Defaults to the workspace initial. */
+    logo?: ReactNode;
+    /**
+     * "rail" = compact icon tile for the dark rail (default).
+     * "bar" = horizontal logo + name/role for a light header/topbar.
+     */
+    appearance?: "rail" | "bar";
+};
+/**
+ * Workspace switcher trigger. Compose it with a DropdownMenu (asChild):
+ *
+ * @example
+ * <DropdownMenu.Trigger asChild>
+ *   <SidebarV2.Workspace appearance="bar" name="Webinar" role="Administrator" />
+ * </DropdownMenu.Trigger>
+ */
+declare const SidebarV2Workspace: react.ForwardRefExoticComponent<Omit<SidebarV2WorkspaceProps, "ref"> & react.RefAttributes<HTMLButtonElement>>;
+declare function SidebarV2RailLink({ icon, label, href, badge, }: {
+    icon: SidebarV2Icon;
+    label: string;
+    href: string;
+    badge?: number | string;
+}): react_jsx_runtime.JSX.Element;
+declare function SidebarV2RailItem({ icon, label, active, hasPanel, onClick, onMouseEnter, onMouseLeave, badge, }: {
+    icon: SidebarV2Icon;
+    label: string;
+    active: boolean;
+    hasPanel?: boolean;
+    onClick?: () => void;
+    onMouseEnter?: () => void;
+    onMouseLeave?: () => void;
+    badge?: number | string;
+}): react_jsx_runtime.JSX.Element;
+declare function SidebarV2Panel({ title, subtitle, floating, hidePin, action, children, className, }: {
+    title?: string;
+    subtitle?: string;
+    floating?: boolean;
+    /** Hide the pin toggle — useful for page-supplied panels (no nav semantics). */
+    hidePin?: boolean;
+    /** Optional header action node, shown in place of the pin toggle. */
+    action?: ReactNode;
+    children: ReactNode;
+    className?: string;
+}): react_jsx_runtime.JSX.Element;
+/** Static section label inside a panel (non-collapsible group heading). */
+declare function SidebarV2PanelLabel({ className, ...props }: ComponentProps<"div">): react_jsx_runtime.JSX.Element;
+declare function SidebarV2PanelLeaf({ item, active: activeProp, }: {
+    item: Extract<SidebarV2PanelItem, {
+        href: string;
+    }>;
+    /** Override the derived active state (e.g. for custom page routing rules). */
+    active?: boolean;
+}): react_jsx_runtime.JSX.Element;
+declare function SidebarV2PanelGroup({ item, }: {
+    item: Extract<SidebarV2PanelItem, {
+        children: unknown;
+    }>;
+}): react_jsx_runtime.JSX.Element;
+declare function SidebarV2PanelItems({ items, }: {
+    items: SidebarV2PanelItem[];
+}): react_jsx_runtime.JSX.Element;
+declare function SidebarV2Trigger({ className, ...props }: Omit<ComponentProps<typeof IconButton>, "aria-label">): react_jsx_runtime.JSX.Element;
+
+export { SidebarV2Inset, SidebarV2Panel, SidebarV2PanelGroup, SidebarV2PanelItems, SidebarV2PanelLabel, SidebarV2PanelLeaf, SidebarV2Rail, SidebarV2RailItem, SidebarV2RailLink, SidebarV2RailSpacer, SidebarV2Trigger, SidebarV2Workspace, type SidebarV2WorkspaceProps };

package/dist/v2/components.d.ts

@@ -0,0 +1,78 @@
+import * as react from 'react';
+import { ComponentProps, ReactNode } from 'react';
+import * as react_jsx_runtime from 'react/jsx-runtime';
+import { IconButton } from '@kopexa/button';
+import { SidebarV2Icon, SidebarV2PanelItem } from './types.js';
+
+declare function SidebarV2Inset({ className, ...props }: ComponentProps<"main">): react_jsx_runtime.JSX.Element;
+declare function SidebarV2Rail({ className, ...props }: ComponentProps<"nav">): react_jsx_runtime.JSX.Element;
+declare function SidebarV2RailSpacer(): react_jsx_runtime.JSX.Element;
+type SidebarV2WorkspaceProps = ComponentProps<"button"> & {
+    /** Workspace display name, e.g. "Webinar". */
+    name: string;
+    /** Secondary line, e.g. "Administrator". */
+    role?: string;
+    /** Custom logo node. Defaults to the workspace initial. */
+    logo?: ReactNode;
+    /**
+     * "rail" = compact icon tile for the dark rail (default).
+     * "bar" = horizontal logo + name/role for a light header/topbar.
+     */
+    appearance?: "rail" | "bar";
+};
+/**
+ * Workspace switcher trigger. Compose it with a DropdownMenu (asChild):
+ *
+ * @example
+ * <DropdownMenu.Trigger asChild>
+ *   <SidebarV2.Workspace appearance="bar" name="Webinar" role="Administrator" />
+ * </DropdownMenu.Trigger>
+ */
+declare const SidebarV2Workspace: react.ForwardRefExoticComponent<Omit<SidebarV2WorkspaceProps, "ref"> & react.RefAttributes<HTMLButtonElement>>;
+declare function SidebarV2RailLink({ icon, label, href, badge, }: {
+    icon: SidebarV2Icon;
+    label: string;
+    href: string;
+    badge?: number | string;
+}): react_jsx_runtime.JSX.Element;
+declare function SidebarV2RailItem({ icon, label, active, hasPanel, onClick, onMouseEnter, onMouseLeave, badge, }: {
+    icon: SidebarV2Icon;
+    label: string;
+    active: boolean;
+    hasPanel?: boolean;
+    onClick?: () => void;
+    onMouseEnter?: () => void;
+    onMouseLeave?: () => void;
+    badge?: number | string;
+}): react_jsx_runtime.JSX.Element;
+declare function SidebarV2Panel({ title, subtitle, floating, hidePin, action, children, className, }: {
+    title?: string;
+    subtitle?: string;
+    floating?: boolean;
+    /** Hide the pin toggle — useful for page-supplied panels (no nav semantics). */
+    hidePin?: boolean;
+    /** Optional header action node, shown in place of the pin toggle. */
+    action?: ReactNode;
+    children: ReactNode;
+    className?: string;
+}): react_jsx_runtime.JSX.Element;
+/** Static section label inside a panel (non-collapsible group heading). */
+declare function SidebarV2PanelLabel({ className, ...props }: ComponentProps<"div">): react_jsx_runtime.JSX.Element;
+declare function SidebarV2PanelLeaf({ item, active: activeProp, }: {
+    item: Extract<SidebarV2PanelItem, {
+        href: string;
+    }>;
+    /** Override the derived active state (e.g. for custom page routing rules). */
+    active?: boolean;
+}): react_jsx_runtime.JSX.Element;
+declare function SidebarV2PanelGroup({ item, }: {
+    item: Extract<SidebarV2PanelItem, {
+        children: unknown;
+    }>;
+}): react_jsx_runtime.JSX.Element;
+declare function SidebarV2PanelItems({ items, }: {
+    items: SidebarV2PanelItem[];
+}): react_jsx_runtime.JSX.Element;
+declare function SidebarV2Trigger({ className, ...props }: Omit<ComponentProps<typeof IconButton>, "aria-label">): react_jsx_runtime.JSX.Element;
+
+export { SidebarV2Inset, SidebarV2Panel, SidebarV2PanelGroup, SidebarV2PanelItems, SidebarV2PanelLabel, SidebarV2PanelLeaf, SidebarV2Rail, SidebarV2RailItem, SidebarV2RailLink, SidebarV2RailSpacer, SidebarV2Trigger, SidebarV2Workspace, type SidebarV2WorkspaceProps };