@neasg/design-system 0.4.7 → 0.4.9

package/dist/label-value.js

@@ -13,9 +13,11 @@ export function isEmptyValue(value) {
 }
 function LabelValue({ label, value, className, labelClassName, hideIfEmpty = false, hideLabel = false, loading = false, required = false, }) {
     const empty = isEmptyValue(value);
+    const hasPrimitiveValue = typeof value === "string" || typeof value === "number";
+    const hasRichValue = !empty && !hasPrimitiveValue;
     if (!loading && hideIfEmpty && empty) {
         return null;
     }
-    return (_jsxs("div", { className: cn("min-w-0 h-full space-y-1", className), children: [!hideLabel && (loading ? (_jsx(Skeleton, { className: "h-3.5 w-20" })) : (_jsxs(Typography, { as: "p", variant: "label", className: cn("leading-tight", labelClassName), children: [label, required ? (_jsx("span", { "aria-hidden": "true", className: "ml-0.5 text-destructive", children: "*" })) : null] }))), loading ? (_jsx(Skeleton, { className: "h-4 w-32" })) : (_jsx("div", { className: cn("min-w-0 break-words text-sm text-foreground", empty && "italic text-muted-foreground/60"), children: empty ? "-" : value }))] }));
+    return (_jsxs("div", { className: cn("min-w-0 h-full", hasRichValue ? "space-y-2" : "space-y-1", className), children: [!hideLabel && (loading ? (_jsx(Skeleton, { className: "h-3.5 w-20" })) : (_jsxs(Typography, { as: "p", variant: "label", color: "muted", className: labelClassName, children: [label, required ? (_jsx("span", { "aria-hidden": "true", className: "ml-0.5 text-destructive", children: "*" })) : null] }))), loading ? (_jsx(Skeleton, { className: "h-4 w-32" })) : (_jsx(Typography, { as: "div", variant: "bodySm", className: cn("min-w-0 max-w-full break-words [overflow-wrap:anywhere]", hasRichValue && "[&>*]:min-w-0 [&>*]:max-w-full", !empty && hasPrimitiveValue && "font-medium", empty && "italic text-muted-foreground/60"), children: empty ? "-" : value }))] }));
 }
 export { LabelValue };

package/dist/layout-right-panel-edge.d.ts

@@ -0,0 +1,6 @@
+declare const rightPanelEdgeClassName = "border-l";
+declare const rightPanelEdgeOpenClassName = "border-[hsl(var(--layout-right-panel-border))] shadow-[var(--layout-right-panel-shadow)]";
+declare const rightPanelEdgeClosedClassName = "border-transparent shadow-none";
+declare const rightPanelEdgeDividerClassName = "bg-[hsl(var(--layout-right-panel-border)/0.55)]";
+declare const rightPanelResizeHandleSurfaceClassName = "border-[hsl(var(--layout-right-panel-border))] bg-[hsl(var(--layout-right-panel-background))]";
+export { rightPanelEdgeClassName, rightPanelEdgeClosedClassName, rightPanelEdgeDividerClassName, rightPanelEdgeOpenClassName, rightPanelResizeHandleSurfaceClassName, };

package/dist/layout-right-panel-edge.js

@@ -0,0 +1,6 @@
+const rightPanelEdgeClassName = "border-l";
+const rightPanelEdgeOpenClassName = "border-[hsl(var(--layout-right-panel-border))] shadow-[var(--layout-right-panel-shadow)]";
+const rightPanelEdgeClosedClassName = "border-transparent shadow-none";
+const rightPanelEdgeDividerClassName = "bg-[hsl(var(--layout-right-panel-border)/0.55)]";
+const rightPanelResizeHandleSurfaceClassName = "border-[hsl(var(--layout-right-panel-border))] bg-[hsl(var(--layout-right-panel-background))]";
+export { rightPanelEdgeClassName, rightPanelEdgeClosedClassName, rightPanelEdgeDividerClassName, rightPanelEdgeOpenClassName, rightPanelResizeHandleSurfaceClassName, };

package/dist/layout.d.ts

@@ -1,11 +1,16 @@
 import * as React from "react";
+import { type AvatarProfileProps } from "./avatar";
 import { type CountBadgeProps } from "./count-badge";
+import { type TabsProps } from "./tabs";
+export type DashboardRightPanelMode = "responsive" | "persistent";
 type SidebarContextType = {
     isCollapsed: boolean;
     toggle: () => void;
+    collapse: () => void;
 };
-export declare function SidebarProvider({ children }: {
+export declare function SidebarProvider({ children, defaultCollapsed, }: {
     children: React.ReactNode;
+    defaultCollapsed?: boolean;
 }): import("react/jsx-runtime").JSX.Element;
 export declare function useSidebar(): SidebarContextType;
 export interface DashboardLayoutProps extends React.HTMLAttributes<HTMLDivElement> {
@@ -13,12 +18,35 @@ export interface DashboardLayoutProps extends React.HTMLAttributes<HTMLDivElemen
     prototypeBanner?: React.ReactNode;
     /** Sidebar element, typically a <DashboardSidebar />. */
     sidebar?: React.ReactNode;
+    /** Optional contextual column rendered inside the right side of the workspace surface. */
+    rightPanel?: React.ReactNode;
     /** Class names applied to the inner content surface (the rounded card around children). */
     surfaceClassName?: string;
     /** Class names applied to the content `<main>` wrapper. */
     contentClassName?: string;
+    /** Class names applied to the optional right panel column. */
+    rightPanelClassName?: string;
+    /** Floating trigger shown below the desktop right-panel breakpoint. */
+    rightPanelFallbackTrigger?: React.ReactNode;
+    /** Right panel rendering strategy. `persistent` keeps the panel in the workspace grid. */
+    rightPanelMode?: DashboardRightPanelMode;
+    /** Allows users to drag-resize a persistent right panel. */
+    rightPanelResizable?: boolean;
+    /** Initial persistent right panel width in pixels when resizing is enabled. */
+    rightPanelDefaultWidth?: number;
+    /** Minimum persistent right panel width in pixels when resizing is enabled. */
+    rightPanelMinWidth?: number;
+    /** Maximum persistent right panel width in pixels when resizing is enabled. */
+    rightPanelMaxWidth?: number;
+    /**
+     * Collapses the sidebar when a right panel opens below this viewport width.
+     * Set to `false` to opt out.
+     */
+    rightPanelAutoCollapseSidebarBreakpoint?: number | false;
+    /** Initial sidebar state on desktop before the user toggles it. */
+    defaultSidebarCollapsed?: boolean;
 }
-declare function DashboardLayout({ className, masthead, prototypeBanner, sidebar, surfaceClassName, contentClassName, children, style, ...props }: DashboardLayoutProps): import("react/jsx-runtime").JSX.Element;
+declare function DashboardLayout({ className, masthead, prototypeBanner, sidebar, rightPanel, surfaceClassName, contentClassName, rightPanelClassName, rightPanelFallbackTrigger, rightPanelMode, rightPanelResizable, rightPanelDefaultWidth, rightPanelMinWidth, rightPanelMaxWidth, rightPanelAutoCollapseSidebarBreakpoint, defaultSidebarCollapsed, children, style, ...props }: DashboardLayoutProps): import("react/jsx-runtime").JSX.Element;
 export interface DashboardSidebarProps extends React.HTMLAttributes<HTMLElement> {
     logo?: React.ReactNode | ((context: {
         isCollapsed: boolean;
@@ -39,7 +67,6 @@ interface DashboardSidebarNavItemBase {
     icon?: React.ElementType;
     active?: boolean;
     disabled?: boolean;
-    wip?: boolean;
     badgeCount?: number;
     badgeVariant?: CountBadgeProps["variant"];
     badgePulse?: boolean;
@@ -72,9 +99,54 @@ export interface DashboardSidebarNavGroup {
     label?: string;
     items: DashboardSidebarNavItem[];
 }
+export interface DashboardSidebarProfileProps extends Omit<AvatarProfileProps, "className" | "avatarClassName" | "fallbackClassName" | "avatarOverlay" | "imageClassName" | "contentClassName" | "nameClassName" | "roleClassName" | "topInfoClassName" | "bottomInfoClassName" | "rolePlacement"> {
+    isCollapsed?: boolean;
+    rolePlacement?: "above" | "below";
+    status?: "online" | "busy" | "offline" | "none";
+}
+declare function DashboardSidebarProfile({ isCollapsed, status, name, role, rolePlacement, size, ...props }: DashboardSidebarProfileProps): import("react/jsx-runtime").JSX.Element;
 declare function DashboardSidebar({ className, children, logo, search, navGroups, footerItems, footer, toggleAriaLabel, ...props }: DashboardSidebarProps): import("react/jsx-runtime").JSX.Element;
 export interface DashboardContentProps extends React.HTMLAttributes<HTMLElement> {
+    hasSidebar?: boolean;
+    rightPanel?: React.ReactNode;
+    rightPanelClassName?: string;
+    rightPanelFallbackTrigger?: React.ReactNode;
+    rightPanelMode?: DashboardRightPanelMode;
+    rightPanelResizable?: boolean;
+    rightPanelDefaultWidth?: number;
+    rightPanelMinWidth?: number;
+    rightPanelMaxWidth?: number;
+    rightPanelAutoCollapseSidebarBreakpoint?: number | false;
     surfaceClassName?: string;
 }
-declare function DashboardContent({ className, surfaceClassName, children, ...props }: DashboardContentProps): import("react/jsx-runtime").JSX.Element;
-export { DashboardLayout, DashboardSidebar, DashboardContent };
+export interface DashboardRightPanelProps extends React.HTMLAttributes<HTMLDivElement> {
+}
+export interface DashboardRightPanelHeaderProps extends Omit<React.HTMLAttributes<HTMLDivElement>, "title"> {
+    title: React.ReactNode;
+    subtitle?: React.ReactNode;
+    badge?: React.ReactNode;
+    action?: React.ReactNode;
+}
+export interface DashboardRightPanelBodyProps extends React.HTMLAttributes<HTMLDivElement> {
+    /** Fixed footer content such as a composer or action bar. */
+    footer?: React.ReactNode;
+    /** Class names applied to the scrollable body content when `footer` is provided. */
+    contentClassName?: string;
+    /** Class names applied to the fixed footer wrapper. */
+    footerClassName?: string;
+}
+export interface DashboardRightPanelSectionProps extends Omit<React.HTMLAttributes<HTMLElement>, "title"> {
+    title?: React.ReactNode;
+    description?: React.ReactNode;
+    titleClassName?: string;
+    descriptionClassName?: string;
+}
+export interface DashboardRightPanelTabsProps extends TabsProps {
+}
+declare function DashboardRightPanelSection({ className, title, description, titleClassName, descriptionClassName, children, ...props }: DashboardRightPanelSectionProps): import("react/jsx-runtime").JSX.Element;
+declare function DashboardRightPanelTabs({ className, listWrapperClassName, panelClassName, ...props }: DashboardRightPanelTabsProps): import("react/jsx-runtime").JSX.Element;
+declare function DashboardRightPanel({ className, ...props }: DashboardRightPanelProps): import("react/jsx-runtime").JSX.Element;
+declare function DashboardRightPanelHeader({ className, title, subtitle, badge, action, children, ...props }: DashboardRightPanelHeaderProps): import("react/jsx-runtime").JSX.Element;
+declare function DashboardRightPanelBody({ className, contentClassName, footer, footerClassName, children, ...props }: DashboardRightPanelBodyProps): import("react/jsx-runtime").JSX.Element;
+declare function DashboardContent({ className, hasSidebar, rightPanel, rightPanelClassName, rightPanelFallbackTrigger, rightPanelMode, rightPanelResizable, rightPanelDefaultWidth, rightPanelMinWidth, rightPanelMaxWidth, rightPanelAutoCollapseSidebarBreakpoint, surfaceClassName, children, ...props }: DashboardContentProps): import("react/jsx-runtime").JSX.Element;
+export { DashboardLayout, DashboardSidebar, DashboardSidebarProfile, DashboardContent, DashboardRightPanel, DashboardRightPanelHeader, DashboardRightPanelBody, DashboardRightPanelSection, DashboardRightPanelTabs, };