@hyddenlabs/hydn-ui 0.3.0-alpha.185 → 0.3.0-alpha.187

package/dist/index.d.cts

@@ -1,6 +1,6 @@
 import * as react_jsx_runtime from 'react/jsx-runtime';
 import * as React$1 from 'react';
-import React__default, { ReactNode, ComponentProps, MouseEvent, HTMLAttributes, CSSProperties, FormEvent, RefObject } from 'react';
+import React__default, { ReactNode, ComponentProps, MouseEvent, ComponentType, HTMLAttributes, CSSProperties, FormEvent, RefObject } from 'react';
 
 declare const colors: {
     background: string;
@@ -2020,6 +2020,10 @@ type BreadcrumbItem = {
     label: string;
     /** Optional navigation link (last item typically has no href) */
     href?: string;
+    /** Optional click handler for client-side navigation */
+    onClick?: (event: MouseEvent<HTMLAnchorElement>) => void;
+    /** Additional props passed to the link component (e.g., 'to' for React Router Link) */
+    [key: string]: unknown;
 };
 type BreadcrumbsProps = {
     /** Array of breadcrumb items to display in hierarchical order */
@@ -2028,11 +2032,40 @@ type BreadcrumbsProps = {
     separator?: ReactNode;
     /** Additional CSS classes for the breadcrumb container */
     className?: string;
+    /** Custom link component (e.g., React Router Link) for client-side navigation */
+    linkComponent?: ComponentType<{
+        className?: string;
+        onClick?: (e: MouseEvent<HTMLAnchorElement>) => void;
+        [key: string]: unknown;
+    }>;
 };
 /**
  * Breadcrumbs - Hierarchical path display
+ *
+ * @example
+ * // With onClick handlers
+ * <Breadcrumbs
+ *   items={[
+ *     { label: 'Home', href: '/', onClick: () => navigate('/') },
+ *     { label: 'Products', href: '/products', onClick: () => navigate('/products') },
+ *     { label: 'Item' }
+ *   ]}
+ * />
+ *
+ * @example
+ * // With React Router Link component
+ * import { Link } from 'react-router-dom';
+ *
+ * <Breadcrumbs
+ *   linkComponent={Link}
+ *   items={[
+ *     { label: 'Home', to: '/' },
+ *     { label: 'Products', to: '/products' },
+ *     { label: 'Item' }
+ *   ]}
+ * />
  */
-declare function Breadcrumbs({ items, separator, className }: Readonly<BreadcrumbsProps>): react_jsx_runtime.JSX.Element;
+declare function Breadcrumbs({ items, separator, className, linkComponent }: Readonly<BreadcrumbsProps>): react_jsx_runtime.JSX.Element;
 declare namespace Breadcrumbs {
     var displayName: string;
 }
@@ -2589,6 +2622,8 @@ type ColumnDef<T> = {
     chipVariant?: StatusColorProp;
     /** Size for badge or chip rendering */
     componentSize?: 'sm' | 'md' | 'lg';
+    /** Fallback value to display when cell value is null, undefined, or empty string */
+    fallback?: string;
 };
 type DataTableProps<T> = {
     /** Array of data objects to display in the table */

package/dist/index.d.ts

@@ -1,6 +1,6 @@
 import * as react_jsx_runtime from 'react/jsx-runtime';
 import * as React$1 from 'react';
-import React__default, { ReactNode, ComponentProps, MouseEvent, HTMLAttributes, CSSProperties, FormEvent, RefObject } from 'react';
+import React__default, { ReactNode, ComponentProps, MouseEvent, ComponentType, HTMLAttributes, CSSProperties, FormEvent, RefObject } from 'react';
 
 declare const colors: {
     background: string;
@@ -2020,6 +2020,10 @@ type BreadcrumbItem = {
     label: string;
     /** Optional navigation link (last item typically has no href) */
     href?: string;
+    /** Optional click handler for client-side navigation */
+    onClick?: (event: MouseEvent<HTMLAnchorElement>) => void;
+    /** Additional props passed to the link component (e.g., 'to' for React Router Link) */
+    [key: string]: unknown;
 };
 type BreadcrumbsProps = {
     /** Array of breadcrumb items to display in hierarchical order */
@@ -2028,11 +2032,40 @@ type BreadcrumbsProps = {
     separator?: ReactNode;
     /** Additional CSS classes for the breadcrumb container */
     className?: string;
+    /** Custom link component (e.g., React Router Link) for client-side navigation */
+    linkComponent?: ComponentType<{
+        className?: string;
+        onClick?: (e: MouseEvent<HTMLAnchorElement>) => void;
+        [key: string]: unknown;
+    }>;
 };
 /**
  * Breadcrumbs - Hierarchical path display
+ *
+ * @example
+ * // With onClick handlers
+ * <Breadcrumbs
+ *   items={[
+ *     { label: 'Home', href: '/', onClick: () => navigate('/') },
+ *     { label: 'Products', href: '/products', onClick: () => navigate('/products') },
+ *     { label: 'Item' }
+ *   ]}
+ * />
+ *
+ * @example
+ * // With React Router Link component
+ * import { Link } from 'react-router-dom';
+ *
+ * <Breadcrumbs
+ *   linkComponent={Link}
+ *   items={[
+ *     { label: 'Home', to: '/' },
+ *     { label: 'Products', to: '/products' },
+ *     { label: 'Item' }
+ *   ]}
+ * />
  */
-declare function Breadcrumbs({ items, separator, className }: Readonly<BreadcrumbsProps>): react_jsx_runtime.JSX.Element;
+declare function Breadcrumbs({ items, separator, className, linkComponent }: Readonly<BreadcrumbsProps>): react_jsx_runtime.JSX.Element;
 declare namespace Breadcrumbs {
     var displayName: string;
 }
@@ -2589,6 +2622,8 @@ type ColumnDef<T> = {
     chipVariant?: StatusColorProp;
     /** Size for badge or chip rendering */
     componentSize?: 'sm' | 'md' | 'lg';
+    /** Fallback value to display when cell value is null, undefined, or empty string */
+    fallback?: string;
 };
 type DataTableProps<T> = {
     /** Array of data objects to display in the table */

package/dist/index.js

@@ -2813,15 +2813,21 @@ var PageTransition = ({
 };
 PageTransition.displayName = "PageTransition";
 var page_transition_default = PageTransition;
-function Breadcrumbs({ items, separator = "/", className = "" }) {
+function Breadcrumbs({ items, separator = "/", className = "", linkComponent }) {
+  const LinkComponent = linkComponent || "a";
   return /* @__PURE__ */ jsx("nav", { "aria-label": "Breadcrumb", className, children: /* @__PURE__ */ jsx("ol", { className: "flex items-center space-x-2 text-sm", children: items.map((item, index) => {
     const isLast = index === items.length - 1;
     const key = item.href || item.label;
+    const { label: _label, onClick, href, ...linkProps } = item;
+    const hasLinkProps = href || onClick || Object.keys(linkProps).length > 0;
+    const shouldRenderLink = hasLinkProps && !isLast;
     return /* @__PURE__ */ jsxs("li", { className: "flex items-center", children: [
-      item.href && !isLast ? /* @__PURE__ */ jsx(
-        "a",
+      shouldRenderLink ? /* @__PURE__ */ jsx(
+        LinkComponent,
         {
-          href: item.href,
+          ...href ? { href } : {},
+          ...linkProps,
+          onClick,
           className: "text-primary hover:text-primary/80 hover:underline cursor-pointer transition-colors duration-200 focus:outline-none focus:ring-2 focus:ring-ring rounded px-1 -mx-1",
           children: item.label
         }
@@ -4181,6 +4187,10 @@ function DataTable({
     }
   };
   const renderCellContent = (value, column, row, rowIndex) => {
+    const isEmpty = value == null || value === "";
+    if (isEmpty && column.fallback !== void 0) {
+      return column.fallback;
+    }
     if (column.render) {
       return column.render(value, row, rowIndex);
     }
@@ -5400,7 +5410,7 @@ function EditableText({
       disabled,
       className: `group ${sizeConfig} ${className} relative inline-flex items-center gap-2 cursor-text border-b border-transparent py-1 text-left transition-all hover:border-b-foreground/30 focus:outline-none focus:ring-2 focus:ring-ring/20 focus:rounded disabled:cursor-not-allowed disabled:opacity-50 ${isPlaceholder ? "text-muted-foreground" : "text-foreground"} w-fit max-w-full`,
       children: [
-        /* @__PURE__ */ jsx("span", { className: "flex-1 truncate", children: displayText }),
+        /* @__PURE__ */ jsx("span", { className: "flex-1", children: displayText }),
         /* @__PURE__ */ jsx(
           Icon,
           {