@nextlyhq/ui 0.0.2-alpha.34 → 0.0.2-alpha.37
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/dist/index.cjs +190 -462
- package/dist/index.cjs.map +1 -1
- package/dist/index.d.cts +53 -146
- package/dist/index.d.ts +53 -146
- package/dist/index.mjs +190 -463
- package/dist/index.mjs.map +1 -1
- package/dist/styles.css +1 -1
- package/dist/theme.css +327 -179
- package/package.json +11 -8
package/dist/index.d.cts
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
import * as class_variance_authority_types from 'class-variance-authority/types';
|
|
2
2
|
import * as react from 'react';
|
|
3
|
-
import { ButtonHTMLAttributes, ComponentProps, TextareaHTMLAttributes, HTMLAttributes,
|
|
3
|
+
import { ButtonHTMLAttributes, ComponentProps, TextareaHTMLAttributes, HTMLAttributes, ReactNode, ComponentPropsWithoutRef } from 'react';
|
|
4
4
|
import * as class_variance_authority from 'class-variance-authority';
|
|
5
5
|
import { VariantProps } from 'class-variance-authority';
|
|
6
6
|
import * as react_jsx_runtime from 'react/jsx-runtime';
|
|
@@ -218,6 +218,33 @@ declare const CardContent: react.ForwardRefExoticComponent<CardContentProps & re
|
|
|
218
218
|
type CardFooterProps = HTMLAttributes<HTMLDivElement>;
|
|
219
219
|
declare const CardFooter: react.ForwardRefExoticComponent<CardFooterProps & react.RefAttributes<HTMLDivElement>>;
|
|
220
220
|
|
|
221
|
+
type Gap = 0 | 1 | 2 | 3 | 4 | 6 | 8;
|
|
222
|
+
type Cols = 1 | 2 | 3 | 4 | 6;
|
|
223
|
+
interface StackProps extends HTMLAttributes<HTMLDivElement> {
|
|
224
|
+
/** Main-axis direction. Default `col`. */
|
|
225
|
+
direction?: "col" | "row";
|
|
226
|
+
/** Gap between children (Tailwind spacing step). Default `4`. */
|
|
227
|
+
gap?: Gap;
|
|
228
|
+
}
|
|
229
|
+
/** Flex stack: vertical by default, horizontal with `direction="row"`. */
|
|
230
|
+
declare const Stack: react.ForwardRefExoticComponent<StackProps & react.RefAttributes<HTMLDivElement>>;
|
|
231
|
+
interface GridProps extends HTMLAttributes<HTMLDivElement> {
|
|
232
|
+
/** Column count. Default `2`. */
|
|
233
|
+
cols?: Cols;
|
|
234
|
+
/** Gap between cells. Default `4`. */
|
|
235
|
+
gap?: Gap;
|
|
236
|
+
}
|
|
237
|
+
/** Simple fixed-column grid. */
|
|
238
|
+
declare const Grid: react.ForwardRefExoticComponent<GridProps & react.RefAttributes<HTMLDivElement>>;
|
|
239
|
+
interface StatProps extends HTMLAttributes<HTMLDivElement> {
|
|
240
|
+
/** Muted label above the value. */
|
|
241
|
+
label: string;
|
|
242
|
+
/** The emphasized value (string or node). */
|
|
243
|
+
value: ReactNode;
|
|
244
|
+
}
|
|
245
|
+
/** Labelled metric block for dashboard-style plugin widgets. */
|
|
246
|
+
declare const Stat: react.ForwardRefExoticComponent<StatProps & react.RefAttributes<HTMLDivElement>>;
|
|
247
|
+
|
|
221
248
|
/**
|
|
222
249
|
* Alert Component - Design System Specification
|
|
223
250
|
*
|
|
@@ -442,7 +469,7 @@ type ProgressProps = {
|
|
|
442
469
|
* Visual variant for different states
|
|
443
470
|
*
|
|
444
471
|
* - `default`: Primary blue (bg-primary-500)
|
|
445
|
-
* - `success`: Green (bg-
|
|
472
|
+
* - `success`: Green (bg-success-500)
|
|
446
473
|
* - `error`: Red (bg-destructive)
|
|
447
474
|
*
|
|
448
475
|
* @default "default"
|
|
@@ -509,7 +536,7 @@ declare const Progress: react.ForwardRefExoticComponent<{
|
|
|
509
536
|
* Visual variant for different states
|
|
510
537
|
*
|
|
511
538
|
* - `default`: Primary blue (bg-primary-500)
|
|
512
|
-
* - `success`: Green (bg-
|
|
539
|
+
* - `success`: Green (bg-success-500)
|
|
513
540
|
* - `error`: Red (bg-destructive)
|
|
514
541
|
*
|
|
515
542
|
* @default "default"
|
|
@@ -1945,9 +1972,9 @@ declare const Spinner: react.ForwardRefExoticComponent<Omit<SpinnerProps, "ref">
|
|
|
1945
1972
|
*
|
|
1946
1973
|
* Customization:
|
|
1947
1974
|
* All styling uses CSS variables from the design system:
|
|
1948
|
-
* - --normal-bg: Background color (uses --popover with fallback)
|
|
1949
|
-
* - --normal-text: Text color (uses --popover-foreground with fallback)
|
|
1950
|
-
* - --normal-border: Border color (uses --border with fallback)
|
|
1975
|
+
* - --normal-bg: Background color (uses --nx-popover with fallback)
|
|
1976
|
+
* - --normal-text: Text color (uses --nx-popover-foreground with fallback)
|
|
1977
|
+
* - --normal-border: Border color (uses --nx-border with fallback)
|
|
1951
1978
|
* - --border-radius: Border radius (uses --radius with fallback)
|
|
1952
1979
|
*
|
|
1953
1980
|
* Security:
|
|
@@ -2047,6 +2074,22 @@ interface TableEmptyProps {
|
|
|
2047
2074
|
*/
|
|
2048
2075
|
declare function TableEmpty({ message }: TableEmptyProps): react_jsx_runtime.JSX.Element;
|
|
2049
2076
|
|
|
2077
|
+
/**
|
|
2078
|
+
* TableSkeleton Component
|
|
2079
|
+
*
|
|
2080
|
+
* Generic loading skeleton for data tables.
|
|
2081
|
+
* Renders header, body, and footer skeleton bars inside a card.
|
|
2082
|
+
* Unified with EntryTable skeleton pattern for consistency across all tables.
|
|
2083
|
+
*/
|
|
2084
|
+
|
|
2085
|
+
interface TableSkeletonProps {
|
|
2086
|
+
columns?: number;
|
|
2087
|
+
rowCount?: number;
|
|
2088
|
+
hideWrapper?: boolean;
|
|
2089
|
+
hideFooter?: boolean;
|
|
2090
|
+
}
|
|
2091
|
+
declare const TableSkeleton: react.FC<TableSkeletonProps>;
|
|
2092
|
+
|
|
2050
2093
|
interface PaginationMeta {
|
|
2051
2094
|
total: number;
|
|
2052
2095
|
page: number;
|
|
@@ -2088,129 +2131,6 @@ interface ActionCallbacks<TData = unknown> {
|
|
|
2088
2131
|
}
|
|
2089
2132
|
type DataFetcher<TData> = (params: TableParams) => Promise<ListResponse<TData>>;
|
|
2090
2133
|
|
|
2091
|
-
/**
|
|
2092
|
-
* Props for TablePagination component
|
|
2093
|
-
*/
|
|
2094
|
-
interface TablePaginationProps {
|
|
2095
|
-
/** Pagination metadata from server */
|
|
2096
|
-
meta: PaginationMeta;
|
|
2097
|
-
/** Callback when page changes */
|
|
2098
|
-
onPageChange: (page: number) => void;
|
|
2099
|
-
/** Callback when page size changes */
|
|
2100
|
-
onPageSizeChange: (pageSize: number) => void;
|
|
2101
|
-
/** Pagination configuration */
|
|
2102
|
-
config?: Required<PaginationConfig>;
|
|
2103
|
-
/** Whether data is currently loading */
|
|
2104
|
-
isLoading?: boolean;
|
|
2105
|
-
}
|
|
2106
|
-
/**
|
|
2107
|
-
* Pagination controls for tables
|
|
2108
|
-
*/
|
|
2109
|
-
declare function TablePagination({ meta, onPageChange, onPageSizeChange, config, isLoading, }: TablePaginationProps): react_jsx_runtime.JSX.Element;
|
|
2110
|
-
|
|
2111
|
-
/**
|
|
2112
|
-
* TableSkeleton Component
|
|
2113
|
-
*
|
|
2114
|
-
* Generic loading skeleton for data tables.
|
|
2115
|
-
* Renders header, body, and footer skeleton bars inside a card.
|
|
2116
|
-
* Unified with EntryTable skeleton pattern for consistency across all tables.
|
|
2117
|
-
*/
|
|
2118
|
-
|
|
2119
|
-
interface TableSkeletonProps {
|
|
2120
|
-
columns?: number;
|
|
2121
|
-
rowCount?: number;
|
|
2122
|
-
hideWrapper?: boolean;
|
|
2123
|
-
hideFooter?: boolean;
|
|
2124
|
-
}
|
|
2125
|
-
declare const TableSkeleton: react.FC<TableSkeletonProps>;
|
|
2126
|
-
|
|
2127
|
-
/**
|
|
2128
|
-
* Column definition for ResponsiveTable
|
|
2129
|
-
*
|
|
2130
|
-
* Provides type-safe column definitions with proper type narrowing for render functions.
|
|
2131
|
-
*
|
|
2132
|
-
* @template T - The data type of items in the table
|
|
2133
|
-
* @template K - The specific key from T (defaults to any key of T)
|
|
2134
|
-
*
|
|
2135
|
-
* @example
|
|
2136
|
-
* ```tsx
|
|
2137
|
-
* interface User {
|
|
2138
|
-
* id: string;
|
|
2139
|
-
* name: string;
|
|
2140
|
-
* age: number;
|
|
2141
|
-
* }
|
|
2142
|
-
*
|
|
2143
|
-
* // Type-safe column definition with proper inference
|
|
2144
|
-
* const columns: Column<User>[] = [
|
|
2145
|
-
* {
|
|
2146
|
-
* key: "name",
|
|
2147
|
-
* label: "Name",
|
|
2148
|
-
* // value is inferred as string, not string | number
|
|
2149
|
-
* render: (value, user) => <strong>{value}</strong>
|
|
2150
|
-
* },
|
|
2151
|
-
* {
|
|
2152
|
-
* key: "age",
|
|
2153
|
-
* label: "Age",
|
|
2154
|
-
* // value is inferred as number, not string | number
|
|
2155
|
-
* render: (value) => `${value} years old`
|
|
2156
|
-
* }
|
|
2157
|
-
* ];
|
|
2158
|
-
* ```
|
|
2159
|
-
*/
|
|
2160
|
-
type Column<T, K extends keyof T = keyof T> = {
|
|
2161
|
-
/** Unique key for the column (must match a property in T) */
|
|
2162
|
-
key: K;
|
|
2163
|
-
/** Display label for the column header */
|
|
2164
|
-
label: react.ReactNode;
|
|
2165
|
-
/** Optional custom renderer for cell content with type-safe value */
|
|
2166
|
-
render?: (value: T[K], item: T) => react.ReactNode;
|
|
2167
|
-
/** Hide column on mobile card view (optional, default: false) */
|
|
2168
|
-
hideOnMobile?: boolean;
|
|
2169
|
-
/** Hide the label on mobile card view (optional, default: false) */
|
|
2170
|
-
hideLabelOnMobile?: boolean;
|
|
2171
|
-
/** Optional custom className for the table header cell */
|
|
2172
|
-
headerClassName?: string;
|
|
2173
|
-
/** Optional custom className for the table body cell */
|
|
2174
|
-
cellClassName?: string;
|
|
2175
|
-
};
|
|
2176
|
-
/**
|
|
2177
|
-
* Props for ResponsiveTable component
|
|
2178
|
-
*
|
|
2179
|
-
* @template T - The data type of items in the table, must have an 'id' property
|
|
2180
|
-
*/
|
|
2181
|
-
type ResponsiveTableProps<T extends {
|
|
2182
|
-
id: string;
|
|
2183
|
-
}> = {
|
|
2184
|
-
/** Array of data items to display */
|
|
2185
|
-
data: T[];
|
|
2186
|
-
/** Array of column definitions */
|
|
2187
|
-
columns: Column<T>[];
|
|
2188
|
-
/** Optional callback when a row/card is clicked */
|
|
2189
|
-
onRowClick?: (item: T) => void;
|
|
2190
|
-
/** Optional custom renderer for mobile card view */
|
|
2191
|
-
renderMobileCard?: (item: T, columns: Column<T>[]) => react.ReactNode;
|
|
2192
|
-
/** Optional custom className for the container */
|
|
2193
|
-
className?: string;
|
|
2194
|
-
/** Optional empty state message */
|
|
2195
|
-
emptyMessage?: string;
|
|
2196
|
-
/** Optional ARIA label for the table (improves screen reader experience) */
|
|
2197
|
-
ariaLabel?: string;
|
|
2198
|
-
/** Optional custom className for the internal desktop table wrapper */
|
|
2199
|
-
tableWrapperClassName?: string;
|
|
2200
|
-
/** Optional footer content rendered inside the table card (e.g. Pagination) */
|
|
2201
|
-
footer?: react.ReactNode;
|
|
2202
|
-
};
|
|
2203
|
-
/**
|
|
2204
|
-
* Ref type for ResponsiveTable component
|
|
2205
|
-
*/
|
|
2206
|
-
type ResponsiveTableRef = HTMLDivElement;
|
|
2207
|
-
|
|
2208
|
-
declare const ResponsiveTable: <T extends {
|
|
2209
|
-
id: string;
|
|
2210
|
-
}>(props: ResponsiveTableProps<T> & {
|
|
2211
|
-
ref?: react.ForwardedRef<HTMLDivElement>;
|
|
2212
|
-
}) => react.ReactElement;
|
|
2213
|
-
|
|
2214
2134
|
interface PortalProviderProps {
|
|
2215
2135
|
/** The DOM element to portal overlay content into. Defaults to document.body (Radix default). */
|
|
2216
2136
|
container: HTMLElement | null;
|
|
@@ -2228,26 +2148,11 @@ declare function usePortalContainer(): HTMLElement | undefined;
|
|
|
2228
2148
|
* @example
|
|
2229
2149
|
* ```typescript
|
|
2230
2150
|
* cn('px-2 py-1', 'px-4') // => 'py-1 px-4'
|
|
2231
|
-
* cn('text-
|
|
2151
|
+
* cn('text-muted-foreground', condition && 'text-foreground')
|
|
2232
2152
|
* ```
|
|
2233
2153
|
*/
|
|
2234
2154
|
declare function cn(...inputs: ClassValue[]): string;
|
|
2235
2155
|
|
|
2236
|
-
/**
|
|
2237
|
-
* Tailwind CSS preset for @nextlyhq/ui components.
|
|
2238
|
-
*
|
|
2239
|
-
* Defines the CSS custom property contract that all UI components expect.
|
|
2240
|
-
* Consumers must provide the actual CSS variable values in their stylesheets.
|
|
2241
|
-
*
|
|
2242
|
-
* Usage (Tailwind v3):
|
|
2243
|
-
* // tailwind.config.ts
|
|
2244
|
-
* import uiPreset from "@nextlyhq/ui/tailwind-preset";
|
|
2245
|
-
* export default { presets: [uiPreset], ... };
|
|
2246
|
-
*
|
|
2247
|
-
* Usage (Tailwind v4 with @config):
|
|
2248
|
-
* Consumers define the equivalent @theme tokens in their CSS.
|
|
2249
|
-
* This file serves as the reference contract.
|
|
2250
|
-
*/
|
|
2251
2156
|
declare const uiPreset: {
|
|
2252
2157
|
theme: {
|
|
2253
2158
|
extend: {
|
|
@@ -2267,10 +2172,12 @@ declare const uiPreset: {
|
|
|
2267
2172
|
};
|
|
2268
2173
|
destructive: {
|
|
2269
2174
|
DEFAULT: string;
|
|
2175
|
+
solid: string;
|
|
2270
2176
|
foreground: string;
|
|
2271
2177
|
};
|
|
2272
2178
|
success: {
|
|
2273
2179
|
DEFAULT: string;
|
|
2180
|
+
solid: string;
|
|
2274
2181
|
foreground: string;
|
|
2275
2182
|
};
|
|
2276
2183
|
warning: {
|
|
@@ -2325,4 +2232,4 @@ declare const uiPreset: {
|
|
|
2325
2232
|
};
|
|
2326
2233
|
};
|
|
2327
2234
|
|
|
2328
|
-
export { Accordion, AccordionContent, type AccordionContentProps, AccordionItem, type AccordionItemProps, type AccordionProps, AccordionTrigger, type AccordionTriggerProps, type ActionCallbacks, Alert, AlertDescription, type AlertDescriptionProps, AlertDialog, AlertDialogAction, type AlertDialogActionProps, AlertDialogCancel, type AlertDialogCancelProps, AlertDialogContent, type AlertDialogContentProps, AlertDialogDescription, type AlertDialogDescriptionProps, AlertDialogFooter, type AlertDialogFooterProps, AlertDialogHeader, type AlertDialogHeaderProps, AlertDialogOverlay, type AlertDialogOverlayProps, AlertDialogPortal, AlertDialogTitle, type AlertDialogTitleProps, AlertDialogTrigger, type AlertProps, AlertTitle, type AlertTitleProps, Avatar, AvatarFallback, type AvatarFallbackProps, AvatarImage, type AvatarImageProps, type AvatarProps, Badge, type BadgeProps, Button, type ButtonProps, Card, CardAction, type CardActionProps, CardContent, type CardContentProps, CardDescription, type CardDescriptionProps, CardFooter, type CardFooterProps, CardHeader, type CardHeaderProps, type CardProps, CardTitle, type CardTitleProps, Checkbox, Collapsible, CollapsibleContent, CollapsibleTrigger,
|
|
2235
|
+
export { Accordion, AccordionContent, type AccordionContentProps, AccordionItem, type AccordionItemProps, type AccordionProps, AccordionTrigger, type AccordionTriggerProps, type ActionCallbacks, Alert, AlertDescription, type AlertDescriptionProps, AlertDialog, AlertDialogAction, type AlertDialogActionProps, AlertDialogCancel, type AlertDialogCancelProps, AlertDialogContent, type AlertDialogContentProps, AlertDialogDescription, type AlertDialogDescriptionProps, AlertDialogFooter, type AlertDialogFooterProps, AlertDialogHeader, type AlertDialogHeaderProps, AlertDialogOverlay, type AlertDialogOverlayProps, AlertDialogPortal, AlertDialogTitle, type AlertDialogTitleProps, AlertDialogTrigger, type AlertProps, AlertTitle, type AlertTitleProps, Avatar, AvatarFallback, type AvatarFallbackProps, AvatarImage, type AvatarImageProps, type AvatarProps, Badge, type BadgeProps, Button, type ButtonProps, Card, CardAction, type CardActionProps, CardContent, type CardContentProps, CardDescription, type CardDescriptionProps, CardFooter, type CardFooterProps, CardHeader, type CardHeaderProps, type CardProps, CardTitle, type CardTitleProps, Checkbox, Collapsible, CollapsibleContent, CollapsibleTrigger, Command, CommandDialog, type CommandDialogProps, CommandEmpty, type CommandEmptyProps, CommandGroup, type CommandGroupProps, CommandInput, type CommandInputProps, CommandItem, type CommandItemProps, CommandList, type CommandListProps, type CommandProps, CommandSeparator, type CommandSeparatorProps, CommandShortcut, type CommandShortcutProps, type DataFetcher, Dialog, DialogClose, DialogContent, type DialogContentProps, DialogDescription, type DialogDescriptionProps, DialogFooter, type DialogFooterProps, DialogHeader, type DialogHeaderProps, DialogOverlay, type DialogOverlayProps, DialogPortal, DialogTitle, type DialogTitleProps, DialogTrigger, DropdownMenu, DropdownMenuCheckboxItem, type DropdownMenuCheckboxItemProps, DropdownMenuContent, type DropdownMenuContentProps, DropdownMenuGroup, DropdownMenuItem, type DropdownMenuItemProps, DropdownMenuLabel, type DropdownMenuLabelProps, DropdownMenuPortal, DropdownMenuRadioGroup, DropdownMenuRadioItem, type DropdownMenuRadioItemProps, DropdownMenuSeparator, type DropdownMenuSeparatorProps, DropdownMenuShortcut, type DropdownMenuShortcutProps, DropdownMenuSub, DropdownMenuSubContent, type DropdownMenuSubContentProps, DropdownMenuSubTrigger, type DropdownMenuSubTriggerProps, DropdownMenuTrigger, type FilterInfo, FormLabelWithTooltip, type FormLabelWithTooltipProps, Grid, type GridProps, Input, type InputProps, Label, type ListResponse, type PaginationConfig, type PaginationMeta, Popover, PopoverAnchor, PopoverContent, PopoverTrigger, PortalProvider, Progress, type ProgressProps, RadioGroup, RadioGroupItem, Select, SelectContent, SelectGroup, SelectItem, SelectLabel, SelectScrollDownButton, SelectScrollUpButton, SelectSeparator, SelectTrigger, type SelectTriggerProps, SelectValue, Separator, Sheet, SheetClose, type SheetCloseProps, SheetContent, type SheetContentProps, type SheetContentRef, SheetDescription, type SheetDescriptionProps, type SheetDescriptionRef, SheetFooter, type SheetFooterProps, SheetHeader, type SheetHeaderProps, SheetOverlay, type SheetOverlayProps, type SheetOverlayRef, SheetPortal, type SheetProps, SheetTitle, type SheetTitleProps, type SheetTitleRef, SheetTrigger, type SheetTriggerProps, Skeleton, type SkeletonProps, type SortInfo, Spinner, type SpinnerProps, Stack, type StackProps, Stat, type StatProps, Switch, Table, TableBody, TableCaption, TableCell, TableEmpty, type TableEmptyProps, TableError, type TableErrorProps, TableFooter, TableHead, TableHeader, TableLoading, type TableParams, TableRow, TableSearch, type TableSearchProps, TableSkeleton, type TableSkeletonProps, Tabs, TabsContent, type TabsContentProps, TabsList, type TabsListProps, type TabsProps, TabsTrigger, type TabsTriggerProps, Textarea, Toaster, Tooltip, TooltipContent, TooltipProvider, TooltipTrigger, alertVariants, avatarVariants, badgeVariants, buttonVariants, cardVariants, cn, dialogContentVariants, inputVariants, progressVariants, selectTriggerVariants, sheetVariants, spinnerVariants, uiPreset, usePortalContainer };
|
package/dist/index.d.ts
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
import * as class_variance_authority_types from 'class-variance-authority/types';
|
|
2
2
|
import * as react from 'react';
|
|
3
|
-
import { ButtonHTMLAttributes, ComponentProps, TextareaHTMLAttributes, HTMLAttributes,
|
|
3
|
+
import { ButtonHTMLAttributes, ComponentProps, TextareaHTMLAttributes, HTMLAttributes, ReactNode, ComponentPropsWithoutRef } from 'react';
|
|
4
4
|
import * as class_variance_authority from 'class-variance-authority';
|
|
5
5
|
import { VariantProps } from 'class-variance-authority';
|
|
6
6
|
import * as react_jsx_runtime from 'react/jsx-runtime';
|
|
@@ -218,6 +218,33 @@ declare const CardContent: react.ForwardRefExoticComponent<CardContentProps & re
|
|
|
218
218
|
type CardFooterProps = HTMLAttributes<HTMLDivElement>;
|
|
219
219
|
declare const CardFooter: react.ForwardRefExoticComponent<CardFooterProps & react.RefAttributes<HTMLDivElement>>;
|
|
220
220
|
|
|
221
|
+
type Gap = 0 | 1 | 2 | 3 | 4 | 6 | 8;
|
|
222
|
+
type Cols = 1 | 2 | 3 | 4 | 6;
|
|
223
|
+
interface StackProps extends HTMLAttributes<HTMLDivElement> {
|
|
224
|
+
/** Main-axis direction. Default `col`. */
|
|
225
|
+
direction?: "col" | "row";
|
|
226
|
+
/** Gap between children (Tailwind spacing step). Default `4`. */
|
|
227
|
+
gap?: Gap;
|
|
228
|
+
}
|
|
229
|
+
/** Flex stack: vertical by default, horizontal with `direction="row"`. */
|
|
230
|
+
declare const Stack: react.ForwardRefExoticComponent<StackProps & react.RefAttributes<HTMLDivElement>>;
|
|
231
|
+
interface GridProps extends HTMLAttributes<HTMLDivElement> {
|
|
232
|
+
/** Column count. Default `2`. */
|
|
233
|
+
cols?: Cols;
|
|
234
|
+
/** Gap between cells. Default `4`. */
|
|
235
|
+
gap?: Gap;
|
|
236
|
+
}
|
|
237
|
+
/** Simple fixed-column grid. */
|
|
238
|
+
declare const Grid: react.ForwardRefExoticComponent<GridProps & react.RefAttributes<HTMLDivElement>>;
|
|
239
|
+
interface StatProps extends HTMLAttributes<HTMLDivElement> {
|
|
240
|
+
/** Muted label above the value. */
|
|
241
|
+
label: string;
|
|
242
|
+
/** The emphasized value (string or node). */
|
|
243
|
+
value: ReactNode;
|
|
244
|
+
}
|
|
245
|
+
/** Labelled metric block for dashboard-style plugin widgets. */
|
|
246
|
+
declare const Stat: react.ForwardRefExoticComponent<StatProps & react.RefAttributes<HTMLDivElement>>;
|
|
247
|
+
|
|
221
248
|
/**
|
|
222
249
|
* Alert Component - Design System Specification
|
|
223
250
|
*
|
|
@@ -442,7 +469,7 @@ type ProgressProps = {
|
|
|
442
469
|
* Visual variant for different states
|
|
443
470
|
*
|
|
444
471
|
* - `default`: Primary blue (bg-primary-500)
|
|
445
|
-
* - `success`: Green (bg-
|
|
472
|
+
* - `success`: Green (bg-success-500)
|
|
446
473
|
* - `error`: Red (bg-destructive)
|
|
447
474
|
*
|
|
448
475
|
* @default "default"
|
|
@@ -509,7 +536,7 @@ declare const Progress: react.ForwardRefExoticComponent<{
|
|
|
509
536
|
* Visual variant for different states
|
|
510
537
|
*
|
|
511
538
|
* - `default`: Primary blue (bg-primary-500)
|
|
512
|
-
* - `success`: Green (bg-
|
|
539
|
+
* - `success`: Green (bg-success-500)
|
|
513
540
|
* - `error`: Red (bg-destructive)
|
|
514
541
|
*
|
|
515
542
|
* @default "default"
|
|
@@ -1945,9 +1972,9 @@ declare const Spinner: react.ForwardRefExoticComponent<Omit<SpinnerProps, "ref">
|
|
|
1945
1972
|
*
|
|
1946
1973
|
* Customization:
|
|
1947
1974
|
* All styling uses CSS variables from the design system:
|
|
1948
|
-
* - --normal-bg: Background color (uses --popover with fallback)
|
|
1949
|
-
* - --normal-text: Text color (uses --popover-foreground with fallback)
|
|
1950
|
-
* - --normal-border: Border color (uses --border with fallback)
|
|
1975
|
+
* - --normal-bg: Background color (uses --nx-popover with fallback)
|
|
1976
|
+
* - --normal-text: Text color (uses --nx-popover-foreground with fallback)
|
|
1977
|
+
* - --normal-border: Border color (uses --nx-border with fallback)
|
|
1951
1978
|
* - --border-radius: Border radius (uses --radius with fallback)
|
|
1952
1979
|
*
|
|
1953
1980
|
* Security:
|
|
@@ -2047,6 +2074,22 @@ interface TableEmptyProps {
|
|
|
2047
2074
|
*/
|
|
2048
2075
|
declare function TableEmpty({ message }: TableEmptyProps): react_jsx_runtime.JSX.Element;
|
|
2049
2076
|
|
|
2077
|
+
/**
|
|
2078
|
+
* TableSkeleton Component
|
|
2079
|
+
*
|
|
2080
|
+
* Generic loading skeleton for data tables.
|
|
2081
|
+
* Renders header, body, and footer skeleton bars inside a card.
|
|
2082
|
+
* Unified with EntryTable skeleton pattern for consistency across all tables.
|
|
2083
|
+
*/
|
|
2084
|
+
|
|
2085
|
+
interface TableSkeletonProps {
|
|
2086
|
+
columns?: number;
|
|
2087
|
+
rowCount?: number;
|
|
2088
|
+
hideWrapper?: boolean;
|
|
2089
|
+
hideFooter?: boolean;
|
|
2090
|
+
}
|
|
2091
|
+
declare const TableSkeleton: react.FC<TableSkeletonProps>;
|
|
2092
|
+
|
|
2050
2093
|
interface PaginationMeta {
|
|
2051
2094
|
total: number;
|
|
2052
2095
|
page: number;
|
|
@@ -2088,129 +2131,6 @@ interface ActionCallbacks<TData = unknown> {
|
|
|
2088
2131
|
}
|
|
2089
2132
|
type DataFetcher<TData> = (params: TableParams) => Promise<ListResponse<TData>>;
|
|
2090
2133
|
|
|
2091
|
-
/**
|
|
2092
|
-
* Props for TablePagination component
|
|
2093
|
-
*/
|
|
2094
|
-
interface TablePaginationProps {
|
|
2095
|
-
/** Pagination metadata from server */
|
|
2096
|
-
meta: PaginationMeta;
|
|
2097
|
-
/** Callback when page changes */
|
|
2098
|
-
onPageChange: (page: number) => void;
|
|
2099
|
-
/** Callback when page size changes */
|
|
2100
|
-
onPageSizeChange: (pageSize: number) => void;
|
|
2101
|
-
/** Pagination configuration */
|
|
2102
|
-
config?: Required<PaginationConfig>;
|
|
2103
|
-
/** Whether data is currently loading */
|
|
2104
|
-
isLoading?: boolean;
|
|
2105
|
-
}
|
|
2106
|
-
/**
|
|
2107
|
-
* Pagination controls for tables
|
|
2108
|
-
*/
|
|
2109
|
-
declare function TablePagination({ meta, onPageChange, onPageSizeChange, config, isLoading, }: TablePaginationProps): react_jsx_runtime.JSX.Element;
|
|
2110
|
-
|
|
2111
|
-
/**
|
|
2112
|
-
* TableSkeleton Component
|
|
2113
|
-
*
|
|
2114
|
-
* Generic loading skeleton for data tables.
|
|
2115
|
-
* Renders header, body, and footer skeleton bars inside a card.
|
|
2116
|
-
* Unified with EntryTable skeleton pattern for consistency across all tables.
|
|
2117
|
-
*/
|
|
2118
|
-
|
|
2119
|
-
interface TableSkeletonProps {
|
|
2120
|
-
columns?: number;
|
|
2121
|
-
rowCount?: number;
|
|
2122
|
-
hideWrapper?: boolean;
|
|
2123
|
-
hideFooter?: boolean;
|
|
2124
|
-
}
|
|
2125
|
-
declare const TableSkeleton: react.FC<TableSkeletonProps>;
|
|
2126
|
-
|
|
2127
|
-
/**
|
|
2128
|
-
* Column definition for ResponsiveTable
|
|
2129
|
-
*
|
|
2130
|
-
* Provides type-safe column definitions with proper type narrowing for render functions.
|
|
2131
|
-
*
|
|
2132
|
-
* @template T - The data type of items in the table
|
|
2133
|
-
* @template K - The specific key from T (defaults to any key of T)
|
|
2134
|
-
*
|
|
2135
|
-
* @example
|
|
2136
|
-
* ```tsx
|
|
2137
|
-
* interface User {
|
|
2138
|
-
* id: string;
|
|
2139
|
-
* name: string;
|
|
2140
|
-
* age: number;
|
|
2141
|
-
* }
|
|
2142
|
-
*
|
|
2143
|
-
* // Type-safe column definition with proper inference
|
|
2144
|
-
* const columns: Column<User>[] = [
|
|
2145
|
-
* {
|
|
2146
|
-
* key: "name",
|
|
2147
|
-
* label: "Name",
|
|
2148
|
-
* // value is inferred as string, not string | number
|
|
2149
|
-
* render: (value, user) => <strong>{value}</strong>
|
|
2150
|
-
* },
|
|
2151
|
-
* {
|
|
2152
|
-
* key: "age",
|
|
2153
|
-
* label: "Age",
|
|
2154
|
-
* // value is inferred as number, not string | number
|
|
2155
|
-
* render: (value) => `${value} years old`
|
|
2156
|
-
* }
|
|
2157
|
-
* ];
|
|
2158
|
-
* ```
|
|
2159
|
-
*/
|
|
2160
|
-
type Column<T, K extends keyof T = keyof T> = {
|
|
2161
|
-
/** Unique key for the column (must match a property in T) */
|
|
2162
|
-
key: K;
|
|
2163
|
-
/** Display label for the column header */
|
|
2164
|
-
label: react.ReactNode;
|
|
2165
|
-
/** Optional custom renderer for cell content with type-safe value */
|
|
2166
|
-
render?: (value: T[K], item: T) => react.ReactNode;
|
|
2167
|
-
/** Hide column on mobile card view (optional, default: false) */
|
|
2168
|
-
hideOnMobile?: boolean;
|
|
2169
|
-
/** Hide the label on mobile card view (optional, default: false) */
|
|
2170
|
-
hideLabelOnMobile?: boolean;
|
|
2171
|
-
/** Optional custom className for the table header cell */
|
|
2172
|
-
headerClassName?: string;
|
|
2173
|
-
/** Optional custom className for the table body cell */
|
|
2174
|
-
cellClassName?: string;
|
|
2175
|
-
};
|
|
2176
|
-
/**
|
|
2177
|
-
* Props for ResponsiveTable component
|
|
2178
|
-
*
|
|
2179
|
-
* @template T - The data type of items in the table, must have an 'id' property
|
|
2180
|
-
*/
|
|
2181
|
-
type ResponsiveTableProps<T extends {
|
|
2182
|
-
id: string;
|
|
2183
|
-
}> = {
|
|
2184
|
-
/** Array of data items to display */
|
|
2185
|
-
data: T[];
|
|
2186
|
-
/** Array of column definitions */
|
|
2187
|
-
columns: Column<T>[];
|
|
2188
|
-
/** Optional callback when a row/card is clicked */
|
|
2189
|
-
onRowClick?: (item: T) => void;
|
|
2190
|
-
/** Optional custom renderer for mobile card view */
|
|
2191
|
-
renderMobileCard?: (item: T, columns: Column<T>[]) => react.ReactNode;
|
|
2192
|
-
/** Optional custom className for the container */
|
|
2193
|
-
className?: string;
|
|
2194
|
-
/** Optional empty state message */
|
|
2195
|
-
emptyMessage?: string;
|
|
2196
|
-
/** Optional ARIA label for the table (improves screen reader experience) */
|
|
2197
|
-
ariaLabel?: string;
|
|
2198
|
-
/** Optional custom className for the internal desktop table wrapper */
|
|
2199
|
-
tableWrapperClassName?: string;
|
|
2200
|
-
/** Optional footer content rendered inside the table card (e.g. Pagination) */
|
|
2201
|
-
footer?: react.ReactNode;
|
|
2202
|
-
};
|
|
2203
|
-
/**
|
|
2204
|
-
* Ref type for ResponsiveTable component
|
|
2205
|
-
*/
|
|
2206
|
-
type ResponsiveTableRef = HTMLDivElement;
|
|
2207
|
-
|
|
2208
|
-
declare const ResponsiveTable: <T extends {
|
|
2209
|
-
id: string;
|
|
2210
|
-
}>(props: ResponsiveTableProps<T> & {
|
|
2211
|
-
ref?: react.ForwardedRef<HTMLDivElement>;
|
|
2212
|
-
}) => react.ReactElement;
|
|
2213
|
-
|
|
2214
2134
|
interface PortalProviderProps {
|
|
2215
2135
|
/** The DOM element to portal overlay content into. Defaults to document.body (Radix default). */
|
|
2216
2136
|
container: HTMLElement | null;
|
|
@@ -2228,26 +2148,11 @@ declare function usePortalContainer(): HTMLElement | undefined;
|
|
|
2228
2148
|
* @example
|
|
2229
2149
|
* ```typescript
|
|
2230
2150
|
* cn('px-2 py-1', 'px-4') // => 'py-1 px-4'
|
|
2231
|
-
* cn('text-
|
|
2151
|
+
* cn('text-muted-foreground', condition && 'text-foreground')
|
|
2232
2152
|
* ```
|
|
2233
2153
|
*/
|
|
2234
2154
|
declare function cn(...inputs: ClassValue[]): string;
|
|
2235
2155
|
|
|
2236
|
-
/**
|
|
2237
|
-
* Tailwind CSS preset for @nextlyhq/ui components.
|
|
2238
|
-
*
|
|
2239
|
-
* Defines the CSS custom property contract that all UI components expect.
|
|
2240
|
-
* Consumers must provide the actual CSS variable values in their stylesheets.
|
|
2241
|
-
*
|
|
2242
|
-
* Usage (Tailwind v3):
|
|
2243
|
-
* // tailwind.config.ts
|
|
2244
|
-
* import uiPreset from "@nextlyhq/ui/tailwind-preset";
|
|
2245
|
-
* export default { presets: [uiPreset], ... };
|
|
2246
|
-
*
|
|
2247
|
-
* Usage (Tailwind v4 with @config):
|
|
2248
|
-
* Consumers define the equivalent @theme tokens in their CSS.
|
|
2249
|
-
* This file serves as the reference contract.
|
|
2250
|
-
*/
|
|
2251
2156
|
declare const uiPreset: {
|
|
2252
2157
|
theme: {
|
|
2253
2158
|
extend: {
|
|
@@ -2267,10 +2172,12 @@ declare const uiPreset: {
|
|
|
2267
2172
|
};
|
|
2268
2173
|
destructive: {
|
|
2269
2174
|
DEFAULT: string;
|
|
2175
|
+
solid: string;
|
|
2270
2176
|
foreground: string;
|
|
2271
2177
|
};
|
|
2272
2178
|
success: {
|
|
2273
2179
|
DEFAULT: string;
|
|
2180
|
+
solid: string;
|
|
2274
2181
|
foreground: string;
|
|
2275
2182
|
};
|
|
2276
2183
|
warning: {
|
|
@@ -2325,4 +2232,4 @@ declare const uiPreset: {
|
|
|
2325
2232
|
};
|
|
2326
2233
|
};
|
|
2327
2234
|
|
|
2328
|
-
export { Accordion, AccordionContent, type AccordionContentProps, AccordionItem, type AccordionItemProps, type AccordionProps, AccordionTrigger, type AccordionTriggerProps, type ActionCallbacks, Alert, AlertDescription, type AlertDescriptionProps, AlertDialog, AlertDialogAction, type AlertDialogActionProps, AlertDialogCancel, type AlertDialogCancelProps, AlertDialogContent, type AlertDialogContentProps, AlertDialogDescription, type AlertDialogDescriptionProps, AlertDialogFooter, type AlertDialogFooterProps, AlertDialogHeader, type AlertDialogHeaderProps, AlertDialogOverlay, type AlertDialogOverlayProps, AlertDialogPortal, AlertDialogTitle, type AlertDialogTitleProps, AlertDialogTrigger, type AlertProps, AlertTitle, type AlertTitleProps, Avatar, AvatarFallback, type AvatarFallbackProps, AvatarImage, type AvatarImageProps, type AvatarProps, Badge, type BadgeProps, Button, type ButtonProps, Card, CardAction, type CardActionProps, CardContent, type CardContentProps, CardDescription, type CardDescriptionProps, CardFooter, type CardFooterProps, CardHeader, type CardHeaderProps, type CardProps, CardTitle, type CardTitleProps, Checkbox, Collapsible, CollapsibleContent, CollapsibleTrigger,
|
|
2235
|
+
export { Accordion, AccordionContent, type AccordionContentProps, AccordionItem, type AccordionItemProps, type AccordionProps, AccordionTrigger, type AccordionTriggerProps, type ActionCallbacks, Alert, AlertDescription, type AlertDescriptionProps, AlertDialog, AlertDialogAction, type AlertDialogActionProps, AlertDialogCancel, type AlertDialogCancelProps, AlertDialogContent, type AlertDialogContentProps, AlertDialogDescription, type AlertDialogDescriptionProps, AlertDialogFooter, type AlertDialogFooterProps, AlertDialogHeader, type AlertDialogHeaderProps, AlertDialogOverlay, type AlertDialogOverlayProps, AlertDialogPortal, AlertDialogTitle, type AlertDialogTitleProps, AlertDialogTrigger, type AlertProps, AlertTitle, type AlertTitleProps, Avatar, AvatarFallback, type AvatarFallbackProps, AvatarImage, type AvatarImageProps, type AvatarProps, Badge, type BadgeProps, Button, type ButtonProps, Card, CardAction, type CardActionProps, CardContent, type CardContentProps, CardDescription, type CardDescriptionProps, CardFooter, type CardFooterProps, CardHeader, type CardHeaderProps, type CardProps, CardTitle, type CardTitleProps, Checkbox, Collapsible, CollapsibleContent, CollapsibleTrigger, Command, CommandDialog, type CommandDialogProps, CommandEmpty, type CommandEmptyProps, CommandGroup, type CommandGroupProps, CommandInput, type CommandInputProps, CommandItem, type CommandItemProps, CommandList, type CommandListProps, type CommandProps, CommandSeparator, type CommandSeparatorProps, CommandShortcut, type CommandShortcutProps, type DataFetcher, Dialog, DialogClose, DialogContent, type DialogContentProps, DialogDescription, type DialogDescriptionProps, DialogFooter, type DialogFooterProps, DialogHeader, type DialogHeaderProps, DialogOverlay, type DialogOverlayProps, DialogPortal, DialogTitle, type DialogTitleProps, DialogTrigger, DropdownMenu, DropdownMenuCheckboxItem, type DropdownMenuCheckboxItemProps, DropdownMenuContent, type DropdownMenuContentProps, DropdownMenuGroup, DropdownMenuItem, type DropdownMenuItemProps, DropdownMenuLabel, type DropdownMenuLabelProps, DropdownMenuPortal, DropdownMenuRadioGroup, DropdownMenuRadioItem, type DropdownMenuRadioItemProps, DropdownMenuSeparator, type DropdownMenuSeparatorProps, DropdownMenuShortcut, type DropdownMenuShortcutProps, DropdownMenuSub, DropdownMenuSubContent, type DropdownMenuSubContentProps, DropdownMenuSubTrigger, type DropdownMenuSubTriggerProps, DropdownMenuTrigger, type FilterInfo, FormLabelWithTooltip, type FormLabelWithTooltipProps, Grid, type GridProps, Input, type InputProps, Label, type ListResponse, type PaginationConfig, type PaginationMeta, Popover, PopoverAnchor, PopoverContent, PopoverTrigger, PortalProvider, Progress, type ProgressProps, RadioGroup, RadioGroupItem, Select, SelectContent, SelectGroup, SelectItem, SelectLabel, SelectScrollDownButton, SelectScrollUpButton, SelectSeparator, SelectTrigger, type SelectTriggerProps, SelectValue, Separator, Sheet, SheetClose, type SheetCloseProps, SheetContent, type SheetContentProps, type SheetContentRef, SheetDescription, type SheetDescriptionProps, type SheetDescriptionRef, SheetFooter, type SheetFooterProps, SheetHeader, type SheetHeaderProps, SheetOverlay, type SheetOverlayProps, type SheetOverlayRef, SheetPortal, type SheetProps, SheetTitle, type SheetTitleProps, type SheetTitleRef, SheetTrigger, type SheetTriggerProps, Skeleton, type SkeletonProps, type SortInfo, Spinner, type SpinnerProps, Stack, type StackProps, Stat, type StatProps, Switch, Table, TableBody, TableCaption, TableCell, TableEmpty, type TableEmptyProps, TableError, type TableErrorProps, TableFooter, TableHead, TableHeader, TableLoading, type TableParams, TableRow, TableSearch, type TableSearchProps, TableSkeleton, type TableSkeletonProps, Tabs, TabsContent, type TabsContentProps, TabsList, type TabsListProps, type TabsProps, TabsTrigger, type TabsTriggerProps, Textarea, Toaster, Tooltip, TooltipContent, TooltipProvider, TooltipTrigger, alertVariants, avatarVariants, badgeVariants, buttonVariants, cardVariants, cn, dialogContentVariants, inputVariants, progressVariants, selectTriggerVariants, sheetVariants, spinnerVariants, uiPreset, usePortalContainer };
|