florixui 1.4.1 → 1.6.0

package/README.md

@@ -243,6 +243,20 @@ Displays a short, important message that draws attention without interrupting th
 </Alert>
 ```
 
+### Alert Card
+
+A higher-level alert with two looks — filled (soft tinted background) and outline (bordered card with an icon box and actions) — across four severities. Theme-aware: severities map to the blue / orange / red / green tokens.
+
+```tsx
+<AlertCard
+  variant="filled"
+  severity="info"
+  title="New update"
+  description="v2.4.0 is ready. Restart to apply."
+  dismissible
+/>
+```
+
 ### Alert Dialog
 
 A modal dialog that interrupts the user with important content and expects a confirm or cancel response before continuing.
@@ -574,6 +588,38 @@ Displays a menu of actions or options triggered by a button, built on Radix UI w
 </DropdownMenu>
 ```
 
+### Empty
+
+A composable empty state — media (icon/avatar), title, and description in a header, with optional actions. For "no data", "no results", offline, and 404 states.
+
+```tsx
+<Empty>
+  <EmptyHeader>
+    <EmptyMedia variant="icon">
+      <FolderIcon />
+    </EmptyMedia>
+    <EmptyTitle>No projects yet</EmptyTitle>
+    <EmptyDescription>
+      Get started by creating your first project.
+    </EmptyDescription>
+  </EmptyHeader>
+  <EmptyContent>
+    <Button>
+      <PlusIcon />
+      Create project
+    </Button>
+  </EmptyContent>
+</Empty>
+```
+
+### Empty State
+
+A convenience wrapper over the Empty primitive — pass icon, title, description, and actions as props (with sensible defaults) instead of composing the parts by hand.
+
+```tsx
+<EmptyState title="No notifications" />
+```
+
 ### Faceted Filter
 
 A controlled filter trigger and popover: a searchable list of options selectable as multi-select checkboxes (default) or single-select. Shows a selected-count badge on the trigger and emits the value(s) via onChange so you can filter your own list or API query.
@@ -775,6 +821,14 @@ An interactive map built on MapLibre GL (via mapcn), with markers, routes, clust
 />
 ```
 
+### Not Found
+
+A centered status screen — a large code (e.g. "404"), a title, a description, and Go Back / Go to Home actions. Generic enough for 404 / 403 / 500 and empty states.
+
+```tsx
+<NotFound homeHref="/" />
+```
+
 ### Popover
 
 Displays rich, floating content in a portal, anchored to a trigger and toggled by click.
@@ -1150,4 +1204,169 @@ Displays a brief, contextual label in a popup when the user hovers or focuses an
 </TooltipProvider>
 ```
 
+## Bits
+
+> Small, composable building blocks (see the "Bits" page in the docs). Each shows a quick usage snippet.
+
+### Card in card
+
+An outer card with a header + action, containing nested cards — one per Card background variant.
+
+```tsx
+// One nested card per Card variant
+const SITES = [
+  { variant: 'alt',     name: 'Skyline Tower',    /* … */ },
+  { variant: 'primary', name: 'Marina Heights',   /* … */ },
+  { variant: 'success', name: 'Green Park Plaza', /* … */ },
+  { variant: 'warning', name: 'Dockside Depot',   /* … */ },
+  { variant: 'danger',  name: 'Old Mill Unit',    /* … */ },
+]
+
+<Card>
+  <CardHeader>
+    <CardTitle className="flex items-center gap-2">
+      <Building2Icon className="size-5" /> Site Assignment
+    </CardTitle>
+    <CardDescription>Nested cards, one per variant</CardDescription>
+    <CardAction>
+      <Button variant="outline" size="sm">
+        <ArrowLeftRightIcon className="size-4" /> Reassign
+      </Button>
+    </CardAction>
+  </CardHeader>
+  <CardContent className="grid gap-3 sm:grid-cols-2">
+    {SITES.map((s) => (
+      <Card key={s.name} variant={s.variant} size="sm">
+        <CardContent className="flex items-center gap-3">
+          <StatusIcon className="bg-card text-foreground"><Building2Icon /></StatusIcon>
+          <div className="flex-1">
+            <p className="font-medium">{s.name}</p>
+            <p className="text-xs text-muted-foreground">
+              <LayersIcon className="size-3.5" /> {s.floor}
+            </p>
+            <p className="text-xs text-muted-foreground">
+              <MapPinIcon className="size-3.5" /> {s.addr}
+            </p>
+          </div>
+          <Badge>{s.status}</Badge>
+        </CardContent>
+      </Card>
+    ))}
+  </CardContent>
+</Card>
+```
+
+### DataCell
+
+A labelled value cell. "stacked" (default) puts the label above the value — lay them out in a grid for spec sheets; "row" puts the value on the right.
+
+```tsx
+// stacked (default) — an optional icon sits beside the value
+<div className="grid grid-cols-3 gap-x-8 gap-y-4">
+  <DataCell label="Make" value="Liebherr" />
+  <DataCell label="Category" value="lifting" icon={<WrenchIcon />} />
+  <DataCell label="Asset Value" value="₹4,500,000" icon={<BanknoteIcon />} />
+  {/* … */}
+</div>
+
+// row — value (with icon) on the right
+<div className="divide-y">
+  <DataCell layout="row" icon={<BanknoteIcon />} label="Asset Value" value="₹4,500,000" />
+  <DataCell layout="row" icon={<ShieldCheckIcon />} label="Insurance Policy" value="INS-CR-8821" />
+</div>
+```
+
+### DefRow
+
+A label/value definition row for detail cards. Stack several in a divide-y container.
+
+```tsx
+<div className="divide-y">
+  <DefRow label="Price" value="$960.99" />
+  <DefRow label="Stock" value="5 units" />
+  <DefRow label="Category" value="Electronics" />
+  <DefRow label="SKU" value="SKU-RCH45Q1A" />
+</div>
+```
+
+### QuickStat
+
+A compact inline stat — icon, value, and an optional muted label. Line several up with vertical separators.
+
+```tsx
+<div className="flex items-center gap-3 [&>[data-slot=separator]]:h-4">
+  <QuickStat icon={<TagIcon />} value="$960.99" />
+  <Separator orientation="vertical" />
+  <QuickStat icon={<PackageIcon />} value={5} label="in stock" />
+  <Separator orientation="vertical" />
+  <QuickStat icon={<StarIcon className="fill-orange text-orange" />} value={4.9} />
+  <Separator orientation="vertical" />
+  <QuickStat icon={<TrendingUpIcon />} value={982} label="sold" />
+</div>
+```
+
+### StatusList
+
+Status rows with flexible leading visuals (tinted icon box, avatar/initials, or plain icon), pill / outline / text status, and group headers.
+
+```tsx
+<StatusList>
+  <StatusListGroup label="Gateways" count={2}>
+    <StatusListItem
+      media={<StatusIcon tone="success"><RadioIcon /></StatusIcon>}
+      title="GW-SKY-B01"
+      description="WiFi · 100% · 2 tags"
+      status="Online"
+      statusVariant="outline"
+      tone="success"
+    />
+    <StatusListItem
+      media={<StatusIcon tone="warning"><RadioIcon /></StatusIcon>}
+      title="GW-SKY-B04"
+      description="4G · 54% · 2 tags"
+      status="Degraded"
+      statusVariant="outline"
+      tone="warning"
+    />
+  </StatusListGroup>
+
+  <StatusListGroup label="Workers" count={2}>
+    <StatusListItem
+      media={<StatusAvatar name="Arjun Das" tone="primary" />}
+      title="Arjun Das"
+      description="Electrician"
+      status="Active"
+      statusVariant="text"
+      tone="success"
+    />
+    <StatusListItem
+      media={<StatusAvatar name="Fatima Sheikh" tone="primary" />}
+      title="Fatima Sheikh"
+      description="Safety Officer"
+      status="Active"
+      statusVariant="text"
+      tone="success"
+    />
+  </StatusListGroup>
+</StatusList>
+```
+
+### Thumbnail (inline)
+
+A square image with an icon fallback when no src is provided — for record headers and lists.
+
+```tsx
+function Thumb({ src, alt }: { src?: string; alt: string }) {
+  return (
+    <div className="flex size-14 shrink-0 items-center justify-center overflow-hidden rounded-lg border bg-muted">
+      {src ? (
+        <img src={src} alt={alt} className="size-full object-cover" />
+      ) : (
+        <ImageIcon className="size-6 text-muted-foreground" />
+      )}
+    </div>
+  )
+}
+```
+
 <!-- COMPONENTS:END -->

package/dist/components/custom/alert-card.d.ts

@@ -0,0 +1,38 @@
+import { Button } from '../ui/button';
+import * as React from "react";
+export type AlertSeverity = "info" | "warning" | "error" | "success";
+export type AlertCardVariant = "filled" | "outline";
+export interface AlertCardProps extends Omit<React.ComponentProps<"div">, "title"> {
+    /** Severity — sets the accent color and default icon. */
+    severity?: AlertSeverity;
+    /**
+     * - `filled`: a soft tinted background (compact).
+     * - `outline`: a bordered card with an icon box and room for actions.
+     */
+    variant?: AlertCardVariant;
+    /** Override the default severity icon. */
+    icon?: React.ReactNode;
+    /** Heading. */
+    title?: React.ReactNode;
+    /** Supporting text. */
+    description?: React.ReactNode;
+    /** Small badge beside the title (outline variant). */
+    badge?: React.ReactNode;
+    /** Action buttons rendered below the description (outline variant). */
+    actions?: React.ReactNode;
+    /** Show a dismiss (×) button. */
+    dismissible?: boolean;
+    /** Called when the dismiss button is clicked. */
+    onDismiss?: () => void;
+}
+/**
+ * A higher-level alert with two looks — `filled` (soft tinted background) and
+ * `outline` (bordered card with an icon box and actions) — across four
+ * severities (info / warning / error / success). Theme-aware: severities map to
+ * the blue / orange / red / green tokens.
+ */
+export declare function AlertCard({ severity, variant, icon, title, description, badge, actions, dismissible, onDismiss, className, ...props }: AlertCardProps): import("react/jsx-runtime").JSX.Element;
+/** A primary action button tinted to the alert's severity. */
+export declare function AlertCardAction({ severity, className, ...props }: React.ComponentProps<typeof Button> & {
+    severity?: AlertSeverity;
+}): import("react/jsx-runtime").JSX.Element;

package/dist/components/custom/data-cell.d.ts

@@ -0,0 +1,24 @@
+import * as React from "react";
+export interface DataCellProps extends React.ComponentProps<"div"> {
+    /** Muted caption. */
+    label: React.ReactNode;
+    /** The value. */
+    value: React.ReactNode;
+    /**
+     * Optional icon (auto-sized, muted). In `stacked` it sits beside the value;
+     * in `row` it leads the label.
+     */
+    icon?: React.ReactNode;
+    /**
+     * - `stacked` (default): label above value — for spec/detail grids.
+     * - `row`: label on the left, value on the right — for definition lists.
+     */
+    layout?: "stacked" | "row";
+}
+/**
+ * A labelled value cell. `stacked` renders the muted `label` above the bold
+ * `value` (for spec/detail grids); `row` puts the label on the left and the
+ * value on the right (a definition row). Lay several `stacked` cells out in a
+ * grid, or several `row` cells in a `divide-y` column.
+ */
+export declare function DataCell({ label, value, icon, layout, className, ...props }: DataCellProps): import("react/jsx-runtime").JSX.Element;

package/dist/components/custom/data-table.d.ts

@@ -34,11 +34,16 @@ export interface DataTableProps<TRow> {
     pageSizeOptions?: number[];
     /** Alternating row backgrounds for easier scanning. */
     striped?: boolean;
-    /** Keep the header visible while the body scrolls (pair with maxHeight). */
+    /** Keep the header visible while the body scrolls (pair with maxHeight/fillHeight). */
     stickyHeader?: boolean;
     /** Constrains height and enables vertical scroll, e.g. "24rem" or 400. */
     maxHeight?: string | number;
+    /**
+     * Grow the table to fill its parent's height (body scrolls, footer pinned).
+     * Place inside a flex column with a constrained height. Overrides `maxHeight`.
+     */
+    fillHeight?: boolean;
     onRowClick?: (row: TRow) => void;
     className?: string;
 }
-export declare function DataTable<TRow>({ columns, data, getRowId, selectable, selectedIds, onSelectionChange, rowActions, loading, emptyMessage, pagination, pageSize: pageSizeProp, pageSizeOptions, striped, stickyHeader, maxHeight, onRowClick, className, }: DataTableProps<TRow>): import("react/jsx-runtime").JSX.Element;
+export declare function DataTable<TRow>({ columns, data, getRowId, selectable, selectedIds, onSelectionChange, rowActions, loading, emptyMessage, pagination, pageSize: pageSizeProp, pageSizeOptions, striped, stickyHeader, maxHeight, fillHeight, onRowClick, className, }: DataTableProps<TRow>): import("react/jsx-runtime").JSX.Element;

package/dist/components/custom/empty-state.d.ts

@@ -0,0 +1,21 @@
+import { Empty } from '../ui/empty';
+import * as React from "react";
+export interface EmptyStateProps extends Omit<React.ComponentProps<typeof Empty>, "title"> {
+    /** Leading icon (or any node). Defaults to an inbox icon. */
+    icon?: React.ReactNode;
+    /** Media style: `icon` wraps it in a muted square; `default` for avatars. */
+    mediaVariant?: "icon" | "default";
+    /** Heading. Defaults to "No data". */
+    title?: React.ReactNode;
+    /** Supporting text. */
+    description?: React.ReactNode;
+    /** Actions (buttons, links, inputs) rendered below. */
+    actions?: React.ReactNode;
+}
+/**
+ * A convenience wrapper over the compositional `Empty` primitive — pass
+ * `icon`, `title`, `description`, and `actions` as props (with sensible
+ * defaults) instead of composing the parts by hand. Drop the props you don't
+ * need; use the `Empty*` parts directly when you need full control.
+ */
+export declare function EmptyState({ icon, mediaVariant, title, description, actions, ...props }: EmptyStateProps): import("react/jsx-runtime").JSX.Element;

package/dist/components/custom/not-found.d.ts

@@ -0,0 +1,25 @@
+import * as React from "react";
+export interface NotFoundProps extends Omit<React.ComponentProps<"div">, "title"> {
+    /** Big status code or glyph, e.g. "404". Pass an icon node for empty states. */
+    code?: React.ReactNode;
+    /** Heading. Defaults to "Page Not Found". */
+    title?: React.ReactNode;
+    /** Supporting text under the title. */
+    description?: React.ReactNode;
+    /** Show the "Go Back" button (calls `onGoBack`, or history.back()). */
+    showBack?: boolean;
+    /** Override the back-button handler. Defaults to `history.back()`. */
+    onGoBack?: () => void;
+    /** Href for the "Go to Home" button. Set `null` to hide it. */
+    homeHref?: string | null;
+    /** Label for the home button. */
+    homeLabel?: React.ReactNode;
+    /** Extra actions rendered after the default buttons. */
+    actions?: React.ReactNode;
+}
+/**
+ * A centered status / not-found screen: a large `code` (e.g. "404"), a `title`,
+ * a `description`, and action buttons (Go Back + Go to Home). Generic enough for
+ * 404 / 403 / 500 and empty states — pass an icon as `code` for the latter.
+ */
+export declare function NotFound({ code, title, description, showBack, onGoBack, homeHref, homeLabel, actions, className, ...props }: NotFoundProps): import("react/jsx-runtime").JSX.Element;

package/dist/components/ui/card.d.ts

@@ -1,7 +1,7 @@
 import { VariantProps } from 'class-variance-authority';
 import * as React from "react";
 declare const cardVariants: (props?: ({
-    variant?: "default" | "alt" | "primary" | "success" | "warning" | "danger" | null | undefined;
+    variant?: "default" | "alt" | "warning" | "success" | "primary" | "danger" | null | undefined;
 } & import('class-variance-authority/types').ClassProp) | undefined) => string;
 declare function Card({ className, size, variant, ...props }: React.ComponentProps<"div"> & {
     size?: "default" | "sm";

package/dist/components/ui/empty.d.ts

@@ -0,0 +1,12 @@
+import { VariantProps } from 'class-variance-authority';
+import * as React from "react";
+declare function Empty({ className, ...props }: React.ComponentProps<"div">): import("react/jsx-runtime").JSX.Element;
+declare function EmptyHeader({ className, ...props }: React.ComponentProps<"div">): import("react/jsx-runtime").JSX.Element;
+declare const emptyMediaVariants: (props?: ({
+    variant?: "default" | "icon" | null | undefined;
+} & import('class-variance-authority/types').ClassProp) | undefined) => string;
+declare function EmptyMedia({ className, variant, ...props }: React.ComponentProps<"div"> & VariantProps<typeof emptyMediaVariants>): import("react/jsx-runtime").JSX.Element;
+declare function EmptyTitle({ className, ...props }: React.ComponentProps<"div">): import("react/jsx-runtime").JSX.Element;
+declare function EmptyDescription({ className, ...props }: React.ComponentProps<"p">): import("react/jsx-runtime").JSX.Element;
+declare function EmptyContent({ className, ...props }: React.ComponentProps<"div">): import("react/jsx-runtime").JSX.Element;
+export { Empty, EmptyHeader, EmptyMedia, EmptyTitle, EmptyDescription, EmptyContent, };

package/dist/index.d.ts

@@ -2,6 +2,7 @@ export { cn } from './lib/utils';
 export { useFileUpload, formatBytes, type FileMetadata, type FileWithPreview, type FileUploadOptions, type FileUploadState, type FileUploadActions, } from './lib/use-file-upload';
 export * from './components/custom/actions-menu';
 export * from './components/custom/advanced-input';
+export * from './components/custom/alert-card';
 export * from './components/custom/file-upload';
 export * from './components/custom/advanced-select';
 export * from './components/custom/data-table';
@@ -9,9 +10,12 @@ export * from './components/custom/form-dialog';
 export * from './components/custom/card-radio-group';
 export * from './components/custom/confirm-prompt';
 export * from './components/custom/custom-tabs';
+export * from './components/custom/data-cell';
 export * from './components/custom/def-row';
+export * from './components/custom/empty-state';
 export * from './components/custom/faceted-filter';
 export * from './components/custom/list-card';
+export * from './components/custom/not-found';
 export * from './components/custom/quick-stat';
 export * from './components/custom/sensor-card';
 export * from './components/custom/side-sheet';
@@ -31,6 +35,7 @@ export * from './components/ui/checkbox';
 export * from './components/ui/command';
 export * from './components/ui/dialog';
 export * from './components/ui/dropdown-menu';
+export * from './components/ui/empty';
 export * from './components/ui/field';
 export * from './components/ui/hover-card';
 export * from './components/ui/input';