@djangocfg/ui-nextjs 2.1.320 → 2.1.321

package/src/components/breadcrumb-navigation.tsx

@@ -1,130 +0,0 @@
-import { Link } from '@djangocfg/ui-core/components';
-import React from 'react';
-
-import {
-    Breadcrumb, BreadcrumbEllipsis, BreadcrumbItem, BreadcrumbLink, BreadcrumbList, BreadcrumbPage,
-    BreadcrumbSeparator
-} from './breadcrumb';
-
-export interface BreadcrumbItem {
-  label: string;
-  href?: string;
-  /**
-   * Force render as current page (non-interactive, aria-current="page").
-   * By default only the last item without href is treated as current page.
-   */
-  isCurrentPage?: boolean;
-  icon?: React.ReactNode;
-}
-
-export interface BreadcrumbNavigationProps {
-  items: BreadcrumbItem[];
-  separator?: React.ReactNode;
-  /**
-   * Max visible items (excluding the ellipsis slot) before collapsing.
-   * Must be >= 2. Defaults to 5.
-   */
-  maxItems?: number;
-  className?: string;
-}
-
-type DisplayEntry =
-  | { type: 'item'; item: BreadcrumbItem; originalIndex: number }
-  | { type: 'ellipsis' };
-
-export const BreadcrumbNavigation: React.FC<BreadcrumbNavigationProps> = ({
-  items,
-  separator,
-  maxItems = 5,
-  className,
-}) => {
-  if (!items || items.length === 0) return null;
-
-  const clampedMax = Math.max(2, maxItems);
-
-  // Build the list of entries to render
-  const entries: DisplayEntry[] = (() => {
-    if (items.length <= clampedMax) {
-      return items.map((item, i) => ({ type: 'item' as const, item, originalIndex: i }));
-    }
-    // Always show first item, ellipsis, then last (clampedMax - 2) items
-    // e.g. maxItems=4 → show 1 + ellipsis + 2 last = 4 visible items + ellipsis
-    const tailCount = Math.max(1, clampedMax - 2);
-    const tail = items.slice(-tailCount).map((item, i) => ({
-      type: 'item' as const,
-      item,
-      originalIndex: items.length - tailCount + i,
-    }));
-    return [
-      { type: 'item' as const, item: items[0]!, originalIndex: 0 },
-      { type: 'ellipsis' as const },
-      ...tail,
-    ];
-  })();
-
-  const resolveIsCurrentPage = (item: BreadcrumbItem, originalIndex: number): boolean => {
-    if (item.isCurrentPage !== undefined) return item.isCurrentPage;
-    return originalIndex === items.length - 1;
-  };
-
-  const renderItem = (item: BreadcrumbItem, originalIndex: number) => {
-    const current = resolveIsCurrentPage(item, originalIndex);
-
-    const content = (
-      <>
-        {item.icon && <span className="mr-1">{item.icon}</span>}
-        {item.label}
-      </>
-    );
-
-    if (current) {
-      return (
-        <BreadcrumbItem key={`item-${originalIndex}`}>
-          <BreadcrumbPage>{content}</BreadcrumbPage>
-        </BreadcrumbItem>
-      );
-    }
-
-    return (
-      <BreadcrumbItem key={`item-${originalIndex}`}>
-        {item.href ? (
-          <BreadcrumbLink asChild>
-            <Link href={item.href}>{content}</Link>
-          </BreadcrumbLink>
-        ) : (
-          <BreadcrumbLink>{content}</BreadcrumbLink>
-        )}
-      </BreadcrumbItem>
-    );
-  };
-
-  return (
-    <Breadcrumb className={className}>
-      <BreadcrumbList>
-        {entries.map((entry, displayIndex) => {
-          const isFirst = displayIndex === 0;
-
-          if (entry.type === 'ellipsis') {
-            return (
-              <React.Fragment key="ellipsis">
-                <BreadcrumbSeparator>{separator}</BreadcrumbSeparator>
-                <BreadcrumbItem>
-                  <BreadcrumbEllipsis />
-                </BreadcrumbItem>
-              </React.Fragment>
-            );
-          }
-
-          return (
-            <React.Fragment key={`fragment-${entry.originalIndex}`}>
-              {!isFirst && <BreadcrumbSeparator>{separator}</BreadcrumbSeparator>}
-              {renderItem(entry.item, entry.originalIndex)}
-            </React.Fragment>
-          );
-        })}
-      </BreadcrumbList>
-    </Breadcrumb>
-  );
-};
-
-BreadcrumbNavigation.displayName = 'BreadcrumbNavigation';

package/src/components/breadcrumb.tsx

@@ -1,133 +0,0 @@
-"use client"
-
-import { ChevronRight, MoreHorizontal } from 'lucide-react';
-import * as React from 'react';
-
-import { Link } from '@djangocfg/ui-core/components';
-import { cn } from '@djangocfg/ui-core/lib';
-import { Slot } from '@radix-ui/react-slot';
-
-const Breadcrumb = React.forwardRef<
-  HTMLElement,
-  React.ComponentPropsWithoutRef<"nav"> & {
-    separator?: React.ReactNode
-  }
->(({ ...props }, ref) => <nav ref={ref} aria-label="breadcrumb" {...props} />)
-Breadcrumb.displayName = "Breadcrumb"
-
-const BreadcrumbList = React.forwardRef<
-  HTMLOListElement,
-  React.ComponentPropsWithoutRef<"ol">
->(({ className, ...props }, ref) => (
-  <ol
-    ref={ref}
-    className={cn(
-      "flex flex-wrap items-center gap-1.5 break-words text-sm text-muted-foreground sm:gap-2.5",
-      className
-    )}
-    {...props}
-  />
-))
-BreadcrumbList.displayName = "BreadcrumbList"
-
-const BreadcrumbItem = React.forwardRef<
-  HTMLLIElement,
-  React.ComponentPropsWithoutRef<"li"> & { key?: React.Key }
->(({ className, ...props }, ref) => (
-  <li
-    ref={ref}
-    className={cn("inline-flex items-center gap-1.5", className)}
-    {...props}
-  />
-))
-BreadcrumbItem.displayName = "BreadcrumbItem"
-
-const BreadcrumbLink = React.forwardRef<
-  HTMLAnchorElement,
-  React.ComponentPropsWithoutRef<"a"> & {
-    asChild?: boolean
-    href?: string
-  }
->(({ asChild, className, href, children, ...props }, ref) => {
-  const Comp = asChild ? Slot : "a"
-
-  if (href) {
-    return (
-      <Link
-        href={href}
-        className={cn("transition-colors hover:text-foreground", className)}
-        ref={ref}
-      >
-        {children}
-      </Link>
-    )
-  }
-
-  return (
-    <Comp
-      ref={ref}
-      className={cn("transition-colors hover:text-foreground", className)}
-      {...props}
-    >
-      {children}
-    </Comp>
-  )
-})
-BreadcrumbLink.displayName = "BreadcrumbLink"
-
-const BreadcrumbPage = React.forwardRef<
-  HTMLSpanElement,
-  React.ComponentPropsWithoutRef<"span">
->(({ className, ...props }, ref) => (
-  <span
-    ref={ref}
-    role="link"
-    aria-disabled="true"
-    aria-current="page"
-    className={cn("font-normal text-foreground", className)}
-    {...props}
-  />
-))
-BreadcrumbPage.displayName = "BreadcrumbPage"
-
-const BreadcrumbSeparator = ({
-  children,
-  className,
-  ...props
-}: React.ComponentProps<"li"> & { key?: React.Key }) => (
-  <li
-    role="presentation"
-    aria-hidden="true"
-    className={cn("[&>svg]:w-3.5 [&>svg]:h-3.5", className)}
-    {...props}
-  >
-    {children ?? <ChevronRight />}
-  </li>
-)
-BreadcrumbSeparator.displayName = "BreadcrumbSeparator"
-
-const BreadcrumbEllipsis = ({
-  className,
-  ...props
-}: React.ComponentProps<"span">) => (
-  <span
-    role="presentation"
-    aria-hidden="true"
-    className={cn("flex h-9 w-9 items-center justify-center", className)}
-    {...props}
-  >
-    <MoreHorizontal className="h-4 w-4" />
-    <span className="sr-only">More</span>
-  </span>
-)
-BreadcrumbEllipsis.displayName = "BreadcrumbElipssis"
-
-export {
-  Breadcrumb,
-  BreadcrumbList,
-  BreadcrumbItem,
-  BreadcrumbLink,
-  BreadcrumbPage,
-  BreadcrumbSeparator,
-  BreadcrumbEllipsis,
-}

package/src/components/dropdown-menu.tsx

@@ -1,220 +0,0 @@
-"use client"
-
-import { Check, ChevronRight, Circle } from 'lucide-react';
-import * as React from 'react';
-
-import { Link } from '@djangocfg/ui-core/components';
-import { cn } from '@djangocfg/ui-core/lib';
-import * as DropdownMenuPrimitive from '@radix-ui/react-dropdown-menu';
-
-const DropdownMenu = DropdownMenuPrimitive.Root
-
-const DropdownMenuTrigger = DropdownMenuPrimitive.Trigger
-
-const DropdownMenuGroup = DropdownMenuPrimitive.Group
-
-const DropdownMenuPortal = DropdownMenuPrimitive.Portal
-
-const DropdownMenuSub = DropdownMenuPrimitive.Sub
-
-const DropdownMenuRadioGroup = DropdownMenuPrimitive.RadioGroup
-
-const DropdownMenuSubTrigger = React.forwardRef<
-  React.ElementRef<typeof DropdownMenuPrimitive.SubTrigger>,
-  React.ComponentPropsWithoutRef<typeof DropdownMenuPrimitive.SubTrigger> & {
-    inset?: boolean
-  }
->(({ className, inset, children, ...props }, ref) => (
-  <DropdownMenuPrimitive.SubTrigger
-    ref={ref}
-    className={cn(
-      "flex cursor-default select-none items-center gap-2 rounded-sm px-2 py-1.5 text-sm outline-none focus:bg-accent data-[state=open]:bg-accent [&_svg]:pointer-events-none [&_svg]:size-4 [&_svg]:shrink-0",
-      inset && "pl-8",
-      className
-    )}
-    {...props}
-  >
-    {children}
-    <ChevronRight className="ml-auto" />
-  </DropdownMenuPrimitive.SubTrigger>
-))
-DropdownMenuSubTrigger.displayName =
-  DropdownMenuPrimitive.SubTrigger.displayName
-
-const DropdownMenuSubContent = React.forwardRef<
-  React.ElementRef<typeof DropdownMenuPrimitive.SubContent>,
-  React.ComponentPropsWithoutRef<typeof DropdownMenuPrimitive.SubContent>
->(({ className, ...props }, ref) => (
-  <DropdownMenuPrimitive.SubContent
-    ref={ref}
-    className={cn(
-      "z-600 min-w-32 overflow-hidden rounded-sm border bg-popover backdrop-blur-xl p-1 text-popover-foreground shadow-sm data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2",
-      className
-    )}
-    {...props}
-  />
-))
-DropdownMenuSubContent.displayName =
-  DropdownMenuPrimitive.SubContent.displayName
-
-const DropdownMenuContent = React.forwardRef<
-  React.ElementRef<typeof DropdownMenuPrimitive.Content>,
-  React.ComponentPropsWithoutRef<typeof DropdownMenuPrimitive.Content>
->(({ className, sideOffset = 4, ...props }, ref) => (
-  <DropdownMenuPrimitive.Portal>
-    <DropdownMenuPrimitive.Content
-      ref={ref}
-      sideOffset={sideOffset}
-      className={cn(
-        "z-600 max-h-[var(--radix-dropdown-menu-content-available-height)] min-w-32 overflow-y-auto overflow-x-hidden rounded-sm border bg-popover backdrop-blur-xl p-1 text-popover-foreground shadow-sm",
-        "data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2",
-        className
-      )}
-      {...props}
-    />
-  </DropdownMenuPrimitive.Portal>
-))
-DropdownMenuContent.displayName = DropdownMenuPrimitive.Content.displayName
-
-const DropdownMenuItem = React.forwardRef<
-  React.ElementRef<typeof DropdownMenuPrimitive.Item>,
-  React.ComponentPropsWithoutRef<typeof DropdownMenuPrimitive.Item> & {
-    inset?: boolean
-    href?: string
-    key?: React.Key
-  }
->(({ className, inset, href, children, ...props }, ref) => {
-  const classes = cn(
-    "relative flex cursor-default select-none items-center gap-2 rounded-sm px-2 py-1.5 text-sm outline-none transition-colors focus:bg-accent focus:text-accent-foreground data-[disabled]:pointer-events-none data-[disabled]:opacity-50 [&>svg]:size-4 [&>svg]:shrink-0",
-    inset && "pl-8",
-    className
-  )
-
-  if (href) {
-    return (
-      <DropdownMenuPrimitive.Item asChild ref={ref} {...props}>
-        <Link href={href} className={classes}>
-          {children}
-        </Link>
-      </DropdownMenuPrimitive.Item>
-    )
-  }
-
-  return (
-    <DropdownMenuPrimitive.Item
-      ref={ref}
-      className={classes}
-      {...props}
-    >
-      {children}
-    </DropdownMenuPrimitive.Item>
-  )
-})
-DropdownMenuItem.displayName = DropdownMenuPrimitive.Item.displayName
-
-const DropdownMenuCheckboxItem = React.forwardRef<
-  React.ElementRef<typeof DropdownMenuPrimitive.CheckboxItem>,
-  React.ComponentPropsWithoutRef<typeof DropdownMenuPrimitive.CheckboxItem> & { key?: React.Key }
->(({ className, children, checked, ...props }, ref) => (
-  <DropdownMenuPrimitive.CheckboxItem
-    ref={ref}
-    className={cn(
-      "relative flex cursor-default select-none items-center rounded-sm py-1.5 pl-8 pr-2 text-sm outline-none transition-colors focus:bg-accent focus:text-accent-foreground data-[disabled]:pointer-events-none data-[disabled]:opacity-50",
-      className
-    )}
-    checked={checked}
-    {...props}
-  >
-    <span className="absolute left-2 flex h-3.5 w-3.5 items-center justify-center">
-      <DropdownMenuPrimitive.ItemIndicator>
-        <Check className="h-4 w-4" />
-      </DropdownMenuPrimitive.ItemIndicator>
-    </span>
-    {children}
-  </DropdownMenuPrimitive.CheckboxItem>
-))
-DropdownMenuCheckboxItem.displayName =
-  DropdownMenuPrimitive.CheckboxItem.displayName
-
-const DropdownMenuRadioItem = React.forwardRef<
-  React.ElementRef<typeof DropdownMenuPrimitive.RadioItem>,
-  React.ComponentPropsWithoutRef<typeof DropdownMenuPrimitive.RadioItem> & { key?: React.Key }
->(({ className, children, ...props }, ref) => (
-  <DropdownMenuPrimitive.RadioItem
-    ref={ref}
-    className={cn(
-      "relative flex cursor-default select-none items-center rounded-sm py-1.5 pl-8 pr-2 text-sm outline-none transition-colors focus:bg-accent focus:text-accent-foreground data-[disabled]:pointer-events-none data-[disabled]:opacity-50",
-      className
-    )}
-    {...props}
-  >
-    <span className="absolute left-2 flex h-3.5 w-3.5 items-center justify-center">
-      <DropdownMenuPrimitive.ItemIndicator>
-        <Circle className="h-2 w-2 fill-current" />
-      </DropdownMenuPrimitive.ItemIndicator>
-    </span>
-    {children}
-  </DropdownMenuPrimitive.RadioItem>
-))
-DropdownMenuRadioItem.displayName = DropdownMenuPrimitive.RadioItem.displayName
-
-const DropdownMenuLabel = React.forwardRef<
-  React.ElementRef<typeof DropdownMenuPrimitive.Label>,
-  React.ComponentPropsWithoutRef<typeof DropdownMenuPrimitive.Label> & {
-    inset?: boolean
-  }
->(({ className, inset, ...props }, ref) => (
-  <DropdownMenuPrimitive.Label
-    ref={ref}
-    className={cn(
-      "px-2 py-1.5 text-sm font-semibold",
-      inset && "pl-8",
-      className
-    )}
-    {...props}
-  />
-))
-DropdownMenuLabel.displayName = DropdownMenuPrimitive.Label.displayName
-
-const DropdownMenuSeparator = React.forwardRef<
-  React.ElementRef<typeof DropdownMenuPrimitive.Separator>,
-  React.ComponentPropsWithoutRef<typeof DropdownMenuPrimitive.Separator>
->(({ className, ...props }, ref) => (
-  <DropdownMenuPrimitive.Separator
-    ref={ref}
-    className={cn("-mx-1 my-1 h-px bg-muted", className)}
-    {...props}
-  />
-))
-DropdownMenuSeparator.displayName = DropdownMenuPrimitive.Separator.displayName
-
-const DropdownMenuShortcut = ({
-  className,
-  ...props
-}: React.HTMLAttributes<HTMLSpanElement>) => {
-  return (
-    <span
-      className={cn("ml-auto text-xs tracking-widest opacity-60", className)}
-      {...props}
-    />
-  )
-}
-DropdownMenuShortcut.displayName = "DropdownMenuShortcut"
-
-export {
-  DropdownMenu,
-  DropdownMenuTrigger,
-  DropdownMenuContent,
-  DropdownMenuItem,
-  DropdownMenuCheckboxItem,
-  DropdownMenuRadioItem,
-  DropdownMenuLabel,
-  DropdownMenuSeparator,
-  DropdownMenuShortcut,
-  DropdownMenuGroup,
-  DropdownMenuPortal,
-  DropdownMenuSub,
-  DropdownMenuSubContent,
-  DropdownMenuSubTrigger,
-  DropdownMenuRadioGroup,
-}

package/src/components/index.ts

@@ -1,52 +0,0 @@
-// ============================================================================
-// Next.js specific components (use next/link, next/image, etc.)
-// Re-exports base components from @djangocfg/ui-core for convenience
-// ============================================================================
-
-'use client';
-
-// Re-export all base components from ui-core
-// (includes Link / ButtonLink — wired to next/link via NextLinkProvider in BaseApp)
-export * from '@djangocfg/ui-core/components';
-
-// Navigation Components (Next.js)
-export { Breadcrumb, BreadcrumbItem, BreadcrumbLink, BreadcrumbList, BreadcrumbPage, BreadcrumbSeparator, BreadcrumbEllipsis } from './breadcrumb';
-export { BreadcrumbNavigation } from './breadcrumb-navigation';
-export type { BreadcrumbItem as BreadcrumbNavigationItem, BreadcrumbNavigationProps } from './breadcrumb-navigation';
-
-// Interactive Components (Next.js)
-export { DropdownMenu, DropdownMenuCheckboxItem, DropdownMenuContent, DropdownMenuGroup, DropdownMenuItem, DropdownMenuLabel, DropdownMenuRadioGroup, DropdownMenuRadioItem, DropdownMenuSeparator, DropdownMenuShortcut, DropdownMenuSub, DropdownMenuSubContent, DropdownMenuSubTrigger, DropdownMenuTrigger } from './dropdown-menu';
-
-// Pagination (Next.js)
-export { Pagination, PaginationContent, PaginationEllipsis, PaginationItem, PaginationLink, PaginationNext, PaginationPrevious } from './pagination';
-export { SSRPagination } from './ssr-pagination';
-export { StaticPagination, useDRFPaginationInfo, useDRFPagination } from './pagination-static';
-export type { DRFPaginatedResponse } from './pagination-static';
-
-// Sidebar (Next.js)
-export {
-  Sidebar,
-  SidebarContent,
-  SidebarFooter,
-  SidebarGroup,
-  SidebarGroupAction,
-  SidebarGroupContent,
-  SidebarGroupLabel,
-  SidebarHeader,
-  SidebarInput,
-  SidebarInset,
-  SidebarMenu,
-  SidebarMenuAction,
-  SidebarMenuBadge,
-  SidebarMenuButton,
-  SidebarMenuItem,
-  SidebarMenuSkeleton,
-  SidebarMenuSub,
-  SidebarMenuSubButton,
-  SidebarMenuSubItem,
-  SidebarProvider,
-  SidebarRail,
-  SidebarSeparator,
-  SidebarTrigger,
-  useSidebar,
-} from './sidebar';