@universe-platform/ui 0.1.0-beta.16 → 0.1.0-beta.17

package/dist/globals.css

@@ -72,7 +72,9 @@
     --color-indigo-600: oklch(51.1% 0.262 276.966);
     --color-indigo-700: oklch(45.7% 0.24 277.023);
     --color-violet-50: oklch(96.9% 0.016 293.756);
+    --color-violet-100: oklch(94.3% 0.029 294.588);
     --color-violet-200: oklch(89.4% 0.057 293.283);
+    --color-violet-600: oklch(54.1% 0.281 293.009);
     --color-violet-700: oklch(49.1% 0.27 292.581);
     --color-purple-50: oklch(97.7% 0.014 308.299);
     --color-purple-200: oklch(90.2% 0.063 306.703);
@@ -107,6 +109,7 @@
     --color-white: #fff;
     --spacing: 0.25rem;
     --container-xs: 20rem;
+    --container-sm: 24rem;
     --container-md: 28rem;
     --container-lg: 32rem;
     --container-xl: 36rem;
@@ -296,6 +299,9 @@
   .pointer-events-none {
     pointer-events: none;
   }
+  .invisible {
+    visibility: hidden;
+  }
   .visible {
     visibility: visible;
   }
@@ -575,15 +581,18 @@
   .max-h-\[calc\(100vh-240px\)\] {
     max-height: calc(100vh - 240px);
   }
-  .max-h-full {
-    max-height: 100%;
-  }
   .min-h-0 {
     min-height: 0;
   }
   .min-h-\[26rem\] {
     min-height: 26rem;
   }
+  .min-h-\[28px\] {
+    min-height: 28px;
+  }
+  .min-h-\[32px\] {
+    min-height: 32px;
+  }
   .min-h-\[48px\] {
     min-height: 48px;
   }
@@ -593,6 +602,9 @@
   .min-h-\[320px\] {
     min-height: 320px;
   }
+  .min-h-\[inherit\] {
+    min-height: inherit;
+  }
   .w-1\.5 {
     width: calc(var(--spacing) * 1.5);
   }
@@ -671,8 +683,8 @@
   .max-w-\[150px\] {
     max-width: 150px;
   }
-  .max-w-\[160px\] {
-    max-width: 160px;
+  .max-w-\[180px\] {
+    max-width: 180px;
   }
   .max-w-\[calc\(100\%-28px\)\] {
     max-width: calc(100% - 28px);
@@ -686,6 +698,9 @@
   .max-w-md {
     max-width: var(--container-md);
   }
+  .max-w-sm {
+    max-width: var(--container-sm);
+  }
   .max-w-xs {
     max-width: var(--container-xs);
   }
@@ -792,8 +807,8 @@
   .flex-col {
     flex-direction: column;
   }
-  .flex-nowrap {
-    flex-wrap: nowrap;
+  .flex-row {
+    flex-direction: row;
   }
   .flex-wrap {
     flex-wrap: wrap;
@@ -885,6 +900,13 @@
       margin-block-end: calc(calc(var(--spacing) * 3) * calc(1 - var(--tw-space-y-reverse)));
     }
   }
+  .space-y-3\.5 {
+    :where(& > :not(:last-child)) {
+      --tw-space-y-reverse: 0;
+      margin-block-start: calc(calc(var(--spacing) * 3.5) * var(--tw-space-y-reverse));
+      margin-block-end: calc(calc(var(--spacing) * 3.5) * calc(1 - var(--tw-space-y-reverse)));
+    }
+  }
   .space-y-4 {
     :where(& > :not(:last-child)) {
       --tw-space-y-reverse: 0;
@@ -1128,6 +1150,12 @@
   .border-slate-300 {
     border-color: var(--color-slate-300);
   }
+  .border-slate-700\/60 {
+    border-color: color-mix(in srgb, oklch(37.2% 0.044 257.287) 60%, transparent);
+    @supports (color: color-mix(in lab, red, red)) {
+      border-color: color-mix(in oklab, var(--color-slate-700) 60%, transparent);
+    }
+  }
   .border-teal-200 {
     border-color: var(--color-teal-200);
   }
@@ -1347,6 +1375,12 @@
       background-color: color-mix(in oklab, var(--color-slate-900) 60%, transparent);
     }
   }
+  .bg-slate-900\/95 {
+    background-color: color-mix(in srgb, oklch(20.8% 0.042 265.755) 95%, transparent);
+    @supports (color: color-mix(in lab, red, red)) {
+      background-color: color-mix(in oklab, var(--color-slate-900) 95%, transparent);
+    }
+  }
   .bg-teal-50 {
     background-color: var(--color-teal-50);
   }
@@ -1359,6 +1393,12 @@
   .bg-white {
     background-color: var(--color-white);
   }
+  .bg-white\/60 {
+    background-color: color-mix(in srgb, #fff 60%, transparent);
+    @supports (color: color-mix(in lab, red, red)) {
+      background-color: color-mix(in oklab, var(--color-white) 60%, transparent);
+    }
+  }
   .bg-white\/80 {
     background-color: color-mix(in srgb, #fff 80%, transparent);
     @supports (color: color-mix(in lab, red, red)) {
@@ -1524,6 +1564,12 @@
   .pb-2\.5 {
     padding-bottom: calc(var(--spacing) * 2.5);
   }
+  .pl-1 {
+    padding-left: var(--spacing);
+  }
+  .pl-2 {
+    padding-left: calc(var(--spacing) * 2);
+  }
   .pl-3 {
     padding-left: calc(var(--spacing) * 3);
   }
@@ -1616,6 +1662,9 @@
   .break-words {
     overflow-wrap: break-word;
   }
+  .text-ellipsis {
+    text-overflow: ellipsis;
+  }
   .whitespace-nowrap {
     white-space: nowrap;
   }
@@ -1754,6 +1803,9 @@
   .text-teal-700 {
     color: var(--color-teal-700);
   }
+  .text-violet-600 {
+    color: var(--color-violet-600);
+  }
   .text-violet-700 {
     color: var(--color-violet-700);
   }
@@ -1769,6 +1821,9 @@
   .text-yellow-700 {
     color: var(--color-yellow-700);
   }
+  .uppercase {
+    text-transform: uppercase;
+  }
   .italic {
     font-style: italic;
   }
@@ -1953,6 +2008,27 @@
     -webkit-user-select: text;
     user-select: text;
   }
+  .group-hover\:bg-amber-100 {
+    &:is(:where(.group):hover *) {
+      @media (hover: hover) {
+        background-color: var(--color-amber-100);
+      }
+    }
+  }
+  .group-hover\:bg-emerald-100 {
+    &:is(:where(.group):hover *) {
+      @media (hover: hover) {
+        background-color: var(--color-emerald-100);
+      }
+    }
+  }
+  .group-hover\:bg-sky-100 {
+    &:is(:where(.group):hover *) {
+      @media (hover: hover) {
+        background-color: var(--color-sky-100);
+      }
+    }
+  }
   .group-hover\:bg-transparent {
     &:is(:where(.group):hover *) {
       @media (hover: hover) {
@@ -1960,6 +2036,13 @@
       }
     }
   }
+  .group-hover\:bg-violet-100 {
+    &:is(:where(.group):hover *) {
+      @media (hover: hover) {
+        background-color: var(--color-violet-100);
+      }
+    }
+  }
   .group-hover\:opacity-100 {
     &:is(:where(.group):hover *) {
       @media (hover: hover) {
@@ -2138,6 +2221,16 @@
       }
     }
   }
+  .hover\:bg-emerald-50\/80 {
+    &:hover {
+      @media (hover: hover) {
+        background-color: color-mix(in srgb, oklch(97.9% 0.021 166.113) 80%, transparent);
+        @supports (color: color-mix(in lab, red, red)) {
+          background-color: color-mix(in oklab, var(--color-emerald-50) 80%, transparent);
+        }
+      }
+    }
+  }
   .hover\:bg-emerald-100 {
     &:hover {
       @media (hover: hover) {
@@ -2286,13 +2379,6 @@
       }
     }
   }
-  .hover\:text-emerald-600 {
-    &:hover {
-      @media (hover: hover) {
-        color: var(--color-emerald-600);
-      }
-    }
-  }
   .hover\:text-emerald-700 {
     &:hover {
       @media (hover: hover) {
@@ -2356,13 +2442,6 @@
       }
     }
   }
-  .hover\:opacity-60 {
-    &:hover {
-      @media (hover: hover) {
-        opacity: 60%;
-      }
-    }
-  }
   .hover\:opacity-80 {
     &:hover {
       @media (hover: hover) {

package/dist/index.d.mts

@@ -112,7 +112,7 @@ interface RolePermissions {
     permissions: ComponentPermissions;
     readOnly: boolean;
 }
-declare function getRolePermissions(role?: OrgRole | string | null): RolePermissions;
+declare function getRolePermissions(role?: OrgRole | null): RolePermissions;
 
 interface TableConfig extends SchemaDef {
 }
@@ -120,7 +120,7 @@ type TableData = RecordData[];
 type RowStatusType = "success" | "failed" | "skipped" | "partial";
 interface TableBlockProps extends Partial<BaseComponentProps<TableData, TableConfig>> {
     exportAction?: (payload: any) => Promise<any>;
-    role?: OrgRole | string;
+    role?: OrgRole | null;
     permissions?: ComponentPermissions;
     readOnly?: boolean;
     onSelectionChange?: (selectedIds: string[]) => void;
@@ -128,6 +128,7 @@ interface TableBlockProps extends Partial<BaseComponentProps<TableData, TableCon
         status: RowStatusType;
         tooltip?: string;
     } | RowStatusType>;
+    editModelUrl?: string;
 }
 interface CreateRecordPayload {
     records: RecordData[];
@@ -304,6 +305,58 @@ interface RelationFilterPopoverProps {
 }
 declare function RelationFilterPopover({ isOpen, onClose, column, triggerRect, options, filterValue, selectedValues, onSelectionChange, isLoading, }: RelationFilterPopoverProps): react_jsx_runtime.JSX.Element | null;
 
+/**
+ * useSmartTooltip - Reusable hook for detecting text truncation and rendering
+ * a custom portal tooltip bubble strictly when content is clipped (scrollWidth > clientWidth).
+ */
+declare function useSmartTooltip<T extends HTMLElement = HTMLElement>(): {
+    targetRef: react__default.RefObject<T | null>;
+    checkTruncation: () => boolean;
+    handleMouseEnter: () => void;
+    handleMouseLeave: () => void;
+    hideBubble: () => void;
+    renderTooltip: (text?: string, dir?: "ltr" | "rtl" | "auto") => react__default.ReactPortal | null;
+    isTruncated: boolean;
+    showBubble: boolean;
+};
+interface TruncatedTooltipProps {
+    text: string;
+    tooltipText?: string;
+    dir?: 'ltr' | 'rtl' | 'auto';
+    className?: string;
+    wrapperClassName?: string;
+    children?: react__default.ReactNode;
+}
+/**
+ * TruncatedTooltip - A text container that applies ellipsis truncation
+ * and only displays a custom portal tooltip when text overflows horizontal bounds.
+ * Expands to full cell dimensions (w-full h-full min-h-[inherit]) for reliable hover detection.
+ * No native browser title attribute is rendered.
+ */
+declare const TruncatedTooltip: react__default.FC<TruncatedTooltipProps>;
+interface SmartTextCellProps {
+    value: any;
+    onChange?: (val: any) => void;
+    readOnly?: boolean;
+    type?: 'text' | 'number' | 'tel';
+    placeholder?: string;
+    className?: string;
+    prefix?: react__default.ReactNode;
+    suffix?: react__default.ReactNode;
+    dir?: 'ltr' | 'rtl' | 'auto';
+    tooltipText?: string;
+    step?: string;
+    onFocus?: (e: react__default.FocusEvent<HTMLInputElement>) => void;
+    onBlur?: (e: react__default.FocusEvent<HTMLInputElement>) => void;
+}
+/**
+ * SmartTextCell - Text cell with intelligent hover tooltip.
+ * Only displays the custom portal tooltip bubble if the text is actually
+ * clipped/truncated within its visible boundary (scrollWidth > clientWidth).
+ * Native title attributes are omitted to prevent duplicate tooltips.
+ */
+declare const SmartTextCell: react__default.FC<SmartTextCellProps>;
+
 interface MetaTemplateComponent {
     type: "HEADER" | "BODY" | "FOOTER" | "BUTTONS" | string;
     format?: "TEXT" | "IMAGE" | "DOCUMENT" | "VIDEO" | string;
@@ -387,4 +440,4 @@ declare function ToastProvider({ children }: {
 
 declare function useToast(): ToastContextType;
 
-export { type BaseComponentProps, ColumnHeaderTitle, type ColumnHeaderTitleProps, type ComponentCommunication, type ComponentConfig, type ComponentData, type ComponentPermissions, type ComponentRegistry, type ComponentState, type CreateRecordPayload, CreateTemplateModal, type CreateTemplateModalProps, DatePickerCell, type DeleteRecordPayload, LinkPickerCell, type MetaTemplateComponent, type MetaWhatsAppTemplate, type OrgRole, PASTEL_PALETTES, type PastelPalette, type RelationFilterOption, type RelationFilterPayload, RelationFilterPopover, type RelationFilterPopoverProps, RelationPickerCell, type RolePermissions, type RowStatusType, type SplitTitleResult, TableBlock, type TableBlockProps, type TableConfig, type TableData, TimePickerCell, ToastContext, type ToastContextType, type ToastItem, ToastProvider, UNIVERSE_COMPONENTS, type UniverseComponentType, type UpdateRecordPayload, type UseColumnReorderOptions, type UseColumnResizeOptions, WhatsAppComponent, type WhatsAppComponentProps, type WhatsAppData, calculateMinColumnWidth, cn, formatConflictCellValue, formatPhoneDisplay, formatTimeInput, formatTimeIso, generateWhatsAppLink, getDeterministicPastelBadge, getRolePermissions, isValidPhoneNumber, measureTextWidth, normalizePhoneForWhatsApp, normalizeRelationValue, openWhatsAppChat, parseLinkValue, parseTimeParts, resolveProtocol, sanitizePhoneNumber, splitHeaderTitle, useColumnReorder, useColumnResize, useToast };
+export { type BaseComponentProps, ColumnHeaderTitle, type ColumnHeaderTitleProps, type ComponentCommunication, type ComponentConfig, type ComponentData, type ComponentPermissions, type ComponentRegistry, type ComponentState, type CreateRecordPayload, CreateTemplateModal, type CreateTemplateModalProps, DatePickerCell, type DeleteRecordPayload, LinkPickerCell, type MetaTemplateComponent, type MetaWhatsAppTemplate, type OrgRole, PASTEL_PALETTES, type PastelPalette, type RelationFilterOption, type RelationFilterPayload, RelationFilterPopover, type RelationFilterPopoverProps, RelationPickerCell, type RolePermissions, type RowStatusType, SmartTextCell, type SplitTitleResult, TableBlock, type TableBlockProps, type TableConfig, type TableData, TimePickerCell, ToastContext, type ToastContextType, type ToastItem, ToastProvider, TruncatedTooltip, UNIVERSE_COMPONENTS, type UniverseComponentType, type UpdateRecordPayload, type UseColumnReorderOptions, type UseColumnResizeOptions, WhatsAppComponent, type WhatsAppComponentProps, type WhatsAppData, calculateMinColumnWidth, cn, formatConflictCellValue, formatPhoneDisplay, formatTimeInput, formatTimeIso, generateWhatsAppLink, getDeterministicPastelBadge, getRolePermissions, isValidPhoneNumber, measureTextWidth, normalizePhoneForWhatsApp, normalizeRelationValue, openWhatsAppChat, parseLinkValue, parseTimeParts, resolveProtocol, sanitizePhoneNumber, splitHeaderTitle, useColumnReorder, useColumnResize, useSmartTooltip, useToast };

package/dist/index.d.ts

@@ -112,7 +112,7 @@ interface RolePermissions {
     permissions: ComponentPermissions;
     readOnly: boolean;
 }
-declare function getRolePermissions(role?: OrgRole | string | null): RolePermissions;
+declare function getRolePermissions(role?: OrgRole | null): RolePermissions;
 
 interface TableConfig extends SchemaDef {
 }
@@ -120,7 +120,7 @@ type TableData = RecordData[];
 type RowStatusType = "success" | "failed" | "skipped" | "partial";
 interface TableBlockProps extends Partial<BaseComponentProps<TableData, TableConfig>> {
     exportAction?: (payload: any) => Promise<any>;
-    role?: OrgRole | string;
+    role?: OrgRole | null;
     permissions?: ComponentPermissions;
     readOnly?: boolean;
     onSelectionChange?: (selectedIds: string[]) => void;
@@ -128,6 +128,7 @@ interface TableBlockProps extends Partial<BaseComponentProps<TableData, TableCon
         status: RowStatusType;
         tooltip?: string;
     } | RowStatusType>;
+    editModelUrl?: string;
 }
 interface CreateRecordPayload {
     records: RecordData[];
@@ -304,6 +305,58 @@ interface RelationFilterPopoverProps {
 }
 declare function RelationFilterPopover({ isOpen, onClose, column, triggerRect, options, filterValue, selectedValues, onSelectionChange, isLoading, }: RelationFilterPopoverProps): react_jsx_runtime.JSX.Element | null;
 
+/**
+ * useSmartTooltip - Reusable hook for detecting text truncation and rendering
+ * a custom portal tooltip bubble strictly when content is clipped (scrollWidth > clientWidth).
+ */
+declare function useSmartTooltip<T extends HTMLElement = HTMLElement>(): {
+    targetRef: react__default.RefObject<T | null>;
+    checkTruncation: () => boolean;
+    handleMouseEnter: () => void;
+    handleMouseLeave: () => void;
+    hideBubble: () => void;
+    renderTooltip: (text?: string, dir?: "ltr" | "rtl" | "auto") => react__default.ReactPortal | null;
+    isTruncated: boolean;
+    showBubble: boolean;
+};
+interface TruncatedTooltipProps {
+    text: string;
+    tooltipText?: string;
+    dir?: 'ltr' | 'rtl' | 'auto';
+    className?: string;
+    wrapperClassName?: string;
+    children?: react__default.ReactNode;
+}
+/**
+ * TruncatedTooltip - A text container that applies ellipsis truncation
+ * and only displays a custom portal tooltip when text overflows horizontal bounds.
+ * Expands to full cell dimensions (w-full h-full min-h-[inherit]) for reliable hover detection.
+ * No native browser title attribute is rendered.
+ */
+declare const TruncatedTooltip: react__default.FC<TruncatedTooltipProps>;
+interface SmartTextCellProps {
+    value: any;
+    onChange?: (val: any) => void;
+    readOnly?: boolean;
+    type?: 'text' | 'number' | 'tel';
+    placeholder?: string;
+    className?: string;
+    prefix?: react__default.ReactNode;
+    suffix?: react__default.ReactNode;
+    dir?: 'ltr' | 'rtl' | 'auto';
+    tooltipText?: string;
+    step?: string;
+    onFocus?: (e: react__default.FocusEvent<HTMLInputElement>) => void;
+    onBlur?: (e: react__default.FocusEvent<HTMLInputElement>) => void;
+}
+/**
+ * SmartTextCell - Text cell with intelligent hover tooltip.
+ * Only displays the custom portal tooltip bubble if the text is actually
+ * clipped/truncated within its visible boundary (scrollWidth > clientWidth).
+ * Native title attributes are omitted to prevent duplicate tooltips.
+ */
+declare const SmartTextCell: react__default.FC<SmartTextCellProps>;
+
 interface MetaTemplateComponent {
     type: "HEADER" | "BODY" | "FOOTER" | "BUTTONS" | string;
     format?: "TEXT" | "IMAGE" | "DOCUMENT" | "VIDEO" | string;
@@ -387,4 +440,4 @@ declare function ToastProvider({ children }: {
 
 declare function useToast(): ToastContextType;
 
-export { type BaseComponentProps, ColumnHeaderTitle, type ColumnHeaderTitleProps, type ComponentCommunication, type ComponentConfig, type ComponentData, type ComponentPermissions, type ComponentRegistry, type ComponentState, type CreateRecordPayload, CreateTemplateModal, type CreateTemplateModalProps, DatePickerCell, type DeleteRecordPayload, LinkPickerCell, type MetaTemplateComponent, type MetaWhatsAppTemplate, type OrgRole, PASTEL_PALETTES, type PastelPalette, type RelationFilterOption, type RelationFilterPayload, RelationFilterPopover, type RelationFilterPopoverProps, RelationPickerCell, type RolePermissions, type RowStatusType, type SplitTitleResult, TableBlock, type TableBlockProps, type TableConfig, type TableData, TimePickerCell, ToastContext, type ToastContextType, type ToastItem, ToastProvider, UNIVERSE_COMPONENTS, type UniverseComponentType, type UpdateRecordPayload, type UseColumnReorderOptions, type UseColumnResizeOptions, WhatsAppComponent, type WhatsAppComponentProps, type WhatsAppData, calculateMinColumnWidth, cn, formatConflictCellValue, formatPhoneDisplay, formatTimeInput, formatTimeIso, generateWhatsAppLink, getDeterministicPastelBadge, getRolePermissions, isValidPhoneNumber, measureTextWidth, normalizePhoneForWhatsApp, normalizeRelationValue, openWhatsAppChat, parseLinkValue, parseTimeParts, resolveProtocol, sanitizePhoneNumber, splitHeaderTitle, useColumnReorder, useColumnResize, useToast };
+export { type BaseComponentProps, ColumnHeaderTitle, type ColumnHeaderTitleProps, type ComponentCommunication, type ComponentConfig, type ComponentData, type ComponentPermissions, type ComponentRegistry, type ComponentState, type CreateRecordPayload, CreateTemplateModal, type CreateTemplateModalProps, DatePickerCell, type DeleteRecordPayload, LinkPickerCell, type MetaTemplateComponent, type MetaWhatsAppTemplate, type OrgRole, PASTEL_PALETTES, type PastelPalette, type RelationFilterOption, type RelationFilterPayload, RelationFilterPopover, type RelationFilterPopoverProps, RelationPickerCell, type RolePermissions, type RowStatusType, SmartTextCell, type SplitTitleResult, TableBlock, type TableBlockProps, type TableConfig, type TableData, TimePickerCell, ToastContext, type ToastContextType, type ToastItem, ToastProvider, TruncatedTooltip, UNIVERSE_COMPONENTS, type UniverseComponentType, type UpdateRecordPayload, type UseColumnReorderOptions, type UseColumnResizeOptions, WhatsAppComponent, type WhatsAppComponentProps, type WhatsAppData, calculateMinColumnWidth, cn, formatConflictCellValue, formatPhoneDisplay, formatTimeInput, formatTimeIso, generateWhatsAppLink, getDeterministicPastelBadge, getRolePermissions, isValidPhoneNumber, measureTextWidth, normalizePhoneForWhatsApp, normalizeRelationValue, openWhatsAppChat, parseLinkValue, parseTimeParts, resolveProtocol, sanitizePhoneNumber, splitHeaderTitle, useColumnReorder, useColumnResize, useSmartTooltip, useToast };