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

package/dist/index.d.cts

@@ -2568,6 +2568,8 @@ type ColumnDef<T> = {
     width?: string;
     /** Text alignment for cells in this column */
     align?: 'left' | 'center' | 'right';
+    /** Whether text should wrap instead of truncating (useful for long strings) */
+    wrapText?: boolean;
     /** Custom render function for cell content (use as escape hatch when config options don't cover your use case) */
     render?: (value: T[keyof T], row: T, index: number) => ReactNode;
     /** Pre-built formatter for common data types */
@@ -2925,6 +2927,8 @@ type TableHeadCellProps = {
     align?: 'left' | 'center' | 'right';
     /** Scope attribute for accessibility (col for column headers, row for row headers) */
     scope?: 'col' | 'row';
+    /** Whether text should wrap instead of truncating */
+    wrapText?: boolean;
 } & HTMLAttributes<HTMLTableCellElement>;
 type TableCellProps = {
     /** Content of the cell */
@@ -2933,6 +2937,8 @@ type TableCellProps = {
     className?: string;
     /** Text alignment within the cell */
     align?: 'left' | 'center' | 'right';
+    /** Whether text should wrap instead of truncating */
+    wrapText?: boolean;
 } & HTMLAttributes<HTMLTableCellElement>;
 /**
  * Table - Semantic HTML table with consistent styling
@@ -2963,11 +2969,11 @@ declare function TableRow({ children, className, selected, ...props }: Readonly<
  * - Includes proper scope attribute for accessibility
  * - Default scope is 'col' for column headers
  */
-declare function TableHeadCell({ children, className, align, scope, ...props }: Readonly<TableHeadCellProps>): react_jsx_runtime.JSX.Element;
+declare function TableHeadCell({ children, className, align, scope, wrapText, ...props }: Readonly<TableHeadCellProps>): react_jsx_runtime.JSX.Element;
 /**
  * TableCell - Table data cell (td)
  */
-declare function TableCell({ children, className, align, ...props }: Readonly<TableCellProps>): react_jsx_runtime.JSX.Element;
+declare function TableCell({ children, className, align, wrapText, ...props }: Readonly<TableCellProps>): react_jsx_runtime.JSX.Element;
 
 type AlertProps = {
     /** The content to display inside the alert message */
@@ -3508,6 +3514,58 @@ declare namespace Code$1 {
     var displayName: string;
 }
 
+type EditableTextProps = {
+    /** Current value (controlled) */
+    value?: string;
+    /** Default value for uncontrolled mode */
+    defaultValue?: string;
+    /** Callback when save is clicked - receives the new value */
+    onSave?: (value: string) => void;
+    /** Callback when value changes - for controlled mode */
+    onChange?: (value: string) => void;
+    /** Callback when cancel is clicked */
+    onCancel?: () => void;
+    /** Callback when edit mode is entered */
+    onEdit?: () => void;
+    /** Placeholder text shown when value is empty */
+    placeholder?: string;
+    /** Disables editing */
+    disabled?: boolean;
+    /** Size variant - uses unified size system */
+    size?: InteractiveSize;
+    /** Validation state */
+    validationState?: ValidationState$2;
+    /** Custom CSS classes for the display text */
+    className?: string;
+    /** HTML id attribute */
+    id?: string;
+    /** HTML name attribute */
+    name?: string;
+    /** Required field */
+    required?: boolean;
+    /** Auto-focus input when entering edit mode */
+    autoFocus?: boolean;
+    /** Maximum length of input value */
+    maxLength?: number;
+    /** Save on Enter key (default: true, only for single-line) */
+    saveOnEnter?: boolean;
+};
+/**
+ * EditableText - Click-to-edit text display with save/cancel actions
+ *
+ * Displays text that becomes editable when clicked.
+ *
+ * @example
+ * ```tsx
+ * <EditableText
+ *   value={name}
+ *   onSave={(newValue) => updateName(newValue)}
+ *   placeholder="Enter name"
+ * />
+ * ```
+ */
+declare function EditableText({ value: controlledValue, defaultValue, onSave, onChange, onCancel, onEdit, placeholder, disabled, size, validationState, className, id, name, required, autoFocus, maxLength, saveOnEnter }: EditableTextProps): react_jsx_runtime.JSX.Element;
+
 type FieldsetProps = {
     /** Form controls to group together - typically FormField components */
     children: ReactNode;
@@ -4333,4 +4391,4 @@ type Debounced<T extends (...args: unknown[]) => void> = {
  */
 declare function useDebounce<T extends (...args: unknown[]) => void>(callback: T, delayMs: number, deps?: React.DependencyList): Debounced<T>;
 
-export { Accordion, AccordionItem, ActionCard, type ActionCardButton, type ActionCardItem, type ActionCardItemAction, type ActionCardProps, Alert, AuthProvider, Avatar, Badge, type BorderRadiusSize, Breadcrumbs, Button, ButtonGroup, ButtonWithIcon, Calendar, Card, CardActions, CardBody, CardFigure, CardFooter, CardHeader, type CardMarginSize, type CardPaddingSize, type CardSize, CardTitle, Checkbox, Chip, Code, CodeBlock, Code$1 as CodeInput, type CodeSize, ColorModeToggle, type ColumnDef, Container, type ContainerHeightSize, type ContainerMaxHeightSize, type ContainerMaxWidthSize, type ContainerMinHeightSize, type ContainerMinWidthSize, type ContainerWidthSize, DataTable, type DataTableAction, type DataTableActionItem, DatePicker, DeleteDialog, Dialog, Divider, Drawer, Dropdown, DropdownItem, EmptyState, FeatureSection, Fieldset, Footer, Form, FormInput, FormSelect, type FormSpacing, FormTextarea, type GapSize, GoogleLogo, Grid, Heading, type HeadingSize, Hero, HyddenLogo, Icon, IconButton, Input, InputGroup, type InputWidth, type InteractiveSize, LeftNavItem, LeftNavLayout, LeftNavSection, Link, List, ListItem, type MarginXSize, type MarginYSize, MicrosoftLogo, Modal, MultiSelect, Nav, NavDropdown, NavDropdownItem, Navbar, NavbarBrand, NavbarLink, NavbarToggle, useOverlay as OverlayProvider, type OverlaySize, Page, PageHeader, PageTransition, Pagination, Popover, ProgressBar, Radio, RadioGroup, ScrollNav, type ScrollNavItem, type ScrollNavProps, Section, SectionHeader, type SectionPaddingSize, Select, SelectItem, Sidebar, type Size, Skeleton, Slider, SmoothTransition, type SmoothTransitionProps, Spinner, Stack, type StackHeightSize, type StackMaxWidthSize, type StackMinHeightSize, type StackMinWidthSize, type StackWidthSize, type StatusColorProp, StatusLabel, type StatusLabelSize, Stepper, Switch, Table, TableBody, TableCell, TableFooter, TableHeadCell, TableHeader, TableRow, Tabs, Text, type TextSize, Textarea, type ThemeColor, type ThemeColorProp, ThemeProvider, Timeline, TimelineItem, Toast, Tooltip, type TransitionDuration, type TransitionType, type ValidationState$2 as ValidationState, authFetch, avatarSizes, badgeSizes, borderRadius, cardMargin, cardPadding, cardSizes, checkAuthStatus, chipSizes, codeSizes, containerHeight, containerMaxHeights, containerMaxWidths, containerMinHeights, containerMinWidths, containerWidth, formSpacing, gapSizes, getCurrentUser, getIconPixels, getInputClasses, getVisualClasses, headingSizes, inputBaseClasses, inputWidthSizes, interactiveSizes, loginExternal, logoSizes, logoutExternal, marginX, marginY, openLoginPopup, overlaySizes, redirectToLogin, sectionPadding, spinnerSizes, stackHeights, stackMaxHeights, stackMaxWidths, stackMinHeights, stackMinWidths, stackWidths, statusLabelSizes, textSizes, useAuth, useDebounce, useScrollReset, useStaggeredTransition, useTable, useTheme, validationBorderClasses, validationRingClasses, validationTextClasses, visualSizes };
+export { Accordion, AccordionItem, ActionCard, type ActionCardButton, type ActionCardItem, type ActionCardItemAction, type ActionCardProps, Alert, AuthProvider, Avatar, Badge, type BorderRadiusSize, Breadcrumbs, Button, ButtonGroup, ButtonWithIcon, Calendar, Card, CardActions, CardBody, CardFigure, CardFooter, CardHeader, type CardMarginSize, type CardPaddingSize, type CardSize, CardTitle, Checkbox, Chip, Code, CodeBlock, Code$1 as CodeInput, type CodeSize, ColorModeToggle, type ColumnDef, Container, type ContainerHeightSize, type ContainerMaxHeightSize, type ContainerMaxWidthSize, type ContainerMinHeightSize, type ContainerMinWidthSize, type ContainerWidthSize, DataTable, type DataTableAction, type DataTableActionItem, DatePicker, DeleteDialog, Dialog, Divider, Drawer, Dropdown, DropdownItem, EditableText, type EditableTextProps, EmptyState, FeatureSection, Fieldset, Footer, Form, FormInput, FormSelect, type FormSpacing, FormTextarea, type GapSize, GoogleLogo, Grid, Heading, type HeadingSize, Hero, HyddenLogo, Icon, IconButton, Input, InputGroup, type InputWidth, type InteractiveSize, LeftNavItem, LeftNavLayout, LeftNavSection, Link, List, ListItem, type MarginXSize, type MarginYSize, MicrosoftLogo, Modal, MultiSelect, Nav, NavDropdown, NavDropdownItem, Navbar, NavbarBrand, NavbarLink, NavbarToggle, useOverlay as OverlayProvider, type OverlaySize, Page, PageHeader, PageTransition, Pagination, Popover, ProgressBar, Radio, RadioGroup, ScrollNav, type ScrollNavItem, type ScrollNavProps, Section, SectionHeader, type SectionPaddingSize, Select, SelectItem, Sidebar, type Size, Skeleton, Slider, SmoothTransition, type SmoothTransitionProps, Spinner, Stack, type StackHeightSize, type StackMaxWidthSize, type StackMinHeightSize, type StackMinWidthSize, type StackWidthSize, type StatusColorProp, StatusLabel, type StatusLabelSize, Stepper, Switch, Table, TableBody, TableCell, TableFooter, TableHeadCell, TableHeader, TableRow, Tabs, Text, type TextSize, Textarea, type ThemeColor, type ThemeColorProp, ThemeProvider, Timeline, TimelineItem, Toast, Tooltip, type TransitionDuration, type TransitionType, type ValidationState$2 as ValidationState, authFetch, avatarSizes, badgeSizes, borderRadius, cardMargin, cardPadding, cardSizes, checkAuthStatus, chipSizes, codeSizes, containerHeight, containerMaxHeights, containerMaxWidths, containerMinHeights, containerMinWidths, containerWidth, formSpacing, gapSizes, getCurrentUser, getIconPixels, getInputClasses, getVisualClasses, headingSizes, inputBaseClasses, inputWidthSizes, interactiveSizes, loginExternal, logoSizes, logoutExternal, marginX, marginY, openLoginPopup, overlaySizes, redirectToLogin, sectionPadding, spinnerSizes, stackHeights, stackMaxHeights, stackMaxWidths, stackMinHeights, stackMinWidths, stackWidths, statusLabelSizes, textSizes, useAuth, useDebounce, useScrollReset, useStaggeredTransition, useTable, useTheme, validationBorderClasses, validationRingClasses, validationTextClasses, visualSizes };

package/dist/index.d.ts

@@ -2568,6 +2568,8 @@ type ColumnDef<T> = {
     width?: string;
     /** Text alignment for cells in this column */
     align?: 'left' | 'center' | 'right';
+    /** Whether text should wrap instead of truncating (useful for long strings) */
+    wrapText?: boolean;
     /** Custom render function for cell content (use as escape hatch when config options don't cover your use case) */
     render?: (value: T[keyof T], row: T, index: number) => ReactNode;
     /** Pre-built formatter for common data types */
@@ -2925,6 +2927,8 @@ type TableHeadCellProps = {
     align?: 'left' | 'center' | 'right';
     /** Scope attribute for accessibility (col for column headers, row for row headers) */
     scope?: 'col' | 'row';
+    /** Whether text should wrap instead of truncating */
+    wrapText?: boolean;
 } & HTMLAttributes<HTMLTableCellElement>;
 type TableCellProps = {
     /** Content of the cell */
@@ -2933,6 +2937,8 @@ type TableCellProps = {
     className?: string;
     /** Text alignment within the cell */
     align?: 'left' | 'center' | 'right';
+    /** Whether text should wrap instead of truncating */
+    wrapText?: boolean;
 } & HTMLAttributes<HTMLTableCellElement>;
 /**
  * Table - Semantic HTML table with consistent styling
@@ -2963,11 +2969,11 @@ declare function TableRow({ children, className, selected, ...props }: Readonly<
  * - Includes proper scope attribute for accessibility
  * - Default scope is 'col' for column headers
  */
-declare function TableHeadCell({ children, className, align, scope, ...props }: Readonly<TableHeadCellProps>): react_jsx_runtime.JSX.Element;
+declare function TableHeadCell({ children, className, align, scope, wrapText, ...props }: Readonly<TableHeadCellProps>): react_jsx_runtime.JSX.Element;
 /**
  * TableCell - Table data cell (td)
  */
-declare function TableCell({ children, className, align, ...props }: Readonly<TableCellProps>): react_jsx_runtime.JSX.Element;
+declare function TableCell({ children, className, align, wrapText, ...props }: Readonly<TableCellProps>): react_jsx_runtime.JSX.Element;
 
 type AlertProps = {
     /** The content to display inside the alert message */
@@ -3508,6 +3514,58 @@ declare namespace Code$1 {
     var displayName: string;
 }
 
+type EditableTextProps = {
+    /** Current value (controlled) */
+    value?: string;
+    /** Default value for uncontrolled mode */
+    defaultValue?: string;
+    /** Callback when save is clicked - receives the new value */
+    onSave?: (value: string) => void;
+    /** Callback when value changes - for controlled mode */
+    onChange?: (value: string) => void;
+    /** Callback when cancel is clicked */
+    onCancel?: () => void;
+    /** Callback when edit mode is entered */
+    onEdit?: () => void;
+    /** Placeholder text shown when value is empty */
+    placeholder?: string;
+    /** Disables editing */
+    disabled?: boolean;
+    /** Size variant - uses unified size system */
+    size?: InteractiveSize;
+    /** Validation state */
+    validationState?: ValidationState$2;
+    /** Custom CSS classes for the display text */
+    className?: string;
+    /** HTML id attribute */
+    id?: string;
+    /** HTML name attribute */
+    name?: string;
+    /** Required field */
+    required?: boolean;
+    /** Auto-focus input when entering edit mode */
+    autoFocus?: boolean;
+    /** Maximum length of input value */
+    maxLength?: number;
+    /** Save on Enter key (default: true, only for single-line) */
+    saveOnEnter?: boolean;
+};
+/**
+ * EditableText - Click-to-edit text display with save/cancel actions
+ *
+ * Displays text that becomes editable when clicked.
+ *
+ * @example
+ * ```tsx
+ * <EditableText
+ *   value={name}
+ *   onSave={(newValue) => updateName(newValue)}
+ *   placeholder="Enter name"
+ * />
+ * ```
+ */
+declare function EditableText({ value: controlledValue, defaultValue, onSave, onChange, onCancel, onEdit, placeholder, disabled, size, validationState, className, id, name, required, autoFocus, maxLength, saveOnEnter }: EditableTextProps): react_jsx_runtime.JSX.Element;
+
 type FieldsetProps = {
     /** Form controls to group together - typically FormField components */
     children: ReactNode;
@@ -4333,4 +4391,4 @@ type Debounced<T extends (...args: unknown[]) => void> = {
  */
 declare function useDebounce<T extends (...args: unknown[]) => void>(callback: T, delayMs: number, deps?: React.DependencyList): Debounced<T>;
 
-export { Accordion, AccordionItem, ActionCard, type ActionCardButton, type ActionCardItem, type ActionCardItemAction, type ActionCardProps, Alert, AuthProvider, Avatar, Badge, type BorderRadiusSize, Breadcrumbs, Button, ButtonGroup, ButtonWithIcon, Calendar, Card, CardActions, CardBody, CardFigure, CardFooter, CardHeader, type CardMarginSize, type CardPaddingSize, type CardSize, CardTitle, Checkbox, Chip, Code, CodeBlock, Code$1 as CodeInput, type CodeSize, ColorModeToggle, type ColumnDef, Container, type ContainerHeightSize, type ContainerMaxHeightSize, type ContainerMaxWidthSize, type ContainerMinHeightSize, type ContainerMinWidthSize, type ContainerWidthSize, DataTable, type DataTableAction, type DataTableActionItem, DatePicker, DeleteDialog, Dialog, Divider, Drawer, Dropdown, DropdownItem, EmptyState, FeatureSection, Fieldset, Footer, Form, FormInput, FormSelect, type FormSpacing, FormTextarea, type GapSize, GoogleLogo, Grid, Heading, type HeadingSize, Hero, HyddenLogo, Icon, IconButton, Input, InputGroup, type InputWidth, type InteractiveSize, LeftNavItem, LeftNavLayout, LeftNavSection, Link, List, ListItem, type MarginXSize, type MarginYSize, MicrosoftLogo, Modal, MultiSelect, Nav, NavDropdown, NavDropdownItem, Navbar, NavbarBrand, NavbarLink, NavbarToggle, useOverlay as OverlayProvider, type OverlaySize, Page, PageHeader, PageTransition, Pagination, Popover, ProgressBar, Radio, RadioGroup, ScrollNav, type ScrollNavItem, type ScrollNavProps, Section, SectionHeader, type SectionPaddingSize, Select, SelectItem, Sidebar, type Size, Skeleton, Slider, SmoothTransition, type SmoothTransitionProps, Spinner, Stack, type StackHeightSize, type StackMaxWidthSize, type StackMinHeightSize, type StackMinWidthSize, type StackWidthSize, type StatusColorProp, StatusLabel, type StatusLabelSize, Stepper, Switch, Table, TableBody, TableCell, TableFooter, TableHeadCell, TableHeader, TableRow, Tabs, Text, type TextSize, Textarea, type ThemeColor, type ThemeColorProp, ThemeProvider, Timeline, TimelineItem, Toast, Tooltip, type TransitionDuration, type TransitionType, type ValidationState$2 as ValidationState, authFetch, avatarSizes, badgeSizes, borderRadius, cardMargin, cardPadding, cardSizes, checkAuthStatus, chipSizes, codeSizes, containerHeight, containerMaxHeights, containerMaxWidths, containerMinHeights, containerMinWidths, containerWidth, formSpacing, gapSizes, getCurrentUser, getIconPixels, getInputClasses, getVisualClasses, headingSizes, inputBaseClasses, inputWidthSizes, interactiveSizes, loginExternal, logoSizes, logoutExternal, marginX, marginY, openLoginPopup, overlaySizes, redirectToLogin, sectionPadding, spinnerSizes, stackHeights, stackMaxHeights, stackMaxWidths, stackMinHeights, stackMinWidths, stackWidths, statusLabelSizes, textSizes, useAuth, useDebounce, useScrollReset, useStaggeredTransition, useTable, useTheme, validationBorderClasses, validationRingClasses, validationTextClasses, visualSizes };
+export { Accordion, AccordionItem, ActionCard, type ActionCardButton, type ActionCardItem, type ActionCardItemAction, type ActionCardProps, Alert, AuthProvider, Avatar, Badge, type BorderRadiusSize, Breadcrumbs, Button, ButtonGroup, ButtonWithIcon, Calendar, Card, CardActions, CardBody, CardFigure, CardFooter, CardHeader, type CardMarginSize, type CardPaddingSize, type CardSize, CardTitle, Checkbox, Chip, Code, CodeBlock, Code$1 as CodeInput, type CodeSize, ColorModeToggle, type ColumnDef, Container, type ContainerHeightSize, type ContainerMaxHeightSize, type ContainerMaxWidthSize, type ContainerMinHeightSize, type ContainerMinWidthSize, type ContainerWidthSize, DataTable, type DataTableAction, type DataTableActionItem, DatePicker, DeleteDialog, Dialog, Divider, Drawer, Dropdown, DropdownItem, EditableText, type EditableTextProps, EmptyState, FeatureSection, Fieldset, Footer, Form, FormInput, FormSelect, type FormSpacing, FormTextarea, type GapSize, GoogleLogo, Grid, Heading, type HeadingSize, Hero, HyddenLogo, Icon, IconButton, Input, InputGroup, type InputWidth, type InteractiveSize, LeftNavItem, LeftNavLayout, LeftNavSection, Link, List, ListItem, type MarginXSize, type MarginYSize, MicrosoftLogo, Modal, MultiSelect, Nav, NavDropdown, NavDropdownItem, Navbar, NavbarBrand, NavbarLink, NavbarToggle, useOverlay as OverlayProvider, type OverlaySize, Page, PageHeader, PageTransition, Pagination, Popover, ProgressBar, Radio, RadioGroup, ScrollNav, type ScrollNavItem, type ScrollNavProps, Section, SectionHeader, type SectionPaddingSize, Select, SelectItem, Sidebar, type Size, Skeleton, Slider, SmoothTransition, type SmoothTransitionProps, Spinner, Stack, type StackHeightSize, type StackMaxWidthSize, type StackMinHeightSize, type StackMinWidthSize, type StackWidthSize, type StatusColorProp, StatusLabel, type StatusLabelSize, Stepper, Switch, Table, TableBody, TableCell, TableFooter, TableHeadCell, TableHeader, TableRow, Tabs, Text, type TextSize, Textarea, type ThemeColor, type ThemeColorProp, ThemeProvider, Timeline, TimelineItem, Toast, Tooltip, type TransitionDuration, type TransitionType, type ValidationState$2 as ValidationState, authFetch, avatarSizes, badgeSizes, borderRadius, cardMargin, cardPadding, cardSizes, checkAuthStatus, chipSizes, codeSizes, containerHeight, containerMaxHeights, containerMaxWidths, containerMinHeights, containerMinWidths, containerWidth, formSpacing, gapSizes, getCurrentUser, getIconPixels, getInputClasses, getVisualClasses, headingSizes, inputBaseClasses, inputWidthSizes, interactiveSizes, loginExternal, logoSizes, logoutExternal, marginX, marginY, openLoginPopup, overlaySizes, redirectToLogin, sectionPadding, spinnerSizes, stackHeights, stackMaxHeights, stackMaxWidths, stackMinHeights, stackMinWidths, stackWidths, statusLabelSizes, textSizes, useAuth, useDebounce, useScrollReset, useStaggeredTransition, useTable, useTheme, validationBorderClasses, validationRingClasses, validationTextClasses, visualSizes };

package/dist/index.js

@@ -3898,7 +3898,7 @@ function Table({
         }
         ${hoverable ? `
         table tbody tr:hover {
-          background-color: hsl(var(--muted) / 0.5);
+          background-color: hsl(var(--muted) / 0.6) !important;
         }
         ` : ""}
         .table-compact td,
@@ -3926,6 +3926,7 @@ function TableHeadCell({
   className = "",
   align = "left",
   scope = "col",
+  wrapText = false,
   ...props
 }) {
   const alignClasses4 = {
@@ -3933,15 +3934,23 @@ function TableHeadCell({
     center: "text-center",
     right: "text-right"
   };
-  return /* @__PURE__ */ jsx("th", { scope, className: `px-6 py-3 font-medium ${alignClasses4[align]} ${className}`, ...props, children });
+  const wrapClasses = wrapText ? "whitespace-normal break-words" : "whitespace-nowrap";
+  return /* @__PURE__ */ jsx("th", { scope, className: `px-6 py-3 font-medium ${alignClasses4[align]} ${wrapClasses} ${className}`, ...props, children });
 }
-function TableCell({ children, className = "", align = "left", ...props }) {
+function TableCell({
+  children,
+  className = "",
+  align = "left",
+  wrapText = false,
+  ...props
+}) {
   const alignClasses4 = {
     left: "text-left",
     center: "text-center",
     right: "text-right"
   };
-  return /* @__PURE__ */ jsx("td", { className: `px-6 py-4 whitespace-nowrap ${alignClasses4[align]} ${className}`, ...props, children });
+  const wrapClasses = wrapText ? "whitespace-normal break-words" : "whitespace-nowrap";
+  return /* @__PURE__ */ jsx("td", { className: `px-6 py-4 ${wrapClasses} ${alignClasses4[align]} ${className}`, ...props, children });
 }
 var table_default = Table;
 function Checkbox({
@@ -4268,7 +4277,7 @@ function DataTable({
               columns.map((column) => {
                 const value = row[column.key];
                 const content = renderCellContent(value, column, row, actualIndex);
-                return /* @__PURE__ */ jsx(TableCell, { align: column.align, children: content }, String(column.key));
+                return /* @__PURE__ */ jsx(TableCell, { align: column.align, wrapText: column.wrapText, children: content }, String(column.key));
               }),
               actions && /* @__PURE__ */ jsx(TableCell, { align: "center", onClick: (e) => e.stopPropagation(), children: (() => {
                 let rowActions;
@@ -5273,6 +5282,137 @@ function Code({ children, size = "md", variant = "default", className = "" }) {
 }
 Code.displayName = "Code";
 var code_default = Code;
+function EditableText({
+  value: controlledValue,
+  defaultValue = "",
+  onSave,
+  onChange,
+  onCancel,
+  onEdit,
+  placeholder = "Click to edit",
+  disabled = false,
+  size = "md",
+  validationState = "default",
+  className = "",
+  id,
+  name,
+  required = false,
+  autoFocus = true,
+  maxLength,
+  saveOnEnter = true
+}) {
+  const isControlled = controlledValue !== void 0;
+  const [internalValue, setInternalValue] = useState(defaultValue);
+  const [isEditing, setIsEditing] = useState(false);
+  const [editValue, setEditValue] = useState("");
+  const inputRef = useRef(null);
+  const currentValue = isControlled ? controlledValue : internalValue;
+  useEffect(() => {
+    if (isEditing && autoFocus && inputRef.current) {
+      inputRef.current.focus();
+      inputRef.current.select();
+    }
+  }, [isEditing, autoFocus]);
+  const handleClick = () => {
+    if (disabled) return;
+    setEditValue(currentValue);
+    setIsEditing(true);
+    onEdit?.();
+  };
+  const handleSave = () => {
+    const trimmedValue = editValue.trim();
+    if (!isControlled) {
+      setInternalValue(trimmedValue);
+    }
+    onSave?.(trimmedValue);
+    onChange?.(trimmedValue);
+    setIsEditing(false);
+  };
+  const handleCancel = () => {
+    setEditValue(currentValue);
+    setIsEditing(false);
+    onCancel?.();
+  };
+  const handleKeyDown = (e) => {
+    if (e.key === "Escape") {
+      e.preventDefault();
+      handleCancel();
+    } else if (e.key === "Enter" && saveOnEnter && !e.shiftKey && !e.ctrlKey && !e.metaKey) {
+      e.preventDefault();
+      handleSave();
+    }
+  };
+  const handleBlur = (e) => {
+    setTimeout(() => {
+      const relatedTarget = e.relatedTarget;
+      const isClickingButton = relatedTarget?.closest("[data-editable-actions]");
+      if (!isClickingButton) {
+        handleCancel();
+      }
+    }, 0);
+  };
+  const handleChange = (e) => {
+    setEditValue(e.target.value);
+  };
+  const sizeConfig = {
+    xs: "text-sm sm:text-xs",
+    sm: "text-base sm:text-sm",
+    md: "text-base sm:text-sm",
+    lg: "text-lg sm:text-base",
+    xl: "text-xl sm:text-lg"
+  }[size];
+  if (isEditing) {
+    const validationBorder = {
+      default: "border-b-foreground/30 focus:border-b-foreground",
+      error: "border-b-destructive focus:border-b-destructive",
+      success: "border-b-success focus:border-b-success",
+      warning: "border-b-warning focus:border-b-warning"
+    }[validationState];
+    const commonProps = {
+      ref: inputRef,
+      value: editValue,
+      onChange: handleChange,
+      onKeyDown: handleKeyDown,
+      onBlur: handleBlur,
+      placeholder,
+      disabled,
+      id,
+      name,
+      required,
+      maxLength,
+      className: `${sizeConfig} w-full border-0 border-b ${validationBorder} bg-transparent py-1 outline-none transition-colors placeholder:text-muted-foreground`
+    };
+    return /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-2", children: [
+      /* @__PURE__ */ jsx("input", { ...commonProps, type: "text" }),
+      /* @__PURE__ */ jsxs("div", { "data-editable-actions": true, className: "flex items-center gap-1", children: [
+        /* @__PURE__ */ jsx(icon_button_default, { icon: "IconX", ariaLabel: "Cancel", onClick: handleCancel, variant: "error", size: "xs" }),
+        /* @__PURE__ */ jsx(icon_button_default, { icon: "IconCheck", ariaLabel: "Save", onClick: handleSave, variant: "success", size: "xs" })
+      ] })
+    ] });
+  }
+  const displayText = currentValue || placeholder;
+  const isPlaceholder = !currentValue;
+  return /* @__PURE__ */ jsxs(
+    "button",
+    {
+      type: "button",
+      onClick: handleClick,
+      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(
+          Icon,
+          {
+            name: "IconPencil",
+            className: "shrink-0 opacity-0 transition-opacity group-hover:opacity-50 group-focus:opacity-50",
+            size: "xs"
+          }
+        )
+      ]
+    }
+  );
+}
 var alignClasses3 = {
   start: "items-start",
   center: "items-center",
@@ -6251,6 +6391,6 @@ function useDebounce(callback, delayMs, deps) {
 }
 var useDebounce_default = useDebounce;
 
-export { accordion_default as Accordion, AccordionItem, ActionCard, alert_default as Alert, AuthProvider, avatar_default as Avatar, badge_default as Badge, breadcrumbs_default as Breadcrumbs, button_default as Button, button_group_default as ButtonGroup, button_with_icon_default as ButtonWithIcon, calendar_default as Calendar, card_default as Card, card_actions_default as CardActions, card_body_default as CardBody, card_figure_default as CardFigure, card_footer_default as CardFooter, card_header_default as CardHeader, card_title_default as CardTitle, checkbox_default as Checkbox, chip_default as Chip, code_default2 as Code, code_block_default as CodeBlock, code_default as CodeInput, color_mode_toggle_default as ColorModeToggle, container_default as Container, data_table_default as DataTable, date_picker_default as DatePicker, delete_dialog_default as DeleteDialog, dialog_default as Dialog, divider_default as Divider, drawer_default as Drawer, dropdown_default as Dropdown, DropdownItem, empty_state_default as EmptyState, feature_section_default as FeatureSection, fieldset_default as Fieldset, footer_default as Footer, form_default as Form, form_input_default as FormInput, form_select_default as FormSelect, form_textarea_default as FormTextarea, GoogleLogo, grid_default as Grid, heading_default as Heading, hero_default as Hero, HyddenLogo, icon_default as Icon, icon_button_default as IconButton, input_default as Input, input_group_default as InputGroup, left_nav_item_default as LeftNavItem, left_nav_layout_default as LeftNavLayout, left_nav_section_default as LeftNavSection, link_default as Link, list_default as List, ListItem, MicrosoftLogo, modal_default as Modal, multi_select_default as MultiSelect, nav_default as Nav, nav_dropdown_default as NavDropdown, nav_dropdown_item_default as NavDropdownItem, navbar_default as Navbar, navbar_brand_default as NavbarBrand, navbar_link_default as NavbarLink, navbar_toggle_default as NavbarToggle, useOverlay_default as OverlayProvider, page_default as Page, page_header_default as PageHeader, page_transition_default as PageTransition, pagination_default as Pagination, popover_default as Popover, progress_bar_default as ProgressBar, radio_default as Radio, radio_group_default as RadioGroup, scroll_nav_default as ScrollNav, section_default as Section, section_header_default as SectionHeader, select_default as Select, select_item_default as SelectItem, sidebar_default as Sidebar, skeleton_default as Skeleton, slider_default as Slider, smooth_transition_default as SmoothTransition, spinner_default as Spinner, stack_default as Stack, status_label_default as StatusLabel, stepper_default as Stepper, switch_default as Switch, table_default as Table, TableBody, TableCell, TableFooter, TableHeadCell, TableHeader, TableRow, tabs_default as Tabs, text_default as Text, textarea_default as Textarea, theme_provider_default as ThemeProvider, timeline_default as Timeline, TimelineItem, toast_default as Toast, tooltip_default as Tooltip, authFetch, avatarSizes, badgeSizes, borderRadius, cardMargin, cardPadding, cardSizes, checkAuthStatus, chipSizes, codeSizes, containerHeight, containerMaxHeights, containerMaxWidths, containerMinHeights, containerMinWidths, containerWidth, formSpacing, gapSizes, getCurrentUser, getIconPixels, getInputClasses, getVisualClasses, headingSizes, inputBaseClasses, inputWidthSizes, interactiveSizes, loginExternal, logoSizes, logoutExternal, marginX, marginY, openLoginPopup, overlaySizes, redirectToLogin, sectionPadding, spinnerSizes, stackHeights, stackMaxHeights, stackMaxWidths, stackMinHeights, stackMinWidths, stackWidths, statusLabelSizes, textSizes, useAuth, useDebounce_default as useDebounce, useScrollReset_default as useScrollReset, useStaggeredTransition, use_table_default as useTable, useTheme, validationBorderClasses, validationRingClasses, validationTextClasses, visualSizes };
+export { accordion_default as Accordion, AccordionItem, ActionCard, alert_default as Alert, AuthProvider, avatar_default as Avatar, badge_default as Badge, breadcrumbs_default as Breadcrumbs, button_default as Button, button_group_default as ButtonGroup, button_with_icon_default as ButtonWithIcon, calendar_default as Calendar, card_default as Card, card_actions_default as CardActions, card_body_default as CardBody, card_figure_default as CardFigure, card_footer_default as CardFooter, card_header_default as CardHeader, card_title_default as CardTitle, checkbox_default as Checkbox, chip_default as Chip, code_default2 as Code, code_block_default as CodeBlock, code_default as CodeInput, color_mode_toggle_default as ColorModeToggle, container_default as Container, data_table_default as DataTable, date_picker_default as DatePicker, delete_dialog_default as DeleteDialog, dialog_default as Dialog, divider_default as Divider, drawer_default as Drawer, dropdown_default as Dropdown, DropdownItem, EditableText, empty_state_default as EmptyState, feature_section_default as FeatureSection, fieldset_default as Fieldset, footer_default as Footer, form_default as Form, form_input_default as FormInput, form_select_default as FormSelect, form_textarea_default as FormTextarea, GoogleLogo, grid_default as Grid, heading_default as Heading, hero_default as Hero, HyddenLogo, icon_default as Icon, icon_button_default as IconButton, input_default as Input, input_group_default as InputGroup, left_nav_item_default as LeftNavItem, left_nav_layout_default as LeftNavLayout, left_nav_section_default as LeftNavSection, link_default as Link, list_default as List, ListItem, MicrosoftLogo, modal_default as Modal, multi_select_default as MultiSelect, nav_default as Nav, nav_dropdown_default as NavDropdown, nav_dropdown_item_default as NavDropdownItem, navbar_default as Navbar, navbar_brand_default as NavbarBrand, navbar_link_default as NavbarLink, navbar_toggle_default as NavbarToggle, useOverlay_default as OverlayProvider, page_default as Page, page_header_default as PageHeader, page_transition_default as PageTransition, pagination_default as Pagination, popover_default as Popover, progress_bar_default as ProgressBar, radio_default as Radio, radio_group_default as RadioGroup, scroll_nav_default as ScrollNav, section_default as Section, section_header_default as SectionHeader, select_default as Select, select_item_default as SelectItem, sidebar_default as Sidebar, skeleton_default as Skeleton, slider_default as Slider, smooth_transition_default as SmoothTransition, spinner_default as Spinner, stack_default as Stack, status_label_default as StatusLabel, stepper_default as Stepper, switch_default as Switch, table_default as Table, TableBody, TableCell, TableFooter, TableHeadCell, TableHeader, TableRow, tabs_default as Tabs, text_default as Text, textarea_default as Textarea, theme_provider_default as ThemeProvider, timeline_default as Timeline, TimelineItem, toast_default as Toast, tooltip_default as Tooltip, authFetch, avatarSizes, badgeSizes, borderRadius, cardMargin, cardPadding, cardSizes, checkAuthStatus, chipSizes, codeSizes, containerHeight, containerMaxHeights, containerMaxWidths, containerMinHeights, containerMinWidths, containerWidth, formSpacing, gapSizes, getCurrentUser, getIconPixels, getInputClasses, getVisualClasses, headingSizes, inputBaseClasses, inputWidthSizes, interactiveSizes, loginExternal, logoSizes, logoutExternal, marginX, marginY, openLoginPopup, overlaySizes, redirectToLogin, sectionPadding, spinnerSizes, stackHeights, stackMaxHeights, stackMaxWidths, stackMinHeights, stackMinWidths, stackWidths, statusLabelSizes, textSizes, useAuth, useDebounce_default as useDebounce, useScrollReset_default as useScrollReset, useStaggeredTransition, use_table_default as useTable, useTheme, validationBorderClasses, validationRingClasses, validationTextClasses, visualSizes };
 //# sourceMappingURL=index.js.map
 //# sourceMappingURL=index.js.map