florixui 1.3.2 → 1.4.0

package/README.md

@@ -438,6 +438,26 @@ A fast, composable command menu with fuzzy search for navigating actions, built
 </Command>
 ```
 
+### Confirm Prompt
+
+A confirmation dialog for risky actions — mainly deletes. An amber warning icon sits beside the title with a red confirm button, plus an optional type-to-confirm safeguard and async loading support.
+
+```tsx
+const [show, setShow] = useState(false)
+
+<Button variant="destructive" onClick={() => setShow(true)}>
+  Delete project
+</Button>
+<ConfirmPrompt
+  show={show}
+  onCancel={() => setShow(false)}
+  onConfirm={() => deleteProject(id)}
+  title="Delete project?"
+  message="This action cannot be undone…"
+  confirmLabel="Delete"
+/>
+```
+
 ### Custom Tabs
 
 A higher-level tab strip with two looks — underline and pill — driven by a single items array. Each tab can carry an icon, a numeric count, and a short badge like "New". Built on Radix Tabs for keyboard and a11y support.
@@ -556,7 +576,7 @@ Displays a menu of actions or options triggered by a button, built on Radix UI w
 
 ### Faceted Filter
 
-A controlled filter trigger and popover: a searchable list of options selectable as multi-select checkboxes (default) or single-select. Shows the selection as pills and emits the value(s) via onChange so you can filter your own list or API query.
+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.
 
 ```tsx
 const [status, setStatus] = useState<string[]>(['backlog', 'todo'])
@@ -713,6 +733,37 @@ Renders an accessible caption for a form control, associating text with an input
 </div>
 ```
 
+### List Card
+
+A minimal content card for list and grid layouts. A top row (badge + meta), an optional media thumbnail beside a title and description, a footer, and a corner actions menu — every slot is optional, so it renders any kind of data.
+
+```tsx
+<ListCardGrid columns={3}>
+  {alerts.map((a) => (
+    <ListCard
+      key={a.id}
+      badge={a.badge}
+      title={a.title}
+      description={a.description}
+      media={a.imageUrl}
+      meta={<><ClockIcon className="size-3" /> 10:12 AM</>}
+      actions={[
+        { label: 'View details', icon: EyeIcon },
+        { label: 'Mark as safe', icon: CheckIcon },
+        { type: 'separator' },
+        { label: 'Archive', icon: ArchiveIcon, destructive: true },
+      ]}
+      footer={
+        <>
+          <ListCardPerson name={a.person} />
+          <ListCardChip icon={<TruckIcon />}>{a.entity}</ListCardChip>
+        </>
+      }
+    />
+  ))}
+</ListCardGrid>
+```
+
 ### Map
 
 An interactive map built on MapLibre GL (via mapcn), with markers, routes, clustering, and overlays. Uses a free CARTO light basemap by default with no attribution — no API key required.

package/dist/components/custom/confirm-prompt.d.ts

@@ -0,0 +1,33 @@
+import * as React from "react";
+export interface ConfirmPromptProps {
+    /** Whether the prompt is open. Controlled. */
+    show: boolean;
+    /** Heading. Defaults to "Are you absolutely sure?". */
+    title?: React.ReactNode;
+    /** Supporting copy explaining the consequence. */
+    message?: React.ReactNode;
+    /** Runs when the user confirms. May return a promise for a loading state. */
+    onConfirm: () => void | Promise<void>;
+    /** Runs when the user cancels / dismisses. */
+    onCancel: () => void;
+    /** Show a spinner on the confirm button and block dismissal. */
+    loading?: boolean;
+    /** Disable the confirm button regardless of validation. */
+    disabled?: boolean;
+    /** Require the user to type `item` exactly before confirming. */
+    validate?: boolean;
+    /** The string the user must type when `validate` is set. Defaults to "CONFIRM". */
+    item?: string | null;
+    /** Confirm button label. Defaults to "Confirm". */
+    confirmLabel?: string;
+    /** Cancel button label. Defaults to "Cancel". */
+    cancelLabel?: string;
+}
+/**
+ * A confirmation dialog for risky actions — mainly deletes. An amber warning
+ * icon sits beside the title, with a red confirm button. Set `validate` to
+ * require the user to type `item` exactly before confirming (the
+ * "type the name to delete" safeguard). Controlled via `show`/`onCancel`;
+ * `onConfirm` may return a promise to show a spinner.
+ */
+export declare function ConfirmPrompt({ show, title, message, onConfirm, onCancel, loading: loadingProp, disabled, validate, item, confirmLabel, cancelLabel, }: ConfirmPromptProps): import("react/jsx-runtime").JSX.Element;

package/dist/components/custom/faceted-filter.d.ts

@@ -17,8 +17,6 @@ interface BaseProps {
     searchPlaceholder?: string;
     /** Hide the search box (for short lists). */
     searchable?: boolean;
-    /** Max selected pills to show on the trigger before collapsing to a count. */
-    maxDisplayed?: number;
     className?: string;
 }
 interface MultiProps extends BaseProps {
@@ -37,7 +35,7 @@ export type FacetedFilterProps = MultiProps | SingleProps;
 /**
  * A controlled filter trigger + popover: a searchable list of options, each
  * selectable (multi-select checkboxes by default, or single-select with
- * `mode="single"`). Shows the selection as pills on the trigger and emits the
+ * `mode="single"`). Shows a selected-count badge on the trigger and emits the
  * value(s) via `onChange` — use it to filter your own list or API query.
  */
 export declare function FacetedFilter(props: FacetedFilterProps): import("react/jsx-runtime").JSX.Element;

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

@@ -0,0 +1,64 @@
+import { ActionsMenuItem } from './actions-menu';
+import * as React from "react";
+/** A small avatar (image or initials) paired with a label — for card footers. */
+export declare function ListCardPerson({ name, src, className, }: {
+    name: string;
+    src?: string;
+    className?: string;
+}): import("react/jsx-runtime").JSX.Element;
+/** A bordered chip with an optional leading icon — for entity tags in footers. */
+export declare function ListCardChip({ icon, children, className, }: {
+    icon?: React.ReactNode;
+    children: React.ReactNode;
+    className?: string;
+}): import("react/jsx-runtime").JSX.Element;
+export interface ListCardProps extends Omit<React.ComponentProps<"div">, "title" | "onSelect"> {
+    /** Primary heading. */
+    title: React.ReactNode;
+    /** Muted secondary line below the title. */
+    description?: React.ReactNode;
+    /** Leading visual beside the title — an image URL, or any node (icon, avatar). */
+    media?: React.ReactNode | string;
+    /** Status badge shown in the top-left. */
+    badge?: React.ReactNode;
+    /** Extra muted text shown in the footer, e.g. a timestamp. */
+    meta?: React.ReactNode;
+    /** Footer content — pass `ListCardPerson`, `ListCardChip`, or any nodes. */
+    footer?: React.ReactNode;
+    /** Kebab menu actions (top-right of the card). Pass items or a ready node. */
+    actions?: ActionsMenuItem[] | React.ReactNode;
+    /**
+     * - `stacked` (default): header row (checkbox + badge, menu on the right),
+     *   then media + title/description, then footer.
+     * - `row`: a single line — checkbox, media, title/description, then menu.
+     */
+    layout?: "stacked" | "row";
+    /**
+     * Surface style. `default` uses the card background; `alt` uses the muted
+     * background so cards stand out when nested on a card-colored surface.
+     */
+    variant?: "default" | "alt";
+    /** Render a selection checkbox. */
+    selectable?: boolean;
+    /** Controlled checkbox state (with `selectable`). */
+    selected?: boolean;
+    /** Called when the checkbox toggles. */
+    onSelectedChange?: (checked: boolean) => void;
+    /** Highlight the card with a ring (e.g. focused/open row). */
+    active?: boolean;
+    /** Makes the whole card a button. */
+    onClick?: React.MouseEventHandler<HTMLDivElement>;
+}
+/**
+ * A minimal content card for list / grid layouts: a top row (checkbox + badge,
+ * with an actions menu on the right), an optional media thumbnail beside a title
+ * + description, and a footer (where `meta` is shown). Every slot is optional,
+ * so it renders any kind of data — alerts, tasks, contacts, files, etc.
+ */
+export declare function ListCard({ title, description, media, badge, meta, footer, actions, layout, variant, selectable, selected, onSelectedChange, active, onClick, className, ...props }: ListCardProps): import("react/jsx-runtime").JSX.Element;
+export interface ListCardGridProps extends React.ComponentProps<"div"> {
+    /** Column count at the widest breakpoint. Defaults to 3. */
+    columns?: 1 | 2 | 3 | 4;
+}
+/** A responsive grid that lays out `ListCard`s. */
+export declare function ListCardGrid({ columns, className, ...props }: ListCardGridProps): import("react/jsx-runtime").JSX.Element;

package/dist/index.d.ts

@@ -7,9 +7,11 @@ export * from './components/custom/advanced-select';
 export * from './components/custom/data-table';
 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/def-row';
 export * from './components/custom/faceted-filter';
+export * from './components/custom/list-card';
 export * from './components/custom/quick-stat';
 export * from './components/custom/sensor-card';
 export * from './components/custom/side-sheet';