@flamingo-stack/openframe-frontend-core 0.0.273 → 0.0.274

package/src/components/ui/no-data/no-data-actions.tsx

@@ -1,14 +1,9 @@
 import React from "react"
 
 import { cn } from "../../../utils/cn"
-import {
-  noDataActionInteractiveClasses,
-  noDataActionsVariants,
-  noDataIconClasses,
-  type NoDataActionsVariant,
-} from "./no-data-styles"
+import { noDataActionsVariants, noDataIconClasses, type NoDataActionsVariant } from "./no-data-styles"
 
-interface NoDataActionProps extends Omit<React.ButtonHTMLAttributes<HTMLButtonElement>, "title"> {
+interface NoDataActionProps extends Omit<React.HTMLAttributes<HTMLDivElement>, "title"> {
   /** Leading glyph, sized to 16px (mobile) / 24px (md+). Optional. */
   icon?: React.ReactNode
   /** Short label describing the block. */
@@ -16,51 +11,42 @@ interface NoDataActionProps extends Omit<React.ButtonHTMLAttributes<HTMLButtonEl
 }
 
 /**
- * A single clickable block: a leading icon with a short label, laid out
- * icon-beside-label on mobile and icon-above-label on larger screens. Tints on
- * hover, shows a focus ring for keyboard users, and grays out when disabled.
- * The outer border, rounded corners and dividers come from the surrounding
- * group, so on its own it has no frame.
+ * A single static info block: a leading icon with a short label, laid out
+ * icon-beside-label on mobile and icon-above-label on larger screens. Purely
+ * presentational — no hover or click. The outer border, rounded corners and
+ * dividers come from the surrounding group. Capped at 244px wide on md+.
  */
-const NoDataAction = React.forwardRef<HTMLButtonElement, NoDataActionProps>(
-  function NoDataAction({ icon, label, children, className, disabled, type, ...props }, ref) {
+const NoDataAction = React.forwardRef<HTMLDivElement, NoDataActionProps>(
+  function NoDataAction({ icon, label, children, className, ...props }, ref) {
     return (
-      <button
+      <div
         ref={ref}
-        type={type ?? "button"}
-        disabled={disabled}
         className={cn(
-          "flex flex-1 items-center gap-[var(--spacing-system-s)] p-[var(--spacing-system-m)] text-left text-ods-text-secondary",
-          "md:flex-col md:items-start md:gap-[var(--spacing-system-xs)]",
-          noDataActionInteractiveClasses,
+          "flex flex-1 items-center gap-[var(--spacing-system-s)] p-[var(--spacing-system-m)] text-ods-text-secondary",
+          "md:w-[224px] md:flex-none md:flex-col md:items-start md:gap-[var(--spacing-system-xs)]",
           className,
         )}
         {...props}
       >
-        {icon && <span className={noDataIconClasses}>{icon}</span>}
-        <span className="min-w-0 flex-1 break-words text-h6 md:w-full md:flex-none">
-          {label ?? children}
-        </span>
-      </button>
+        {icon && <span className={cn(noDataIconClasses, "text-ods-text-primary")}>{icon}</span>}
+        <span className="min-w-0 flex-1 break-words text-h6 md:w-full md:flex-none">{label ?? children}</span>
+      </div>
     )
   },
 )
 
 interface NoDataActionsProps extends React.HTMLAttributes<HTMLDivElement> {
-  /**
-   * The blocks to render. Count is dynamic — any number works. When omitted,
-   * `children` are rendered instead.
-   */
+  /** The blocks to render. When omitted, `children` are rendered instead. */
   actions?: NoDataActionProps[]
   /** Surface treatment of the group panel. */
   variant?: NoDataActionsVariant
 }
 
 /**
- * A group of clickable blocks sharing one bordered, card-colored panel. Renders
+ * A group of static info blocks sharing one transparent, bordered panel. Renders
  * as a horizontal row with vertical dividers on larger screens and a vertical
- * stack with horizontal dividers on mobile, switching automatically. Only the
- * outermost blocks have rounded corners.
+ * stack with horizontal dividers on mobile. Only the outermost blocks have
+ * rounded corners.
  */
 const NoDataActions = React.forwardRef<HTMLDivElement, NoDataActionsProps>(
   function NoDataActions({ actions, variant = "outline", className, children, ...props }, ref) {
@@ -71,11 +57,7 @@ const NoDataActions = React.forwardRef<HTMLDivElement, NoDataActionsProps>(
     return (
       <div
         ref={ref}
-        className={cn(
-          noDataActionsVariants({ variant }),
-          "flex w-full flex-col md:w-auto md:flex-row",
-          className,
-        )}
+        className={cn(noDataActionsVariants({ variant }), "flex w-full flex-col md:w-auto md:flex-row", className)}
         {...props}
       >
         {blocks.map((block, index) => (
@@ -94,9 +76,4 @@ const NoDataActions = React.forwardRef<HTMLDivElement, NoDataActionsProps>(
   },
 )
 
-export {
-  NoDataAction,
-  NoDataActions,
-  type NoDataActionProps,
-  type NoDataActionsProps,
-}
+export { NoDataAction, NoDataActions, type NoDataActionProps, type NoDataActionsProps }

package/src/components/ui/no-data/no-data-styles.ts

@@ -1,23 +1,21 @@
-// Shared style atoms for the NoData (empty-state) family. Mirrors the approach
-// used by `button-styles.ts`: a single source of truth for the icon scale, the
-// block-group surface and the interactive/disabled treatment, expressed as
-// reusable class atoms so new looks can be added without touching the markup.
+// Shared style atoms for the NoData (empty-state) family. A single source of
+// truth for the icon scale and the info-block group surface, expressed as CVA
+// variants so new looks can be added without touching the markup.
 
 import { cva, type VariantProps } from "class-variance-authority"
 
 // Leading-icon glyph scale: 16px on mobile, 24px on md+. Color is intentionally
-// omitted so the glyph inherits the current text color (and dims with it when
-// the block is disabled).
+// omitted so the glyph inherits the current text color.
 export const noDataIconClasses =
   "inline-flex shrink-0 items-center justify-center [&_svg]:h-4 [&_svg]:w-4 md:[&_svg]:h-6 md:[&_svg]:w-6"
 
-// Surface for the action-block group container: a card-colored panel with a
-// border and rounded corners. `overflow-hidden` keeps only the outer blocks
-// round — inner blocks stay square.
+// Surface for the info-block group container: a transparent, bordered panel with
+// rounded corners. `overflow-hidden` keeps only the outer blocks round — inner
+// blocks stay square.
 export const noDataActionsVariants = cva("overflow-hidden rounded-md", {
   variants: {
     variant: {
-      outline: "bg-ods-card border border-ods-border",
+      outline: "border border-ods-border",
     },
   },
   defaultVariants: { variant: "outline" },
@@ -26,11 +24,3 @@ export const noDataActionsVariants = cva("overflow-hidden rounded-md", {
 export type NoDataActionsVariant = NonNullable<
   VariantProps<typeof noDataActionsVariants>["variant"]
 >
-
-// Interactive treatment for a clickable block: hover/active surface tints, a
-// keyboard focus ring, and a disabled state that grays the text and stops
-// pointer interaction — matching the disabled outline button.
-export const noDataActionInteractiveClasses =
-  "cursor-pointer transition-colors hover:bg-ods-bg-hover active:bg-ods-bg-active " +
-  "focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ods-focus focus-visible:ring-inset " +
-  "disabled:cursor-default disabled:pointer-events-none disabled:text-ods-text-disabled"

package/src/components/ui/no-data/no-data.tsx

@@ -60,7 +60,13 @@ const NoData = React.forwardRef<HTMLDivElement, NoDataProps>(function NoData(
   const footerButton =
     button ??
     (buttonLabel != null ? (
-      <Button variant="outline" leftIcon={buttonIcon} onClick={onButtonClick} {...buttonProps}>
+      <Button
+        variant="outline"
+        leftIcon={buttonIcon}
+        onClick={onButtonClick}
+        {...buttonProps}
+        className={cn("w-full md:w-auto", buttonProps?.className)}
+      >
         {buttonLabel}
       </Button>
     ) : null)

package/src/components/ui/query-report-table/query-report-table.tsx

@@ -18,7 +18,7 @@ export function QueryReportTable({
   loading = false,
   skeletonRows = 8,
   skeletonColumns = 6,
-  emptyMessage = 'No results found',
+  emptyMessage,
   columnWidth = 160,
   columnOrder,
   showExport = true,

package/src/components/ui/table/table-empty-state.tsx

@@ -1,45 +1,20 @@
 'use client'
 
-import React from 'react'
-import { FileX2 } from 'lucide-react'
 import { cn } from '../../../utils/cn'
-import { Button } from '../button'
+import { SearchIcon } from '../../icons-v2-generated'
+import { NoData } from '../no-data'
 import type { TableEmptyStateProps } from './types'
 
 /** @deprecated Use `DataTableEmpty` from `data-table` instead. */
-export function TableEmptyState({
-  message = 'No data available',
-  icon,
-  action,
-  className
-}: TableEmptyStateProps) {
+export function TableEmptyState({ message, icon, action, className }: TableEmptyStateProps) {
   return (
-    <div
-      className={cn(
-        'flex flex-col items-center justify-center py-12 px-4 rounded-[6px] bg-ods-card border border-ods-border',
-        className
-      )}
-    >
-      {/* Icon */}
-      <div className="mb-4 text-ods-text-secondary">
-        {icon || <FileX2 className="w-12 h-12" />}
-      </div>
-      
-      {/* Message */}
-      <p className="text-h4 text-ods-text-secondary text-center mb-6">
-        {message}
-      </p>
-      
-      {/* Action Button */}
-      {action && (
-        <Button
-          variant="outline"
-          onClick={action.onClick}
-          className="bg-ods-card border-ods-border hover:bg-ods-bg-active text-ods-text-primary"
-        >
-          {action.label}
-        </Button>
-      )}
-    </div>
+    <NoData
+      icon={icon ?? <SearchIcon />}
+      title={message ?? 'No results found'}
+      description={message == null ? 'Try adjusting your search or filters' : undefined}
+      buttonLabel={action?.label}
+      onButtonClick={action?.onClick}
+      className={cn('py-[var(--spacing-system-xxl)]', className)}
+    />
   )
-}
+}

package/src/components/ui/table/table.tsx

@@ -91,7 +91,7 @@ export function Table<T = any>({
   columns,
   rowKey,
   loading = false,
-  emptyMessage = 'No data available',
+  emptyMessage,
   skeletonRows = 10,
   className,
   containerClassName,

package/src/stories/DataTable.stories.tsx

@@ -730,7 +730,8 @@ export const Loading: Story = {
 
 /**
  * **Empty state** — when there are no rows and `loading` is falsy, the body
- * renders the built-in empty state. Override the message via `emptyMessage`.
+ * renders the built-in empty state (`NoData`). By default it shows a search
+ * icon with "No results found" / "Try adjusting your search or filters".
  */
 export const EmptyState: Story = {
   render: () => {
@@ -740,7 +741,30 @@ export const EmptyState: Story = {
     return (
       <DataTable table={table}>
         <DataTable.Header />
-        <DataTable.Body emptyMessage="No devices match your filters" />
+        <DataTable.Body />
+      </DataTable>
+    )
+  },
+}
+
+/**
+ * **Empty state — custom** — override any field via the `emptyState` prop,
+ * which accepts the full `NoData` props (icon/title/description/actions/button).
+ */
+export const EmptyStateCustom: Story = {
+  render: () => {
+    const columns = useMemo<ColumnDef<Device>[]>(() => baseColumns().slice(0, 4), [])
+    const table = useDataTable<Device>({ data: [], columns })
+
+    return (
+      <DataTable table={table}>
+        <DataTable.Header />
+        <DataTable.Body
+          emptyState={{
+            title: 'No devices yet',
+            description: 'Connect your first device to get started',
+          }}
+        />
       </DataTable>
     )
   },

package/src/stories/EmptyState.stories.tsx

@@ -1,6 +1,7 @@
 import type { Meta, StoryObj } from '@storybook/nextjs-vite';
 import { Database, FileText, Inbox, Plus, Search, Settings, Sparkles, Upload, Zap } from 'lucide-react';
 import React from 'react';
+import { MingoIcon } from '../components/icons';
 import { Button } from '../components/ui/button';
 import { NoData, NoDataAction, NoDataActions, NoDataMessage } from '../components/ui/no-data';
 
@@ -25,10 +26,14 @@ type Story = StoryObj<typeof meta>;
 
 const noop = () => {};
 
+const mingoButtonIcon = (
+  <MingoIcon className="size-5" eyesColor="var(--ods-flamingo-cyan-base)" cornerColor="var(--ods-flamingo-cyan-base)" />
+);
+
 const defaultActions = [
-  { icon: <Zap />, label: 'Feature Description', onClick: noop },
-  { icon: <Sparkles />, label: 'Feature Description', onClick: noop },
-  { icon: <Database />, label: 'Feature Description', onClick: noop },
+  { icon: <Zap />, label: 'Feature Description' },
+  { icon: <Sparkles />, label: 'Feature Description' },
+  { icon: <Database />, label: 'Feature Description' },
 ];
 
 // === Full composition ===
@@ -40,7 +45,7 @@ export const Default: Story = {
     description: 'Start by adding an item',
     actions: defaultActions,
     buttonLabel: 'Ask Mingo about Item',
-    buttonIcon: <Sparkles />,
+    buttonIcon: mingoButtonIcon,
     onButtonClick: noop,
   },
 };
@@ -84,11 +89,11 @@ export const TwoActions: Story = {
     title: 'No data available',
     description: 'Start by adding an item',
     actions: [
-      { icon: <Zap />, label: 'Feature Description', onClick: noop },
-      { icon: <Sparkles />, label: 'Feature Description', onClick: noop },
+      { icon: <Zap />, label: 'Feature Description' },
+      { icon: <Sparkles />, label: 'Feature Description' },
     ],
     buttonLabel: 'Ask Mingo about Item',
-    buttonIcon: <Sparkles />,
+    buttonIcon: mingoButtonIcon,
     onButtonClick: noop,
   },
 };
@@ -99,31 +104,13 @@ export const FourActions: Story = {
     title: 'No data available',
     description: 'Start by adding an item',
     actions: [
-      { icon: <Zap />, label: 'Real-time sync', onClick: noop },
-      { icon: <Sparkles />, label: 'Smart suggestions', onClick: noop },
-      { icon: <Database />, label: 'Unlimited storage', onClick: noop },
-      { icon: <FileText />, label: 'Export anywhere', onClick: noop },
-    ],
-    buttonLabel: 'Ask Mingo about Item',
-    buttonIcon: <Sparkles />,
-    onButtonClick: noop,
-  },
-};
-
-// === Disabled blocks ===
-
-export const DisabledActions: Story = {
-  args: {
-    icon: <Inbox />,
-    title: 'No data available',
-    description: 'Some actions are unavailable',
-    actions: [
-      { icon: <Zap />, label: 'Available', onClick: noop },
-      { icon: <Sparkles />, label: 'Disabled', onClick: noop, disabled: true },
-      { icon: <Database />, label: 'Disabled', onClick: noop, disabled: true },
+      { icon: <Zap />, label: 'Real-time sync' },
+      { icon: <Sparkles />, label: 'Smart suggestions' },
+      { icon: <Database />, label: 'Unlimited storage' },
+      { icon: <FileText />, label: 'Export anywhere' },
     ],
     buttonLabel: 'Ask Mingo about Item',
-    buttonIcon: <Sparkles />,
+    buttonIcon: mingoButtonIcon,
     onButtonClick: noop,
   },
 };
@@ -162,9 +149,9 @@ export const StandaloneActions: Story = {
   args: { title: '' },
   render: () => (
     <NoDataActions>
-      <NoDataAction icon={<Zap />} label="Clickable block" onClick={noop} />
-      <NoDataAction icon={<Sparkles />} label="Clickable block" onClick={noop} />
-      <NoDataAction icon={<Database />} label="Disabled block" onClick={noop} disabled />
+      <NoDataAction icon={<Zap />} label="Info block" />
+      <NoDataAction icon={<Sparkles />} label="Info block" />
+      <NoDataAction icon={<Database />} label="Info block" />
     </NoDataActions>
   ),
 };
@@ -192,7 +179,7 @@ export const Showcase: Story = {
         description="Start by adding an item"
         actions={defaultActions}
         buttonLabel="Ask Mingo about Item"
-        buttonIcon={<Sparkles />}
+        buttonIcon={mingoButtonIcon}
         onButtonClick={noop}
       />
       <NoData icon={<Search />} title="No results found" description="Try a different search" />