@craftzbay/ui 0.4.0 → 0.6.0

package/README.md

@@ -5,7 +5,8 @@ primitives — Button through DataGrid — plus composed patterns
 (authentication, app shell, settings, etc.).
 
 - **Showcase:** [design.runestonetechnologies.com](https://design.runestonetechnologies.com)
-- **Storybook:** [design.runestonetechnologies.com/storybook](https://design.runestonetechnologies.com/storybook/)
+- **Components catalog:** [design.runestonetechnologies.com#catalog](https://design.runestonetechnologies.com#catalog)
+- **Docs:** [design.runestonetechnologies.com#docs](https://design.runestonetechnologies.com#docs)
 
 > **Aesthetic direction:** Linear / Vercel / Stripe Dashboard / Notion / Raycast.
 > Neutral-dominant, one accent, hairline borders, generous whitespace, fast quiet
@@ -33,7 +34,6 @@ Peer dependencies: `react@>=18`, `react-dom@>=18`.
 ```bash
 pnpm install
 pnpm dev           # Vite showcase at localhost:5173
-pnpm storybook     # Storybook at localhost:6006
 pnpm build:lib     # Build library → dist-lib/
 ```
 

package/dist-lib/catalog.d.ts

@@ -0,0 +1,8 @@
+import { ReactNode } from 'react';
+export interface CatalogEntry {
+    name: string;
+    storyId: string;
+    group: string;
+    render: () => ReactNode;
+}
+export declare function useCatalogEntries(): CatalogEntry[];

package/dist-lib/components/patterns/AppShell.d.ts

@@ -1,12 +1,150 @@
 import { ReactNode } from 'react';
+/**
+ * Legacy nav keys retained for back-compat. The `active` prop now accepts
+ * any string — these are kept as a typed alias for consumers that hard-code
+ * one of the original demo values.
+ */
 export type AppShellNavKey = 'home' | 'projects' | 'inbox' | 'members' | 'insights' | 'bookmarks' | 'apps' | 'settings' | 'integrations' | 'help';
+export interface AppShellNavItem {
+    /** Active-state identifier — matches AppShell's `active` prop. */
+    key: string;
+    label: ReactNode;
+    /** Leading icon. */
+    icon?: ReactNode;
+    /** Destination. Renders as <a href>; for SPAs intercept onClick. */
+    href?: string;
+    /** Right-aligned content (Badge, count). */
+    trailing?: ReactNode;
+    /** Optional click handler. */
+    onClick?: () => void;
+}
+export interface AppShellNavSection {
+    /** Section heading shown above the items. */
+    label?: ReactNode;
+    items: AppShellNavItem[];
+}
+export interface AppShellUser {
+    name: ReactNode;
+    email?: ReactNode;
+    /** 1–2 char initials for the Avatar fallback. */
+    initials: string;
+    /** Online status — drives the Avatar status dot. */
+    status?: 'online' | 'busy' | 'away' | 'offline';
+}
+export interface AppShellNotification {
+    id: string;
+    who: {
+        name: string;
+        initials: string;
+    };
+    action: ReactNode;
+    target: ReactNode;
+    when: ReactNode;
+    unread?: boolean;
+    onClick?: () => void;
+}
+export interface AppShellProfileMenuItem {
+    label: ReactNode;
+    icon?: ReactNode;
+    trailing?: ReactNode;
+    onSelect?: () => void;
+    /** Renders a separator before this item. */
+    separatorAbove?: boolean;
+}
 export interface AppShellProps {
     /** Page content. */
     children: ReactNode;
     /** Logo / wordmark rendered at the top of the sidebar. */
     brand: ReactNode;
-    /** Which sidebar item is active. Defaults to `home`. */
-    active?: AppShellNavKey;
+    /** Which sidebar item is active. Matches `AppShellNavItem.key`. Defaults to `'home'`. */
+    active?: string;
+    /**
+     * Sidebar nav sections. Defaults to the built-in demo nav. Pass an empty
+     * array to hide the nav entirely, or use `sidebar` for a fully custom rail.
+     */
+    navSections?: AppShellNavSection[];
+    /**
+     * Escape hatch: replace the entire Sidebar contents. Takes precedence over
+     * `navSections`. Use when you need custom section components, groups, etc.
+     */
+    sidebar?: ReactNode;
+    /** Slot for additional topbar actions (left of notifications). */
+    topbarActions?: ReactNode;
+    /** Topbar search input — pass `false` to hide. */
+    search?: ReactNode | false;
+    /** Currently signed-in user, shown in the sidebar footer + profile menu. */
+    user?: AppShellUser;
+    /** Profile dropdown items. Defaults to the demo Profile / Settings / Sign out menu. */
+    profileMenu?: AppShellProfileMenuItem[];
+    /** Notification feed. Set to an empty array to hide the bell entirely. */
+    notifications?: AppShellNotification[];
+    /** Fires when the user clicks "Mark all read". */
+    onMarkAllNotificationsRead?: () => void;
+    /** Fires when the user clicks "View all" in the notifications menu. */
+    onViewAllNotifications?: () => void;
+}
+/**
+ * AppShell — sticky sidebar + topbar shell for SaaS dashboards.
+ *
+ * @example Default — uses the built-in demo nav, user, notifications
+ *   <AppShell brand={<Logo />} active="home">
+ *     <Dashboard />
+ *   </AppShell>
+ *
+ * @example Custom nav + user
+ *   <AppShell
+ *     brand={<Logo />}
+ *     active="projects"
+ *     user={{ name: 'Avery Long', email: 'avery@acme.com', initials: 'AL', status: 'online' }}
+ *     navSections={[
+ *       { label: 'Workspace', items: [
+ *         { key: 'home', label: 'Home', icon: <Home />, href: '/' },
+ *         { key: 'projects', label: 'Projects', icon: <Folder />, href: '/projects',
+ *           trailing: <Badge tone="neutral">{count}</Badge> },
+ *       ]},
+ *     ]}
+ *     notifications={data?.notifications ?? []}
+ *   >
+ *     <ProjectsPage />
+ *   </AppShell>
+ */
+export declare function AppShell({ children, brand, active, navSections, sidebar, topbarActions, search, user, profileMenu, notifications, onMarkAllNotificationsRead, onViewAllNotifications, }: AppShellProps): import("react/jsx-runtime").JSX.Element;
+export interface DashboardStat {
+    label: ReactNode;
+    value: ReactNode;
+    delta?: {
+        value: string;
+        positive?: boolean;
+    };
+}
+export interface DashboardActivityRow {
+    id: string;
+    who: {
+        name: string;
+        initials: string;
+    };
+    action: ReactNode;
+    target: ReactNode;
+    when: ReactNode;
+}
+export interface DashboardProps {
+    /** Top heading. */
+    title?: ReactNode;
+    /** Subtitle below the heading. */
+    subtitle?: ReactNode;
+    /** Top-right slot (date-range picker, segmented control, …). */
+    headerActions?: ReactNode;
+    /** Stat cards rendered in a responsive grid. */
+    stats?: DashboardStat[];
+    /** Chart card — any ReactNode (Chart component, SVG, image, placeholder). */
+    chart?: ReactNode;
+    /** Title above the chart. */
+    chartTitle?: ReactNode;
+    /** Subtitle under the chart title. */
+    chartDescription?: ReactNode;
+    /** Activity table rows. */
+    activity?: DashboardActivityRow[];
+    /** Title for the activity table. */
+    activityTitle?: ReactNode;
 }
-export declare function AppShell({ children, brand, active }: AppShellProps): import("react/jsx-runtime").JSX.Element;
-export declare function Dashboard(): import("react/jsx-runtime").JSX.Element;
+export declare function Dashboard({ title, subtitle, headerActions, stats, chart, chartTitle, chartDescription, activity, activityTitle, }?: DashboardProps): import("react/jsx-runtime").JSX.Element;

package/dist-lib/components/patterns/DataTablePage.d.ts

@@ -1 +1,81 @@
-export declare function DataTablePage(): import("react/jsx-runtime").JSX.Element;
+import { ReactNode } from 'react';
+import { ButtonProps } from '../ui/Button';
+import { DataGridColumn } from '../ui/DataGrid';
+export interface DataTableFilter {
+    /** Field key used by the default predicate, and as the React key. */
+    key: string;
+    label: string;
+    /** First option should be the "all" / cleared value. */
+    options: {
+        value: string;
+        label: string;
+    }[];
+    /** Initial value. Defaults to the first option's value. */
+    defaultValue?: string;
+}
+export interface DataTableBulkAction<T> {
+    label: string;
+    /** Optional leading icon. */
+    icon?: ReactNode;
+    variant?: ButtonProps['variant'];
+    /** Receives the selected rows. Awaited — toolbar shows a spinner while pending. */
+    onAction: (selected: T[]) => void | Promise<void>;
+}
+export interface DataTablePageProps<T extends {
+    id: string | number;
+}> {
+    /** Page heading. */
+    title?: ReactNode;
+    /** Optional subtitle — defaults to a row-count line. */
+    subtitle?: ReactNode;
+    /** Right-aligned header actions (e.g. New / Import buttons). */
+    headerActions?: ReactNode;
+    /** Row data. */
+    rows?: T[];
+    /** Column descriptors. */
+    columns?: DataGridColumn<T>[];
+    /** Filter selects to render in the toolbar. */
+    filters?: DataTableFilter[];
+    /** Custom predicate. Receives the row + the active filter values. */
+    predicate?: (row: T, filterValues: Record<string, string>, search: string) => boolean;
+    /** Search placeholder. */
+    searchPlaceholder?: string;
+    /** Available rows-per-page sizes. */
+    pageSizeOptions?: number[];
+    /** Initial page size. */
+    defaultPageSize?: number;
+    /** Bulk-action buttons shown when rows are selected. */
+    bulkActions?: DataTableBulkAction<T>[];
+    /** EmptyState rendered when the filtered rows are empty. */
+    emptyState?: ReactNode;
+    className?: string;
+}
+/**
+ * Generic data-table page.
+ *
+ * @example
+ *   interface User { id: string; name: string; role: string; status: 'active' | 'invited' }
+ *
+ *   <DataTablePage<User>
+ *     title="Members"
+ *     rows={users}
+ *     columns={[
+ *       { key: 'name', header: 'Name', sortable: true },
+ *       { key: 'role', header: 'Role' },
+ *       { key: 'status', header: 'Status', cell: (r) => <Badge>{r.status}</Badge> },
+ *     ]}
+ *     filters={[
+ *       { key: 'status', label: 'Status', options: [
+ *         { value: 'all', label: 'All' },
+ *         { value: 'active', label: 'Active' },
+ *         { value: 'invited', label: 'Invited' },
+ *       ]},
+ *     ]}
+ *     bulkActions={[
+ *       { label: 'Remove', variant: 'destructive', onAction: (rows) => api.remove(rows) },
+ *     ]}
+ *   />
+ */
+export declare function DataTablePage<T extends {
+    id: string | number;
+}>({ title, subtitle, headerActions, rows: rowsProp, columns: columnsProp, filters: filtersProp, predicate, searchPlaceholder, pageSizeOptions, defaultPageSize, bulkActions: bulkActionsProp, emptyState, className, }?: DataTablePageProps<T>): import("react/jsx-runtime").JSX.Element;

package/dist-lib/components/patterns/FirstRunEmpty.d.ts

@@ -1 +1,39 @@
-export declare function FirstRunEmpty(): import("react/jsx-runtime").JSX.Element;
+import { ReactNode } from 'react';
+export interface FirstRunNextStep {
+    icon?: ReactNode;
+    title: string;
+    description: string;
+    cta: string;
+    onSelect?: () => void;
+}
+export interface FirstRunEmptyProps {
+    /** Hero icon — typically a folder, sparkles, or product mark. */
+    heroIcon?: ReactNode;
+    /** Hero title. */
+    title?: ReactNode;
+    /** Hero subtitle. */
+    description?: ReactNode;
+    /** Primary CTA inside the hero (top tutorial / overview action). */
+    primaryAction?: ReactNode;
+    /** Next-step cards rendered below the hero. */
+    steps?: FirstRunNextStep[];
+    className?: string;
+}
+/**
+ * First-run empty product state.
+ *
+ * @example Default (uses built-in placeholder copy)
+ *   <FirstRunEmpty />
+ *
+ * @example Customized
+ *   <FirstRunEmpty
+ *     heroIcon={<Illustrations.InboxEmpty className="size-16" />}
+ *     title="Welcome to Atlas"
+ *     description="Pick a starting point."
+ *     steps={[
+ *       { icon: <Plus />, title: 'New project', description: '…', cta: 'Create' },
+ *       { icon: <Github />, title: 'Import repo', description: '…', cta: 'Connect' },
+ *     ]}
+ *   />
+ */
+export declare function FirstRunEmpty({ heroIcon, title, description, primaryAction, steps, className, }?: FirstRunEmptyProps): import("react/jsx-runtime").JSX.Element;

package/dist-lib/components/patterns/Onboarding.d.ts

@@ -1 +1,65 @@
-export declare function Onboarding(): import("react/jsx-runtime").JSX.Element;
+import { ReactNode } from 'react';
+export interface OnboardingStepContext<T = unknown> {
+    /** Move to the next step. */
+    next: () => void;
+    /** Move to the previous step. */
+    prev: () => void;
+    /** Jump to a step by index. */
+    goTo: (index: number) => void;
+    /** Finish the flow — calls onComplete. */
+    finish: () => void;
+    /** Current accumulated data across steps. */
+    data: T;
+    /** Patch the accumulated data. */
+    setData: (patch: Partial<T>) => void;
+}
+export interface OnboardingStep<T = unknown> {
+    /** Stable id used for keys + analytics. */
+    id: string;
+    /** Title shown in the Stepper. */
+    title: string;
+    /** Optional sub-description shown only in vertical Stepper. */
+    description?: string;
+    /** Card heading rendered when the step is active. */
+    heading: ReactNode;
+    /** Card description rendered under the heading. */
+    subheading?: ReactNode;
+    /** Step body. Receives navigation controls + shared data. */
+    render: (ctx: OnboardingStepContext<T>) => ReactNode;
+    /** Override the Continue / Finish button label. */
+    ctaLabel?: string;
+    /** Hide the default Back/Next bar — render your own inside `render`. */
+    hideNavigation?: boolean;
+}
+export interface OnboardingProps<T = unknown> {
+    steps?: OnboardingStep<T>[];
+    /** Initial accumulated data. */
+    initialData?: T;
+    /** Called when the user advances past the last step. */
+    onComplete?: (data: T) => void | Promise<void>;
+    className?: string;
+}
+interface DemoData {
+    workspaceName?: string;
+    slug?: string;
+    inviteEmail?: string;
+    role?: string;
+    source?: string;
+}
+/**
+ * Multi-step onboarding wizard.
+ *
+ * @example
+ *   <Onboarding<{ name: string; email: string }>
+ *     initialData={{ name: '', email: '' }}
+ *     steps={[
+ *       { id: 'name', title: 'Name', heading: 'What should we call you?',
+ *         render: ({ data, setData }) =>
+ *           <Input value={data.name} onChange={(e) => setData({ name: e.target.value })} /> },
+ *       …
+ *     ]}
+ *     onComplete={async (data) => api.completeOnboarding(data)}
+ *   />
+ */
+export declare function Onboarding<T = DemoData>({ steps, initialData, onComplete, className, }?: OnboardingProps<T>): import("react/jsx-runtime").JSX.Element;
+export {};

package/dist-lib/components/patterns/Pricing.d.ts

@@ -1 +1,40 @@
-export declare function Pricing(): import("react/jsx-runtime").JSX.Element;
+import { ReactNode } from 'react';
+export interface PricingTier {
+    name: string;
+    /** Price string. Pre-formatted — render '$0', '$20', 'Custom', '¥1,200', etc. */
+    price: string;
+    /** Cadence label rendered next to the price ('per user / month'). */
+    cadence?: string;
+    description?: string;
+    features: string[];
+    /** CTA label. */
+    cta: string;
+    /** Mark this tier as the recommended one — adds accent border + badge. */
+    highlighted?: boolean;
+    /** Click handler for the CTA. */
+    onSelect?: () => void;
+}
+export interface PricingProps {
+    /** Top heading. */
+    title?: ReactNode;
+    /** Subtitle under the heading. */
+    subtitle?: ReactNode;
+    /** Tier descriptors. */
+    tiers?: PricingTier[];
+    /** Label shown on the highlighted tier badge. */
+    highlightedLabel?: string;
+    className?: string;
+}
+/**
+ * Pricing grid. Defaults to a 3-tier demo if `tiers` is omitted.
+ *
+ * @example
+ *   <Pricing
+ *     title="Plans"
+ *     tiers={[
+ *       { name: 'Free', price: '$0', features: ['…'], cta: 'Start' },
+ *       { name: 'Pro', price: '$12', features: ['…'], cta: 'Upgrade', highlighted: true },
+ *     ]}
+ *   />
+ */
+export declare function Pricing({ title, subtitle, tiers, highlightedLabel, className, }?: PricingProps): import("react/jsx-runtime").JSX.Element;

package/dist-lib/components/patterns/RecordDetail.d.ts

@@ -1 +1,48 @@
-export declare function RecordDetail(): import("react/jsx-runtime").JSX.Element;
+import { ReactNode } from 'react';
+export interface RecordDetailHeader {
+    title: ReactNode;
+    subtitle?: ReactNode;
+    /** Optional status pill rendered next to the title. */
+    status?: ReactNode;
+    /** Right-aligned action buttons. */
+    actions?: ReactNode;
+    /** Breadcrumb trail rendered above the header. */
+    breadcrumbs?: {
+        label: ReactNode;
+        href?: string;
+    }[];
+}
+export interface RecordDetailTab {
+    id: string;
+    label: ReactNode;
+    render: () => ReactNode;
+}
+export interface RecordDetailProps {
+    header?: RecordDetailHeader;
+    tabs?: RecordDetailTab[];
+    /** Initial tab id. Defaults to the first tab. */
+    defaultTab?: string;
+    /** Optional right-side panel (related items, details list, watchers, …). */
+    sidePanel?: ReactNode;
+    className?: string;
+}
+/**
+ * Record detail page — header (breadcrumbs + title + actions) + tabs + side panel.
+ *
+ * @example
+ *   <RecordDetail
+ *     header={{
+ *       title: project.name,
+ *       subtitle: project.description,
+ *       status: <Badge tone="success">Active</Badge>,
+ *       actions: <Button>Share</Button>,
+ *       breadcrumbs: [{ label: 'Projects', href: '/projects' }, { label: project.name }],
+ *     }}
+ *     tabs={[
+ *       { id: 'overview', label: 'Overview', render: () => <Overview project={project} /> },
+ *       { id: 'activity', label: 'Activity', render: () => <Activity projectId={project.id} /> },
+ *     ]}
+ *     sidePanel={<RelatedItems project={project} />}
+ *   />
+ */
+export declare function RecordDetail({ header, tabs, defaultTab, sidePanel, className, }?: RecordDetailProps): import("react/jsx-runtime").JSX.Element;

package/dist-lib/components/patterns/Settings.d.ts

@@ -1 +1,34 @@
-export declare function SettingsPage(): import("react/jsx-runtime").JSX.Element;
+import { ReactNode } from 'react';
+export interface SettingsSection {
+    id: string;
+    label: string;
+    icon?: ReactNode;
+    render: () => ReactNode;
+}
+export interface SettingsPageProps {
+    /** Page title — defaults to "Settings". */
+    title?: ReactNode;
+    /** Subtitle under the heading. */
+    subtitle?: ReactNode;
+    sections?: SettingsSection[];
+    /** Initially active section id. Defaults to the first section. */
+    defaultSection?: string;
+    /** Controlled active section id. */
+    activeSection?: string;
+    /** Fires when the active section changes (controlled mode). */
+    onActiveSectionChange?: (id: string) => void;
+    className?: string;
+}
+/**
+ * Settings page with a sticky sub-nav on the left and section cards on the right.
+ *
+ * @example
+ *   <SettingsPage
+ *     sections={[
+ *       { id: 'profile', label: 'Profile', icon: <User />, render: () => <ProfileForm /> },
+ *       { id: 'team', label: 'Team', icon: <Users />, render: () => <TeamForm /> },
+ *     ]}
+ *     defaultSection="profile"
+ *   />
+ */
+export declare function SettingsPage({ title, subtitle, sections, defaultSection, activeSection, onActiveSectionChange, className, }?: SettingsPageProps): import("react/jsx-runtime").JSX.Element;

package/dist-lib/components/ui/EmptyState.d.ts

@@ -1,7 +1,16 @@
 import { HTMLAttributes, ReactNode } from 'react';
 export interface EmptyStateProps extends Omit<HTMLAttributes<HTMLDivElement>, 'title'> {
-    /** Visual marker — small Lucide icon or custom illustration. */
+    /**
+     * Small Lucide-sized icon rendered inside a 48px circular container.
+     * Use for compact empty states (table cells, sidebar panes, cards).
+     */
     icon?: ReactNode;
+    /**
+     * Full-size illustration rendered without the icon container. Takes
+     * precedence over `icon`. If neither is set, the default `InboxEmpty`
+     * line illustration is used.
+     */
+    illustration?: ReactNode;
     /** Heading. One short sentence. */
     title: ReactNode;
     /** Description. One or two sentences max. */
@@ -15,17 +24,23 @@ export interface EmptyStateProps extends Omit<HTMLAttributes<HTMLDivElement>, 't
  * Shown when a list / dataset / surface has no content yet. Tone is helpful,
  * never apologetic.
  *
- * @example
+ * @example Default — uses the built-in InboxEmpty illustration
  *   <EmptyState
- *     icon={<Folder className="size-6" />}
  *     title="No projects yet"
  *     description="Create a project to start tracking work."
  *     action={<Button>New project</Button>}
  *   />
  *
- * @do Lead with the next action. The icon is decoration; the button is the
- *      point.
- * @dont Use elaborate illustrations on internal product surfaces — they
- *       break the refined-minimal direction.
+ * @example Compact — small Lucide icon for dense layouts
+ *   <EmptyState
+ *     icon={<Folder className="size-6" />}
+ *     title="No items"
+ *   />
+ *
+ * @example Custom illustration
+ *   <EmptyState
+ *     illustration={<Illustrations.NoSearchResults className="size-32" />}
+ *     title="No results"
+ *   />
  */
 export declare const EmptyState: import('react').ForwardRefExoticComponent<EmptyStateProps & import('react').RefAttributes<HTMLDivElement>>;

package/dist-lib/components/ui/ErrorState.d.ts

@@ -6,6 +6,11 @@ export interface ErrorStateProps extends Omit<HTMLAttributes<HTMLDivElement>, 't
     title?: ReactNode;
     /** Override the default description. */
     description?: ReactNode;
+    /**
+     * Override the variant's default illustration. Pass any ReactNode (e.g.
+     * `<Illustrations.Construction className="size-32" />`).
+     */
+    illustration?: ReactNode;
     /** Custom action node. Replaces the default retry button. */
     action?: ReactNode;
     /** When provided, renders a default "Try again" button calling this handler. */
@@ -14,13 +19,19 @@ export interface ErrorStateProps extends Omit<HTMLAttributes<HTMLDivElement>, 't
 /**
  * Page-level error placeholder. Pair with `onRetry` for transient failures.
  *
- * @example 500
+ * @example 404 (uses built-in line illustration)
+ *   <ErrorState variant="404" />
+ *
+ * @example 500 with retry
  *   <ErrorState variant="500" onRetry={refetch} />
  *
  * @example Custom
- *   <ErrorState title="Quota exceeded"
- *               description="Your plan allows 1,000 events/day."
- *               action={<Button>Upgrade plan</Button>} />
+ *   <ErrorState
+ *     title="Quota exceeded"
+ *     description="Your plan allows 1,000 events/day."
+ *     illustration={<Illustrations.Construction className="size-32" />}
+ *     action={<Button>Upgrade plan</Button>}
+ *   />
  *
  * @do Match the tone to the cause — server errors apologise, user errors
  *      explain. Always offer a next step.

package/dist-lib/icons/index.d.ts

@@ -8,4 +8,4 @@
  *   - 20px for use inside buttons
  *   - strokeWidth 1.5
  */
-export { AlertCircle, AlertTriangle, ArrowDown, ArrowLeft, ArrowRight, ArrowUp, ArrowUpDown, BarChart3, Bell, Bookmark, Calendar, Check, CheckCircle2, ChevronDown, ChevronLeft, ChevronRight, ChevronUp, ChevronsLeft, ChevronsRight, ChevronsUpDown, Circle, Copy, CornerDownLeft, CreditCard, Download, Edit2, Ellipsis, Eye, EyeOff, Filter, Folder, GripVertical, Home, Inbox, LayoutGrid, Lock, LogOut, HelpCircle, Info, Link2, Loader2, Mail, Menu, Minus, MoreHorizontal, Plug, Plus, Search, Sparkles, Settings, Sun, Moon, Trash2, Upload, User, Users, X, XCircle, ExternalLink, type LucideIcon, type LucideProps, } from 'lucide-react';
+export { AlertCircle, AlertTriangle, ArrowDown, ArrowLeft, ArrowRight, ArrowUp, ArrowUpDown, AtSign, BarChart3, Bell, Bookmark, Calendar, Check, CheckCircle2, ChevronDown, ChevronLeft, ChevronRight, ChevronUp, ChevronsLeft, ChevronsRight, ChevronsUpDown, Circle, Copy, CornerDownLeft, CreditCard, Download, Edit2, Ellipsis, Eye, EyeOff, Filter, Folder, GripVertical, Home, Inbox, LayoutGrid, Lock, LogOut, HelpCircle, Info, Link2, Loader2, Mail, Menu, Minus, MoreHorizontal, Package, Plug, Plus, Search, Sparkles, Settings, Sun, Moon, Trash2, Upload, User, Users, X, XCircle, ExternalLink, type LucideIcon, type LucideProps, } from 'lucide-react';