@nexub/patterns 1.4.0 → 1.5.1

package/dist/chunk-TLOLIMPY.js

@@ -0,0 +1,60 @@
+'use client';
+
+// src/components/ListDetail/ListDetail.tsx
+import * as React from "react";
+import { IconButton, cn } from "@nexub/react";
+import { ArrowLeft } from "@nexub/icons";
+import { jsx, jsxs } from "react/jsx-runtime";
+var widths = {
+  sm: "[@container(min-width:720px)]:w-72",
+  md: "[@container(min-width:720px)]:w-80",
+  lg: "[@container(min-width:720px)]:w-[400px]"
+};
+var ListDetail = React.forwardRef(
+  ({
+    list,
+    detail,
+    showDetail = false,
+    onBack,
+    backLabel = "Back",
+    listWidth = "md",
+    listLabel = "List",
+    detailLabel = "Detail",
+    className,
+    ...props
+  }, ref) => /* @__PURE__ */ jsx("div", { ref, className: cn("h-full [container-type:inline-size]", className), ...props, children: /* @__PURE__ */ jsxs("div", { className: "flex h-full", children: [
+    /* @__PURE__ */ jsx(
+      "section",
+      {
+        "aria-label": listLabel,
+        className: cn(
+          "min-h-0 w-full shrink-0 flex-col overflow-y-auto",
+          "[@container(min-width:720px)]:flex [@container(min-width:720px)]:border-r [@container(min-width:720px)]:border-[var(--color-outline-variant)]",
+          widths[listWidth],
+          showDetail ? "hidden" : "flex"
+        ),
+        children: list
+      }
+    ),
+    /* @__PURE__ */ jsxs(
+      "section",
+      {
+        "aria-label": detailLabel,
+        className: cn(
+          "min-h-0 min-w-0 flex-1 flex-col overflow-y-auto",
+          "[@container(min-width:720px)]:flex",
+          showDetail ? "flex" : "hidden"
+        ),
+        children: [
+          onBack && /* @__PURE__ */ jsx("div", { className: "p-2 [@container(min-width:720px)]:hidden", children: /* @__PURE__ */ jsx(IconButton, { label: backLabel, onClick: onBack, children: /* @__PURE__ */ jsx(ArrowLeft, { size: "md", "aria-hidden": "true" }) }) }),
+          detail
+        ]
+      }
+    )
+  ] }) })
+);
+ListDetail.displayName = "ListDetail";
+
+export {
+  ListDetail
+};

package/dist/components/ListDetail/index.js

@@ -0,0 +1,7 @@
+'use client';
+import {
+  ListDetail
+} from "../../chunk-TLOLIMPY.js";
+export {
+  ListDetail
+};

package/dist/index.d.ts

@@ -83,6 +83,31 @@ declare const InfoList: {
     };
 };
 
+interface ListDetailProps extends Omit<React.HTMLAttributes<HTMLDivElement>, 'children'> {
+    list: React.ReactNode;
+    detail: React.ReactNode;
+    /**
+     * When narrow (one pane at a time), show the detail instead of the list.
+     * Set it when an item is selected. Ignored when both panes fit.
+     */
+    showDetail?: boolean;
+    /** Called by the back button, shown only when narrow. Omit to hide it. */
+    onBack?: () => void;
+    /** @default 'Back' */
+    backLabel?: string;
+    /** Fixed list width when both panes show. @default 'md' (320px) */
+    listWidth?: 'sm' | 'md' | 'lg';
+    /** Accessible names for the two regions. */
+    listLabel?: string;
+    detailLabel?: string;
+}
+/**
+ * The M3 list-detail canonical layout. It responds to its *own* width via a
+ * container query, not the viewport: at 720px and up the list (fixed width)
+ * and detail sit side by side; below that one pane shows at a time.
+ */
+declare const ListDetail: React.ForwardRefExoticComponent<ListDetailProps & React.RefAttributes<HTMLDivElement>>;
+
 interface PlanCardProps extends React.HTMLAttributes<HTMLDivElement> {
     name: string;
     price: string;
@@ -246,4 +271,4 @@ interface AppHeaderProps extends Omit<React.HTMLAttributes<HTMLElement>, 'childr
  */
 declare const AppHeader: React.ForwardRefExoticComponent<AppHeaderProps & React.RefAttributes<HTMLElement>>;
 
-export { ActivityFeed, type ActivityItemProps, AppHeader, type AppHeaderOrg, type AppHeaderProps, type AppHeaderSearchGroup, type AppHeaderSearchItem, type AppHeaderUser, AppLauncher, type AppLauncherApp, type AppLauncherProps, AuthCard, type AuthCardProps, FilterBar, type FilterBarProps, InfoList, type InfoListItemProps, type InfoListRootProps, NotificationItem, type NotificationItemProps, PlanCard, type PlanCardProps, SettingsLayout, type SettingsLayoutItem, type SettingsLayoutProps, type SettingsLayoutSectionProps, SettingsRow, type SettingsRowProps, SettingsSection, type SettingsSectionProps, StatCard, type StatCardProps, StepIndicator, type StepIndicatorProps, type StepIndicatorStep, UserCard, type UserCardProps };
+export { ActivityFeed, type ActivityItemProps, AppHeader, type AppHeaderOrg, type AppHeaderProps, type AppHeaderSearchGroup, type AppHeaderSearchItem, type AppHeaderUser, AppLauncher, type AppLauncherApp, type AppLauncherProps, AuthCard, type AuthCardProps, FilterBar, type FilterBarProps, InfoList, type InfoListItemProps, type InfoListRootProps, ListDetail, type ListDetailProps, NotificationItem, type NotificationItemProps, PlanCard, type PlanCardProps, SettingsLayout, type SettingsLayoutItem, type SettingsLayoutProps, type SettingsLayoutSectionProps, SettingsRow, type SettingsRowProps, SettingsSection, type SettingsSectionProps, StatCard, type StatCardProps, StepIndicator, type StepIndicatorProps, type StepIndicatorStep, UserCard, type UserCardProps };

package/dist/index.js

@@ -1,11 +1,14 @@
 'use client';
 import {
-  SettingsLayout,
-  SettingsRow
-} from "./chunk-5QFC4WFD.js";
+  NotificationItem
+} from "./chunk-Y3TNGDKC.js";
 import {
   PlanCard
 } from "./chunk-QMYBXQG4.js";
+import {
+  SettingsLayout,
+  SettingsRow
+} from "./chunk-5QFC4WFD.js";
 import {
   SettingsSection
 } from "./chunk-OTNHVOPC.js";
@@ -38,8 +41,8 @@ import {
   InfoList
 } from "./chunk-74JVLMLE.js";
 import {
-  NotificationItem
-} from "./chunk-Y3TNGDKC.js";
+  ListDetail
+} from "./chunk-TLOLIMPY.js";
 export {
   ActivityFeed,
   AppHeader,
@@ -47,6 +50,7 @@ export {
   AuthCard,
   FilterBar,
   InfoList,
+  ListDetail,
   NotificationItem,
   PlanCard,
   SettingsLayout,

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@nexub/patterns",
-  "version": "1.4.0",
+  "version": "1.5.1",
   "description": "Composite UI patterns for Nexub Design System — pre-built, production-ready layouts and widgets built on @nexub/react.",
   "type": "module",
   "license": "MIT",
@@ -36,9 +36,9 @@
   "peerDependencies": {
     "react": ">=18 <20",
     "react-dom": ">=18 <20",
-    "@nexub/react": "^1.4.0",
-    "@nexub/icons": "^1.4.0",
-    "@nexub/tokens": "^1.4.0"
+    "@nexub/react": "^1.5.1",
+    "@nexub/icons": "^1.5.1",
+    "@nexub/tokens": "^1.5.1"
   },
   "peerDependenciesMeta": {
     "@nexub/icons": {
@@ -58,9 +58,9 @@
     "tsup": "^8.3.5",
     "typescript": "^5.6.3",
     "vitest": "^2.1.8",
-    "@nexub/icons": "1.4.0",
-    "@nexub/react": "1.4.0",
-    "@nexub/tokens": "1.4.0"
+    "@nexub/icons": "1.5.1",
+    "@nexub/react": "1.5.1",
+    "@nexub/tokens": "1.5.1"
   },
   "scripts": {
     "build": "tsup",