@classytic/fluid 0.1.1

package/README.md

@@ -0,0 +1,62 @@
+# @classytic/fluid
+
+Reusable UI components built on shadcn/ui for Next.js projects.
+
+## Install
+
+```bash
+npm install @classytic/fluid
+```
+
+## Usage
+
+```tsx
+import { DialogWrapper, FormInput, DataTable } from "@classytic/fluid";
+import { PageHeader, InsetSidebar } from "@classytic/fluid/dashboard";
+```
+
+## Components
+
+| Category | Components |
+|----------|-----------|
+| **Dialogs/Sheets** | DialogWrapper, FormDialog, SheetWrapper, FormSheet, ConfirmDialog |
+| **Forms** | FormInput, FormTextarea, SelectInput, CheckboxInput, RadioInput, SwitchInput, DateInput, TagInput, ComboboxInput, SlugField, FormErrorSummary, DateRangeFilter |
+| **Tables** | DataTable, TableWrapper, SimpleTable |
+| **Layout** | CardWrapper, CollapsibleWrapper, ResponsiveSplitLayout, TabsWrapper |
+| **Display** | Pill, InfoRow, CopyButton, Thumbnail, DisplayHeading |
+| **Navigation** | ApiPagination, CustomPagination |
+| **Dashboard** | PageHeader, HeaderSection, InsetSidebar, DualSidebar, ProjectSwitcher, SidebarNav, SidebarUserMenu |
+| **Other** | ModeToggle, TooltipWrapper, DropdownWrapper, AccordionWrapper |
+
+## Exports
+
+```tsx
+// Main components
+import { ... } from "@classytic/fluid";
+
+// Dashboard components (sidebar, header)
+import { ... } from "@classytic/fluid/dashboard";
+
+// Layout utilities
+import { ... } from "@classytic/fluid/layout";
+```
+
+## Requirements
+
+- Next.js with `@/` path alias
+- shadcn/ui components at `@/components/ui/*`
+
+## Dev
+
+```bash
+npm run build   # Build package
+npm run dev     # Watch mode
+```
+## License
+
+**UNLICENSED**
+
+Copyright © 2026 Classytic. All rights reserved.
+
+This software is the confidential and proprietary information of Classytic.
+Unauthorized copying of this software, via any medium is strictly prohibited.

package/dist/dashboard.d.ts

@@ -0,0 +1,349 @@
+import * as react_jsx_runtime from 'react/jsx-runtime';
+import { LucideIcon } from 'lucide-react';
+import * as React from 'react';
+import React__default, { ReactNode } from 'react';
+export { c as cn } from './utils-Cbsgs0XP.js';
+import 'clsx';
+
+interface HeaderAction {
+    text: string;
+    onClick?: () => void;
+    disabled?: boolean;
+    variant?: "default" | "destructive" | "outline" | "secondary" | "ghost" | "link";
+    size?: "default" | "sm" | "lg" | "icon";
+    className?: string;
+    icon?: LucideIcon;
+    iconPosition?: "left" | "right";
+    loadingText?: string;
+    loading?: boolean;
+}
+interface HeaderBadge {
+    text: string;
+    variant?: "default" | "secondary" | "destructive" | "outline";
+    className?: string;
+}
+interface HeaderMetadata {
+    text: string;
+    icon?: LucideIcon;
+}
+interface HeaderSectionProps {
+    title?: string;
+    description?: string;
+    actions?: HeaderAction[] | null;
+    icon?: LucideIcon | null;
+    iconClassName?: string;
+    loading?: boolean;
+    variant?: "default" | "compact" | "hero" | "minimal";
+    className?: string;
+    badge?: HeaderBadge | ReactNode;
+    breadcrumbs?: ReactNode;
+    metadata?: HeaderMetadata[];
+    children?: ReactNode;
+}
+declare function HeaderSection({ title, description, actions, icon: Icon, iconClassName, loading, variant, className, badge, breadcrumbs, metadata, children, }: HeaderSectionProps): react_jsx_runtime.JSX.Element;
+
+interface BreadcrumbItemData {
+    label: string;
+    href?: string;
+    current?: boolean;
+}
+interface PageHeaderProps {
+    items: BreadcrumbItemData[];
+    className?: string;
+    actions?: React__default.ReactNode;
+}
+declare function PageHeader({ items, className, actions }: PageHeaderProps): react_jsx_runtime.JSX.Element;
+
+interface SidebarBrandProps {
+    /** Brand title text */
+    title: string;
+    /** Brand icon/logo element */
+    icon: React.ReactNode;
+    /** Link href (defaults to "/") */
+    href?: string;
+    /** Additional className */
+    className?: string;
+    /** Tooltip text when collapsed (defaults to title) */
+    tooltip?: string;
+}
+/**
+ * SidebarBrand - Logo and title section for dashboard sidebar.
+ * Automatically handles collapsed state styling.
+ */
+declare function SidebarBrand({ title, icon, href, className, tooltip, }: SidebarBrandProps): react_jsx_runtime.JSX.Element;
+
+interface NavSubItem {
+    title: string;
+    url: string;
+    badge?: string | number;
+}
+interface NavItem {
+    title: string;
+    url: string;
+    icon?: LucideIcon;
+    isActive?: boolean;
+    badge?: string | number;
+    items?: NavSubItem[];
+}
+interface NavGroup {
+    title?: string;
+    items: NavItem[];
+}
+interface SidebarNavProps {
+    /** Navigation groups to render */
+    groups: NavGroup[];
+    /** Additional className */
+    className?: string;
+    /** Callback when a nav item is clicked */
+    onItemClick?: (item: NavItem) => void;
+}
+interface SidebarNavGroupProps {
+    /** Group title (optional) */
+    title?: string;
+    /** Navigation items in this group */
+    items: NavItem[];
+    /** Additional className */
+    className?: string;
+    /** Callback when an item is clicked */
+    onItemClick?: (item: NavItem) => void;
+}
+interface SidebarNavItemProps {
+    /** The navigation item data */
+    item: NavItem;
+    /** Callback when clicked */
+    onClick?: () => void;
+}
+/**
+ * SidebarNavItem - Single navigation item with optional sub-items.
+ */
+declare function SidebarNavItem({ item, onClick }: SidebarNavItemProps): react_jsx_runtime.JSX.Element;
+/**
+ * SidebarNavGroup - A group of navigation items with optional title.
+ */
+declare function SidebarNavGroup({ title, items, className, onItemClick, }: SidebarNavGroupProps): react_jsx_runtime.JSX.Element;
+/**
+ * SidebarNav - Complete navigation section with multiple groups.
+ */
+declare function SidebarNav({ groups, className, onItemClick }: SidebarNavProps): react_jsx_runtime.JSX.Element;
+
+interface UserData {
+    name: string;
+    email: string;
+    avatar?: string;
+}
+interface UserMenuItem {
+    label: string;
+    icon?: LucideIcon;
+    href?: string;
+    onClick?: () => void;
+    separator?: boolean;
+}
+interface SidebarUserMenuProps {
+    /** User data to display */
+    user: UserData;
+    /** Menu items (account, settings, etc.) */
+    menuItems?: UserMenuItem[];
+    /** Logout handler */
+    onLogout?: () => void;
+    /** Additional className */
+    className?: string;
+}
+/**
+ * SidebarUserMenu - User avatar and dropdown menu for sidebar footer.
+ * Accepts handlers for logout and custom menu items.
+ */
+declare function SidebarUserMenu({ user, menuItems, onLogout, className, }: SidebarUserMenuProps): react_jsx_runtime.JSX.Element;
+
+interface ProjectItem {
+    /** Unique identifier */
+    id: string;
+    /** Display name */
+    name: string;
+    /** Short code or identifier */
+    code?: string;
+    /** Optional type badge */
+    type?: string;
+    /** Is this the default project */
+    isDefault?: boolean;
+    /** Is this project active */
+    isActive?: boolean;
+    /** Optional subtitle/description */
+    subtitle?: string;
+}
+interface ProjectSwitcherProps {
+    /** List of available projects */
+    items: ProjectItem[];
+    /** Currently selected project */
+    selected?: ProjectItem;
+    /** Callback when a project is selected */
+    onSelect: (project: ProjectItem) => void;
+    /** Whether the data is loading */
+    isLoading?: boolean;
+    /** Label shown in dropdown header */
+    label?: string;
+    /** Icon to display (defaults to Building2) */
+    icon?: LucideIcon;
+    /** Additional className */
+    className?: string;
+    /** Whether to show as disabled (single item) */
+    disabled?: boolean;
+    /**
+     * Render variant:
+     * - "sidebar": Uses SidebarMenu components, requires SidebarProvider context
+     * - "standalone": Uses Button, works anywhere (headers, toolbars, etc.)
+     */
+    variant?: "sidebar" | "standalone";
+    /** Size for standalone variant (ignored in sidebar variant) */
+    size?: "sm" | "default";
+    /** Render custom item content */
+    renderItem?: (item: ProjectItem, isSelected: boolean) => React.ReactNode;
+}
+/**
+ * ProjectSwitcher - Generic project/workspace/branch switcher.
+ * Works for any entity that needs switching functionality.
+ *
+ * @example Sidebar usage (inside SidebarProvider)
+ * ```tsx
+ * <ProjectSwitcher
+ *   items={projects}
+ *   selected={selectedProject}
+ *   onSelect={setSelectedProject}
+ * />
+ * ```
+ *
+ * @example Header/Standalone usage (no SidebarProvider needed)
+ * ```tsx
+ * <ProjectSwitcher
+ *   variant="standalone"
+ *   items={projects}
+ *   selected={selectedProject}
+ *   onSelect={setSelectedProject}
+ *   size="sm"
+ * />
+ * ```
+ */
+declare function ProjectSwitcher({ items, selected, onSelect, isLoading, label, icon: Icon, className, disabled, variant, size, renderItem, }: ProjectSwitcherProps): react_jsx_runtime.JSX.Element | null;
+
+interface BreadcrumbItem {
+    label: string;
+    href?: string;
+    current?: boolean;
+}
+interface DashboardHeaderProps {
+    /** Breadcrumb items */
+    breadcrumbs?: BreadcrumbItem[];
+    /** Content to show on the left (after breadcrumbs) */
+    leftContent?: React.ReactNode;
+    /** Content to show on the right (actions, mode toggle, etc.) */
+    rightContent?: React.ReactNode;
+    /** Whether to show sidebar trigger */
+    showSidebarTrigger?: boolean;
+    /** Additional className */
+    className?: string;
+    /** Custom content (replaces default breadcrumb) */
+    children?: React.ReactNode;
+}
+/**
+ * DashboardHeader - Top header bar for dashboard pages.
+ * Includes sidebar trigger, breadcrumbs, and action slots.
+ */
+declare function DashboardHeader({ breadcrumbs, leftContent, rightContent, showSidebarTrigger, className, children, }: DashboardHeaderProps): react_jsx_runtime.JSX.Element;
+
+interface InsetSidebarBrand {
+    title: string;
+    icon: React.ReactNode;
+    href?: string;
+}
+interface InsetSidebarProject {
+    items: ProjectItem[];
+    selected?: ProjectItem;
+    onSelect: (project: ProjectItem) => void;
+    isLoading?: boolean;
+    label?: string;
+    icon?: LucideIcon;
+}
+interface InsetSidebarUser {
+    data: UserData;
+    menuItems?: UserMenuItem[];
+    onLogout?: () => void;
+}
+interface InsetSidebarProps {
+    /** Brand configuration */
+    brand: InsetSidebarBrand;
+    /** Navigation groups */
+    navigation: NavGroup[];
+    /** Secondary navigation (shown at bottom above user) */
+    secondaryNavigation?: NavGroup[];
+    /** Project/workspace switcher configuration */
+    project?: InsetSidebarProject;
+    /** User menu configuration */
+    user?: InsetSidebarUser;
+    /** Custom content to render in header (after brand/project switcher) */
+    headerContent?: React.ReactNode;
+    /** Accessibility label for the sidebar */
+    ariaLabel?: string;
+    /** Additional className */
+    className?: string;
+    /** Children to render in content area */
+    children?: React.ReactNode;
+}
+/**
+ * InsetSidebar - Complete sidebar preset with inset variant.
+ * The standard dashboard sidebar with collapsible to icons.
+ */
+declare function InsetSidebar({ brand, navigation, secondaryNavigation, project, user, headerContent, ariaLabel, className, children, }: InsetSidebarProps): react_jsx_runtime.JSX.Element;
+
+interface DualSidebarCategory {
+    /** Unique identifier */
+    id: string;
+    /** Display name */
+    name: string;
+    /** Category icon */
+    icon: LucideIcon;
+    /** Sub-items in this category */
+    items: DualSidebarItem[];
+}
+interface DualSidebarItem {
+    title: string;
+    url: string;
+    icon?: LucideIcon;
+    badge?: string | number;
+    isActive?: boolean;
+}
+interface DualSidebarBrand {
+    title: string;
+    icon: React.ReactNode;
+    href?: string;
+}
+interface DualSidebarUser {
+    data: UserData;
+    menuItems?: UserMenuItem[];
+    onLogout?: () => void;
+}
+interface DualSidebarProps {
+    /** Brand configuration */
+    brand: DualSidebarBrand;
+    /** Main categories with their items */
+    categories: DualSidebarCategory[];
+    /** User menu configuration */
+    user?: DualSidebarUser;
+    /** Initially active category ID */
+    defaultCategoryId?: string;
+    /** Callback when category changes */
+    onCategoryChange?: (categoryId: string) => void;
+    /** Whether the expanded panel starts collapsed */
+    defaultCollapsed?: boolean;
+    /** Rail color variant */
+    railVariant?: "default" | "dark" | "primary" | "muted";
+    /** Accessibility label */
+    ariaLabel?: string;
+    /** Additional className for outer container */
+    className?: string;
+}
+/**
+ * DualSidebar - A sidebar with icon rail and collapsible expanded panel.
+ * Mimics the inset sidebar variant structure for consistent styling.
+ */
+declare function DualSidebar({ brand, categories, user, defaultCategoryId, onCategoryChange, defaultCollapsed, railVariant, ariaLabel, className, }: DualSidebarProps): react_jsx_runtime.JSX.Element;
+
+export { type BreadcrumbItem, type BreadcrumbItemData, DashboardHeader, type DashboardHeaderProps, DualSidebar, type DualSidebarBrand, type DualSidebarCategory, type DualSidebarItem, type DualSidebarProps, type DualSidebarUser, type HeaderAction, type HeaderBadge, type HeaderMetadata, HeaderSection, type HeaderSectionProps, InsetSidebar, type InsetSidebarBrand, type InsetSidebarProject, type InsetSidebarProps, type InsetSidebarUser, type NavGroup, type NavItem, type NavSubItem, PageHeader, type PageHeaderProps, type ProjectItem, ProjectSwitcher, type ProjectSwitcherProps, SidebarBrand, type SidebarBrandProps, SidebarNav, SidebarNavGroup, type SidebarNavGroupProps, SidebarNavItem, type SidebarNavItemProps, type SidebarNavProps, SidebarUserMenu, type SidebarUserMenuProps, type UserData, type UserMenuItem };