@catalystsoftware/ui 1.0.11 → 1.0.14

package/dist/components/catalyst-ui/core/navbars/navbar-15/navbar-15.tsx

@@ -0,0 +1,151 @@
+
+import * as React from 'react';
+import { BookmarkIcon, HomeIcon } from 'lucide-react';
+import {DatePicker15} from './DatePicker';
+import {Filters} from './Filters';
+import {
+  Breadcrumb,
+  BreadcrumbItem,
+  BreadcrumbLink,
+  BreadcrumbList,
+  BreadcrumbPage,
+  BreadcrumbSeparator,
+} from "~/components/catalyst-ui"
+import { Button } from '~/components/catalyst-ui';
+import { cn } from '~/components/catalyst-ui';
+
+// Types
+export interface Navbar15BreadcrumbItem {
+  href?: string;
+  label: string;
+  isCurrentPage?: boolean;
+}
+
+export interface Navbar15Props extends React.HTMLAttributes<HTMLElement> {
+  breadcrumbItems?: Navbar15BreadcrumbItem[];
+  showHomeIcon?: boolean;
+  selectedDate?: Date;
+  filterGroups?: Array<{
+    id: string;
+    label: string;
+    options: Array<{
+      id: string;
+      label: string;
+      checked?: boolean;
+    }>;
+  }>;
+  savedButtonText?: string;
+  onBreadcrumbClick?: (href: string) => void;
+  onDateChange?: (date: Date | undefined) => void;
+  onFilterChange?: (groupId: string, optionId: string, checked: boolean) => void;
+  onClearFilters?: () => void;
+  onSavedClick?: () => void;
+}
+
+// Default breadcrumb items
+const defaultBreadcrumbItems: Navbar15BreadcrumbItem[] = [
+  { href: '#', label: 'Home' },
+  { label: 'Reports', isCurrentPage: true },
+];
+
+export const Navbar15 = React.forwardRef<HTMLElement, Navbar15Props>(
+  (
+    {
+      className,
+      breadcrumbItems = defaultBreadcrumbItems,
+      showHomeIcon = true,
+      selectedDate,
+      filterGroups,
+      savedButtonText = 'Saved',
+      onBreadcrumbClick,
+      onDateChange,
+      onFilterChange,
+      onClearFilters,
+      onSavedClick,
+      ...props
+    },
+    ref
+  ) => {
+    return (
+      <header
+        ref={ref}
+        className={cn(
+          'border-b px-4 md:px-6 [&_*]:no-underline',
+          className
+        )}
+        {...props}
+      >
+        <div className="flex h-16 items-center justify-between gap-4">
+          {/* Left side */}
+          <Breadcrumb>
+            <BreadcrumbList>
+              {breadcrumbItems.map((item, index) => (
+                <React.Fragment key={index}>
+                  <BreadcrumbItem>
+                    {item.isCurrentPage ? (
+                      <BreadcrumbPage>{item.label}</BreadcrumbPage>
+                    ) : (
+                      <BreadcrumbLink
+                        href={item.href}
+                        onClick={(e) => {
+                          e.preventDefault();
+                          if (onBreadcrumbClick && item.href) {
+                            onBreadcrumbClick(item.href);
+                          }
+                        }}
+                        className="cursor-pointer"
+                      >
+                        {index === 0 && showHomeIcon ? (
+                          <>
+                            <HomeIcon size={16} aria-hidden="true" />
+                            <span className="sr-only">{item.label}</span>
+                          </>
+                        ) : (
+                          item.label
+                        )}
+                      </BreadcrumbLink>
+                    )}
+                  </BreadcrumbItem>
+                  {index < breadcrumbItems.length - 1 && <BreadcrumbSeparator />}
+                </React.Fragment>
+              ))}
+            </BreadcrumbList>
+          </Breadcrumb>
+          {/* Right side */}
+          <div className="flex items-center gap-2">
+            {/* Date picker */}
+            <DatePicker15 
+              date={selectedDate}
+              onDateChange={onDateChange}
+            />
+            {/* Filters */}
+            <Filters 
+              filterGroups={filterGroups}
+              onFilterChange={onFilterChange}
+              onClearFilters={onClearFilters}
+            />
+            {/* Saved button */}
+            <Button
+              size="sm"
+              variant="outline"
+              className="text-sm max-sm:aspect-square max-sm:p-0"
+              onClick={(e) => {
+                e.preventDefault();
+                if (onSavedClick) onSavedClick();
+              }}
+            >
+              <BookmarkIcon
+                className="text-muted-foreground/80 sm:-ms-1"
+                size={16}
+                aria-hidden="true"
+              />
+              <span className="max-sm:sr-only">{savedButtonText}</span>
+            </Button>
+          </div>
+        </div>
+      </header>
+    );
+  }
+);
+
+Navbar15.displayName = 'Navbar15';

package/dist/components/catalyst-ui/core/navbars/navbar-16/AppToggle.tsx

@@ -0,0 +1,125 @@
+;
+
+import * as React from 'react';
+import { LayoutGridIcon } from 'lucide-react';
+import { Button } from '~/components/catalyst-ui';
+import {
+  DropdownMenu,
+  DropdownMenuContent,
+  DropdownMenuItem,
+  DropdownMenuLabel,
+  DropdownMenuSeparator,
+  DropdownMenuTrigger,
+} from "~/components/catalyst-ui"
+
+export interface AppOption {
+  id: string;
+  name: string;
+  description?: string;
+  icon?: React.ReactNode;
+}
+
+export interface AppToggleProps {
+  apps?: AppOption[];
+  currentApp?: string;
+  onAppChange?: (appId: string) => void;
+  className?: string;
+}
+
+const defaultApps: AppOption[] = [
+  {
+    id: 'dashboard',
+    name: 'Dashboard',
+    description: 'Analytics and insights',
+  },
+  {
+    id: 'projects',
+    name: 'Projects',
+    description: 'Manage your projects',
+  },
+  {
+    id: 'calendar',
+    name: 'Calendar',
+    description: 'Schedule and events',
+  },
+  {
+    id: 'tasks',
+    name: 'Tasks',
+    description: 'Track your tasks',
+  },
+  {
+    id: 'messages',
+    name: 'Messages',
+    description: 'Team communications',
+  },
+  {
+    id: 'files',
+    name: 'Files',
+    description: 'Document management',
+  },
+];
+
+export const AppToggle = React.forwardRef<
+  HTMLButtonElement,
+  AppToggleProps
+>(({ apps = defaultApps, currentApp = 'dashboard', onAppChange, className }, ref) => {
+  return (
+    <DropdownMenu>
+      <DropdownMenuTrigger asChild>
+        <Button
+          ref={ref}
+          variant="ghost"
+          size="icon"
+          className="h-9 w-9"
+          aria-label="Switch application"
+        >
+          <LayoutGridIcon className="h-4 w-4" />
+        </Button>
+      </DropdownMenuTrigger>
+      <DropdownMenuContent align="center" className="w-64">
+        <DropdownMenuLabel>Switch Application</DropdownMenuLabel>
+        <DropdownMenuSeparator />
+        <div className="grid grid-cols-2 gap-1 p-1">
+          {apps.map((app) => (
+            <DropdownMenuItem
+              key={app.id}
+              className="flex flex-col items-start p-3 cursor-pointer h-auto"
+              onClick={() => {
+                if (onAppChange) {
+                  onAppChange(app.id);
+                }
+              }}
+            >
+              <div className="flex items-center gap-2 w-full">
+                {app.icon && (
+                  <div className="flex-shrink-0">
+                    {app.icon}
+                  </div>
+                )}
+                <div className="flex-1 min-w-0">
+                  <p className="text-sm font-medium leading-none">
+                    {app.name}
+                  </p>
+                  {app.description && (
+                    <p className="text-xs text-muted-foreground mt-1">
+                      {app.description}
+                    </p>
+                  )}
+                </div>
+              </div>
+              {app.id === currentApp && (
+                <div className="w-full mt-2">
+                  <div className="h-1 bg-primary rounded-full w-full" />
+                </div>
+              )}
+            </DropdownMenuItem>
+          ))}
+        </div>
+      </DropdownMenuContent>
+    </DropdownMenu>
+  );
+});
+
+AppToggle.displayName = 'AppToggle';
+
+export default AppToggle;

package/dist/components/catalyst-ui/core/navbars/navbar-16/TeamSwitcher.tsx

@@ -0,0 +1,87 @@
+ 
+import * as React from 'react';
+import { ChevronsUpDown } from 'lucide-react';
+import { Button } from '~/components/catalyst-ui';
+import {
+  Popover,
+  PopoverContent,
+  PopoverTrigger,
+} from "~/components/catalyst-ui"
+import {
+  Command,
+  CommandEmpty,
+  CommandGroup,
+  CommandInput,
+  CommandItem,
+  CommandList,
+} from '~/components/catalyst-ui'
+import { CheckIcon } from 'lucide-react';
+import { cn } from '~/components/catalyst-ui';
+
+export interface TeamSwitcherProps {
+  teams: string[];
+  defaultTeam?: string;
+  onTeamChange?: (team: string) => void;
+  className?: string;
+}
+
+export const TeamSwitcher16 = React.forwardRef<
+  HTMLButtonElement,
+  TeamSwitcherProps
+>(({ teams, defaultTeam, onTeamChange, className }, ref) => {
+  const [open, setOpen] = React.useState(false);
+  const [value, setValue] = React.useState(defaultTeam || teams[0] || '');
+
+  const handleSelect = (currentValue: string) => {
+    const newValue = currentValue === value ? '' : currentValue;
+    setValue(newValue);
+    setOpen(false);
+    if (onTeamChange) {
+      onTeamChange(newValue);
+    }
+  };
+
+  return (
+    <Popover open={open} onOpenChange={setOpen}>
+      <PopoverTrigger asChild>
+        <Button
+          ref={ref}
+          variant="outline"
+          role="combobox"
+          aria-expanded={open}
+          className={cn("w-[200px] justify-between", className)}
+        >
+          {value || "Select team..."}
+          <ChevronsUpDown className="ml-2 h-4 w-4 shrink-0 opacity-50" />
+        </Button>
+      </PopoverTrigger>
+      <PopoverContent className="w-[200px] p-0">
+        <Command>
+          <CommandInput placeholder="Search team..." />
+          <CommandList>
+            <CommandEmpty>No team found.</CommandEmpty>
+            <CommandGroup>
+              {teams.map((team) => (
+                <CommandItem
+                  key={team}
+                  value={team}
+                  onSelect={() => handleSelect(team)}
+                >
+                  <CheckIcon
+                    className={cn(
+                      "mr-2 h-4 w-4",
+                      value === team ? "opacity-100" : "opacity-0"
+                    )}
+                  />
+                  {team}
+                </CommandItem>
+              ))}
+            </CommandGroup>
+          </CommandList>
+        </Command>
+      </PopoverContent>
+    </Popover>
+  );
+});
+
+TeamSwitcher.displayName = 'TeamSwitcher';

package/dist/components/catalyst-ui/core/navbars/navbar-16/navbar-16.tsx

@@ -0,0 +1,113 @@
+
+import * as React from 'react';
+import { SparklesIcon, UploadIcon } from 'lucide-react';
+import {AppToggle} from './AppToggle';
+import {TeamSwitcher16} from './TeamSwitcher';
+import { Button } from '~/components/catalyst-ui';
+import { cn } from '~/components/catalyst-ui';
+
+// Types
+export interface Navbar16Props extends React.HTMLAttributes<HTMLElement> {
+  teams?: string[];
+  defaultTeam?: string;
+  currentApp?: string;
+  apps?: Array<{
+    id: string;
+    name: string;
+    description?: string;
+    icon?: React.ReactNode;
+  }>;
+  exportButtonText?: string;
+  upgradeButtonText?: string;
+  onTeamChange?: (team: string) => void;
+  onAppChange?: (appId: string) => void;
+  onExportClick?: () => void;
+  onUpgradeClick?: () => void;
+}
+
+// Default teams
+const defaultTeams = ['shadcn/ui', 'Acme Inc.', 'Origin UI'];
+
+export const Navbar16 = React.forwardRef<HTMLElement, Navbar16Props>(
+  (
+    {
+      className,
+      teams = defaultTeams,
+      defaultTeam = teams[0],
+      currentApp = 'dashboard',
+      apps,
+      exportButtonText = 'Export',
+      upgradeButtonText = 'Upgrade',
+      onTeamChange,
+      onAppChange,
+      onExportClick,
+      onUpgradeClick,
+      ...props
+    },
+    ref
+  ) => {
+    return (
+      <header
+        ref={ref}
+        className={cn(
+          'border-b px-4 md:px-6 [&_*]:no-underline',
+          className
+        )}
+        {...props}
+      >
+        <div className="flex h-16 items-center justify-between gap-4">
+          {/* Left side */}
+          <div className="flex flex-1 items-center gap-2">
+            <TeamSwitcher16 
+              teams={teams} 
+              defaultTeam={defaultTeam} 
+              onTeamChange={onTeamChange}
+            />
+          </div>
+          {/* Middle area */}
+          <AppToggle 
+            apps={apps}
+            currentApp={currentApp}
+            onAppChange={onAppChange}
+          />
+          {/* Right side */}
+          <div className="flex flex-1 items-center justify-end gap-2">
+            <Button
+              size="sm"
+              variant="ghost"
+              className="text-sm max-sm:aspect-square max-sm:p-0"
+              onClick={(e) => {
+                e.preventDefault();
+                if (onExportClick) onExportClick();
+              }}
+            >
+              <UploadIcon
+                className="opacity-60 sm:-ms-1"
+                size={16}
+                aria-hidden="true"
+              />
+              <span className="max-sm:sr-only">{exportButtonText}</span>
+            </Button>
+            <Button 
+              size="sm" 
+              className="text-sm max-sm:aspect-square max-sm:p-0"
+              onClick={(e) => {
+                e.preventDefault();
+                if (onUpgradeClick) onUpgradeClick();
+              }}
+            >
+              <SparklesIcon
+                className="opacity-60 sm:-ms-1"
+                size={16}
+                aria-hidden="true"
+              />
+              <span className="max-sm:sr-only">{upgradeButtonText}</span>
+            </Button>
+          </div>
+        </div>
+      </header>
+    );
+  }
+);
+
+Navbar16.displayName = 'Navbar16';

package/dist/components/catalyst-ui/core/navbars/navbar-17.tsx

@@ -0,0 +1,209 @@
+;
+
+import * as React from 'react';
+import {
+  ChevronLeftIcon,
+  HistoryIcon,
+  MessageSquareText,
+  UserRoundPlus,
+} from 'lucide-react';
+import {
+  Avatar,
+  AvatarFallback,
+  AvatarImage,
+} from "~/components/catalyst-ui"
+import { Button } from '~/components/catalyst-ui';
+import { cn } from '~/components/catalyst-ui';
+
+// Types
+export interface Navbar17User {
+  id: string;
+  name: string;
+  avatar?: string;
+  fallback: string;
+  isOnline?: boolean;
+}
+
+export interface Navbar17Props extends React.HTMLAttributes<HTMLElement> {
+  title?: string;
+  backHref?: string;
+  users?: Navbar17User[];
+  additionalUsersCount?: number;
+  showBackButton?: boolean;
+  onBackClick?: () => void;
+  onHistoryClick?: () => void;
+  onCommentsClick?: () => void;
+  onAddUserClick?: () => void;
+  onUserClick?: (userId: string) => void;
+  onAdditionalUsersClick?: () => void;
+}
+
+// Default users
+const defaultUsers: Navbar17User[] = [
+  {
+    id: '1',
+    name: 'Kelly King',
+    avatar: './avatar-80-07.jpg',
+    fallback: 'KK',
+    isOnline: true,
+  },
+  {
+    id: '2',
+    name: 'Martha Johnson',
+    avatar: './avatar-80-06.jpg',
+    fallback: 'MJ',
+    isOnline: false,
+  },
+  {
+    id: '3',
+    name: 'Linda Green',
+    avatar: './avatar-80-05.jpg',
+    fallback: 'LG',
+    isOnline: false,
+  },
+];
+
+export const Navbar17 = React.forwardRef<HTMLElement, Navbar17Props>(
+  (
+    {
+      className,
+      title = 'Basic UI',
+      backHref = '#',
+      users = defaultUsers,
+      additionalUsersCount = 3,
+      showBackButton = true,
+      onBackClick,
+      onHistoryClick,
+      onCommentsClick,
+      onAddUserClick,
+      onUserClick,
+      onAdditionalUsersClick,
+      ...props
+    },
+    ref
+  ) => {
+    const handleBackClick = (e: React.MouseEvent) => {
+      e.preventDefault();
+      if (onBackClick) {
+        onBackClick();
+      }
+    };
+
+    return (
+      <header
+        ref={ref}
+        className={cn(
+          'border-b px-4 md:px-6 [&_*]:no-underline',
+          className
+        )}
+        {...props}
+      >
+        <div className="flex h-16 items-center justify-between gap-4">
+          {/* Left side */}
+          <div className="flex items-center gap-2">
+            {showBackButton && (
+              <Button
+                className="size-8"
+                variant="ghost"
+                size="icon"
+                aria-label="Go back"
+                onClick={handleBackClick}
+              >
+                <ChevronLeftIcon />
+              </Button>
+            )}
+            <h1 className="text-sm font-medium">{title}</h1>
+          </div>
+          {/* Right side */}
+          <div className="flex items-center gap-2">
+            {/* History button */}
+            <Button
+              size="icon"
+              variant="ghost"
+              className="text-muted-foreground size-8 rounded-full shadow-none"
+              aria-label="History"
+              onClick={(e) => {
+                e.preventDefault();
+                if (onHistoryClick) onHistoryClick();
+              }}
+            >
+              <HistoryIcon size={16} aria-hidden="true" />
+            </Button>
+            {/* Comments button */}
+            <Button
+              size="icon"
+              variant="ghost"
+              className="text-muted-foreground size-8 rounded-full shadow-none"
+              aria-label="Comments"
+              onClick={(e) => {
+                e.preventDefault();
+                if (onCommentsClick) onCommentsClick();
+              }}
+            >
+              <MessageSquareText size={16} aria-hidden="true" />
+            </Button>
+            {/* Add user */}
+            <Button
+              size="icon"
+              variant="ghost"
+              className="text-muted-foreground size-8 rounded-full shadow-none"
+              aria-label="Add user"
+              onClick={(e) => {
+                e.preventDefault();
+                if (onAddUserClick) onAddUserClick();
+              }}
+            >
+              <UserRoundPlus size={16} aria-hidden="true" />
+            </Button>
+            {/* Online users */}
+            <div className="ml-2 flex items-center gap-2">
+              {users.map((user) => (
+                <div key={user.id} className="relative">
+                  <button
+                    onClick={(e) => {
+                      e.preventDefault();
+                      if (onUserClick) onUserClick(user.id);
+                    }}
+                    className="cursor-pointer"
+                    aria-label={`View ${user.name}'s profile`}
+                  >
+                    <Avatar>
+                      <AvatarImage src={user.avatar} alt={user.name} />
+                      <AvatarFallback>{user.fallback}</AvatarFallback>
+                    </Avatar>
+                  </button>
+                  <span 
+                    className={cn(
+                      "border-background absolute -end-0.5 -bottom-0.5 size-3 rounded-full border-2",
+                      user.isOnline ? "bg-emerald-500" : "bg-muted-foreground"
+                    )}
+                  >
+                    <span className="sr-only">
+                      {user.isOnline ? 'Online' : 'Offline'}
+                    </span>
+                  </span>
+                </div>
+              ))}
+              {additionalUsersCount > 0 && (
+                <Button
+                  variant="secondary"
+                  className="bg-secondary text-muted-foreground ring-background hover:bg-secondary hover:text-foreground flex size-8 items-center justify-center rounded-full text-xs"
+                  size="icon"
+                  onClick={(e) => {
+                    e.preventDefault();
+                    if (onAdditionalUsersClick) onAdditionalUsersClick();
+                  }}
+                  aria-label={`View ${additionalUsersCount} more users`}
+                >
+                  +{additionalUsersCount}
+                </Button>
+              )}
+            </div>
+          </div>
+        </div>
+      </header>
+    );
+  }
+);
+
+Navbar17.displayName = 'Navbar17';