@object-ui/layout 3.3.0 → 3.3.1

package/src/Page.tsx

@@ -1,39 +0,0 @@
-// packages/layout/src/Page.tsx
-import React from 'react';
-import { SchemaRenderer } from '@object-ui/react';
-import { PageSchema, SchemaNode } from '@object-ui/types';
-import { PageHeader } from './PageHeader';
-import { cn } from '@object-ui/components';
-
-// Helper to ensure children is always an array
-const getChildren = (children?: SchemaNode[] | SchemaNode): SchemaNode[] => {
-  if (!children) return [];
-  if (Array.isArray(children)) return children;
-  return [children];
-};
-
-export function Page({ schema, className, style, id, ...props }: { schema: PageSchema; className?: string; style?: React.CSSProperties; id?: string } & any) {
-  const children = getChildren(schema.children);
-
-  return (
-    <div 
-      id={id || schema.id}
-      className={cn("flex flex-col h-full space-y-4", className)} 
-      style={style}
-    >
-      <PageHeader 
-        title={schema.title} 
-        description={schema.description} 
-      />
-      <div className="flex-1 overflow-auto">
-        {children.map((child: any, index: number) => (
-           <SchemaRenderer 
-             key={child?.id || index} 
-             schema={child} 
-             {...props} 
-            />
-        ))}
-      </div>
-    </div>
-  );
-}

package/src/PageCard.tsx

@@ -1,12 +0,0 @@
-import React from 'react';
-import { cn } from '@object-ui/components';
-
-export function PageCard({ className, children, ...props }: React.HTMLAttributes<HTMLDivElement>) {
-  return (
-    <div className={cn("rounded-xl border bg-card text-card-foreground shadow", className)} {...props}>
-      <div className="p-6">
-        {children}
-      </div>
-    </div>
-  );
-}

package/src/PageHeader.tsx

@@ -1,35 +0,0 @@
-import React from 'react';
-import { cn } from '@object-ui/components';
-
-export interface PageHeaderProps extends React.HTMLAttributes<HTMLDivElement> {
-    title: string;
-    description?: string;
-    action?: React.ReactNode;
-}
-
-export function PageHeader({ 
-    title, 
-    description, 
-    action,
-    className, 
-    children, 
-    ...props 
-}: PageHeaderProps) {
-    return (
-        <div className={cn("flex flex-col gap-4 pb-4 md:pb-8", className)} {...props}>
-            <div className="flex items-center justify-between gap-4">
-                <div className="flex flex-col gap-1">
-                    <h1 className="text-2xl font-bold tracking-tight md:text-3xl">{title}</h1>
-                    {description && <p className="text-sm text-muted-foreground">{description}</p>}
-                </div>
-                {/* Render children (actions) in the top-right slot if available */}
-                {(action || children) && (
-                    <div className="flex items-center gap-2">
-                        {action}
-                        {children}
-                    </div>
-                )}
-            </div>
-        </div>
-    );
-}

package/src/ResponsiveGrid.tsx

@@ -1,118 +0,0 @@
-/**
- * ObjectUI
- * Copyright (c) 2024-present ObjectStack Inc.
- *
- * This source code is licensed under the MIT license found in the
- * LICENSE file in the root directory of this source tree.
- */
-
-import React from 'react';
-import { cn } from '@object-ui/components';
-
-/**
- * Spec-aligned breakpoint column map (mirrors @objectstack/spec BreakpointColumnMapSchema).
- * Maps breakpoint names to grid column counts (1-12).
- */
-export interface BreakpointColumnMap {
-  xs?: number;
-  sm?: number;
-  md?: number;
-  lg?: number;
-  xl?: number;
-  '2xl'?: number;
-}
-
-/**
- * Spec-aligned breakpoint order map (mirrors @objectstack/spec BreakpointOrderMapSchema).
- * Maps breakpoint names to display order numbers.
- */
-export interface BreakpointOrderMap {
-  xs?: number;
-  sm?: number;
-  md?: number;
-  lg?: number;
-  xl?: number;
-  '2xl'?: number;
-}
-
-export interface ResponsiveGridProps {
-  /** Grid column map per breakpoint */
-  columns?: BreakpointColumnMap;
-  /** Gap between grid items */
-  gap?: number | string;
-  /** Additional class names */
-  className?: string;
-  /** Children */
-  children: React.ReactNode;
-}
-
-/**
- * Tailwind class mapping for grid columns at each breakpoint.
- * Uses standard Tailwind grid-cols utilities for CSS-only responsiveness.
- */
-const COLS_CLASSES: Record<string, Record<number, string>> = {
-  xs: { 1: 'grid-cols-1', 2: 'grid-cols-2', 3: 'grid-cols-3', 4: 'grid-cols-4', 6: 'grid-cols-6', 12: 'grid-cols-12' },
-  sm: { 1: 'sm:grid-cols-1', 2: 'sm:grid-cols-2', 3: 'sm:grid-cols-3', 4: 'sm:grid-cols-4', 6: 'sm:grid-cols-6', 12: 'sm:grid-cols-12' },
-  md: { 1: 'md:grid-cols-1', 2: 'md:grid-cols-2', 3: 'md:grid-cols-3', 4: 'md:grid-cols-4', 6: 'md:grid-cols-6', 12: 'md:grid-cols-12' },
-  lg: { 1: 'lg:grid-cols-1', 2: 'lg:grid-cols-2', 3: 'lg:grid-cols-3', 4: 'lg:grid-cols-4', 6: 'lg:grid-cols-6', 12: 'lg:grid-cols-12' },
-  xl: { 1: 'xl:grid-cols-1', 2: 'xl:grid-cols-2', 3: 'xl:grid-cols-3', 4: 'xl:grid-cols-4', 6: 'xl:grid-cols-6', 12: 'xl:grid-cols-12' },
-  '2xl': { 1: '2xl:grid-cols-1', 2: '2xl:grid-cols-2', 3: '2xl:grid-cols-3', 4: '2xl:grid-cols-4', 6: '2xl:grid-cols-6', 12: '2xl:grid-cols-12' },
-};
-
-/**
- * Resolve a BreakpointColumnMap into Tailwind CSS grid classes.
- */
-function resolveColumnClasses(columns?: BreakpointColumnMap): string {
-  if (!columns) return 'grid-cols-1';
-
-  const classes: string[] = [];
-  for (const [bp, cols] of Object.entries(columns)) {
-    const bpClasses = COLS_CLASSES[bp];
-    if (bpClasses && cols) {
-      // Use closest supported column count
-      const supported = Object.keys(bpClasses).map(Number);
-      const closest = supported.reduce((prev, curr) =>
-        Math.abs(curr - cols) < Math.abs(prev - cols) ? curr : prev
-      );
-      classes.push(bpClasses[closest]);
-    }
-  }
-
-  return classes.join(' ') || 'grid-cols-1';
-}
-
-const GAP_CLASSES: Record<number, string> = {
-  0: 'gap-0', 1: 'gap-1', 2: 'gap-2', 3: 'gap-3', 4: 'gap-4',
-  5: 'gap-5', 6: 'gap-6', 8: 'gap-8',
-};
-
-/**
- * ResponsiveGrid — A layout component that consumes @objectstack/spec
- * BreakpointColumnMapSchema for responsive grid layouts.
- *
- * Uses pure Tailwind CSS classes for responsive behavior (no JS resize listeners).
- *
- * @example
- * ```tsx
- * <ResponsiveGrid columns={{ xs: 1, sm: 2, lg: 3 }} gap={4}>
- *   <Card>Item 1</Card>
- *   <Card>Item 2</Card>
- *   <Card>Item 3</Card>
- * </ResponsiveGrid>
- * ```
- */
-export const ResponsiveGrid: React.FC<ResponsiveGridProps> = ({
-  columns,
-  gap = 4,
-  className,
-  children,
-}) => {
-  const colClasses = resolveColumnClasses(columns);
-  const gapClass = typeof gap === 'number' ? (GAP_CLASSES[gap] || `gap-${gap}`) : '';
-
-  return (
-    <div className={cn('grid', colClasses, gapClass, className)}>
-      {children}
-    </div>
-  );
-};

package/src/SidebarNav.tsx

@@ -1,164 +0,0 @@
-import React from 'react';
-import { NavLink, useLocation } from 'react-router-dom';
-import { 
-  Sidebar,
-  SidebarContent,
-  SidebarGroup,
-  SidebarGroupLabel,
-  SidebarGroupContent,
-  SidebarMenu,
-  SidebarMenuItem,
-  SidebarMenuButton,
-  SidebarMenuSub,
-  SidebarMenuSubItem,
-  SidebarMenuSubButton,
-  Badge,
-  Input,
-  Collapsible,
-  CollapsibleTrigger,
-  CollapsibleContent,
-} from '@object-ui/components';
-import { ChevronRight, Search } from 'lucide-react';
-
-export interface NavItem {
-  title: string;
-  href: string;
-  icon?: React.ComponentType<{ className?: string }>;
-  badge?: string | number;
-  badgeVariant?: 'default' | 'destructive' | 'outline';
-  children?: NavItem[];
-}
-
-export interface NavGroup {
-  label: string;
-  items: NavItem[];
-}
-
-export interface SidebarNavProps {
-    items: NavItem[] | NavGroup[];
-    title?: string;
-    className?: string;
-    collapsible?: "offcanvas" | "icon" | "none";
-    searchEnabled?: boolean;
-    searchPlaceholder?: string;
-}
-
-function isNavGroup(item: NavItem | NavGroup): item is NavGroup {
-  return 'items' in item && !('href' in item);
-}
-
-function NavItemRenderer({ item, pathname }: { item: NavItem; pathname: string }) {
-  if (item.children && item.children.length > 0) {
-    return (
-      <Collapsible asChild defaultOpen className="group/collapsible">
-        <SidebarMenuItem>
-          <CollapsibleTrigger asChild>
-            <SidebarMenuButton tooltip={item.title}>
-              {item.icon && <item.icon />}
-              <span>{item.title}</span>
-              {item.badge != null && (
-                <Badge variant={item.badgeVariant || 'default'} className="ml-auto mr-1 h-5 min-w-5 px-1 text-xs">
-                  {item.badge}
-                </Badge>
-              )}
-              <ChevronRight className="ml-auto h-4 w-4 transition-transform duration-200 group-data-[state=open]/collapsible:rotate-90" />
-            </SidebarMenuButton>
-          </CollapsibleTrigger>
-          <CollapsibleContent>
-            <SidebarMenuSub>
-              {item.children.map((child) => (
-                <SidebarMenuSubItem key={child.href}>
-                  <SidebarMenuSubButton asChild isActive={pathname === child.href}>
-                    <NavLink to={child.href}>
-                      {child.icon && <child.icon />}
-                      <span>{child.title}</span>
-                      {child.badge != null && (
-                        <Badge variant={child.badgeVariant || 'default'} className="ml-auto h-5 min-w-5 px-1 text-xs">
-                          {child.badge}
-                        </Badge>
-                      )}
-                    </NavLink>
-                  </SidebarMenuSubButton>
-                </SidebarMenuSubItem>
-              ))}
-            </SidebarMenuSub>
-          </CollapsibleContent>
-        </SidebarMenuItem>
-      </Collapsible>
-    );
-  }
-
-  return (
-    <SidebarMenuItem>
-      <SidebarMenuButton asChild isActive={pathname === item.href} tooltip={item.title}>
-        <NavLink to={item.href}>
-          {item.icon && <item.icon />}
-          <span>{item.title}</span>
-          {item.badge != null && (
-            <Badge variant={item.badgeVariant || 'default'} className="ml-auto h-5 min-w-5 px-1 text-xs">
-              {item.badge}
-            </Badge>
-          )}
-        </NavLink>
-      </SidebarMenuButton>
-    </SidebarMenuItem>
-  );
-}
-
-export function SidebarNav({ items, title = "Application", className, collapsible = "icon", searchEnabled = false, searchPlaceholder = "Search..." }: SidebarNavProps) {
-  const location = useLocation();
-  const [search, setSearch] = React.useState('');
-
-  const flatItems: Array<{ groupLabel?: string; items: NavItem[] }> = React.useMemo(() => {
-    if (items.length === 0) return [];
-    if (isNavGroup(items[0])) {
-      return (items as NavGroup[]).map(g => ({ groupLabel: g.label, items: g.items }));
-    }
-    return [{ items: items as NavItem[] }];
-  }, [items]);
-
-  const filteredGroups = React.useMemo(() => {
-    if (!search) return flatItems;
-    const lowerSearch = search.toLowerCase();
-    return flatItems.map(group => ({
-      ...group,
-      items: group.items.filter(item =>
-        item.title.toLowerCase().includes(lowerSearch) ||
-        item.children?.some(child => child.title.toLowerCase().includes(lowerSearch))
-      ),
-    })).filter(group => group.items.length > 0);
-  }, [flatItems, search]);
-
-  return (
-    <Sidebar className={className} collapsible={collapsible}>
-      <SidebarContent>
-        {searchEnabled && (
-          <div className="px-3 py-2">
-            <div className="relative">
-              <Search className="absolute left-2.5 top-2.5 h-4 w-4 text-muted-foreground" />
-              <Input
-                type="search"
-                placeholder={searchPlaceholder}
-                value={search}
-                onChange={(e) => setSearch(e.target.value)}
-                className="pl-8 h-9"
-              />
-            </div>
-          </div>
-        )}
-        {filteredGroups.map((group, gIdx) => (
-          <SidebarGroup key={group.groupLabel || gIdx}>
-            <SidebarGroupLabel>{group.groupLabel || title}</SidebarGroupLabel>
-            <SidebarGroupContent>
-              <SidebarMenu>
-                {group.items.map((item) => (
-                  <NavItemRenderer key={item.href} item={item} pathname={location.pathname} />
-                ))}
-              </SidebarMenu>
-            </SidebarGroupContent>
-          </SidebarGroup>
-        ))}
-      </SidebarContent>
-    </Sidebar>
-  );
-}