@universe-platform/ui 0.1.0-beta.10 → 0.1.0-beta.12

package/dist/globals.css

@@ -364,18 +364,36 @@
   .z-20 {
     z-index: 20;
   }
+  .z-30 {
+    z-index: 30;
+  }
   .z-50 {
     z-index: 50;
   }
-  .z-\[100\] {
-    z-index: 100;
-  }
   .z-\[9999\] {
     z-index: 9999;
   }
   .z-\[99999\] {
     z-index: 99999;
   }
+  .container {
+    width: 100%;
+    @media (width >= 40rem) {
+      max-width: 40rem;
+    }
+    @media (width >= 48rem) {
+      max-width: 48rem;
+    }
+    @media (width >= 64rem) {
+      max-width: 64rem;
+    }
+    @media (width >= 80rem) {
+      max-width: 80rem;
+    }
+    @media (width >= 96rem) {
+      max-width: 96rem;
+    }
+  }
   .mx-1 {
     margin-inline: var(--spacing);
   }
@@ -397,6 +415,9 @@
   .mr-1 {
     margin-right: var(--spacing);
   }
+  .mb-0\.5 {
+    margin-bottom: calc(var(--spacing) * 0.5);
+  }
   .mb-1 {
     margin-bottom: var(--spacing);
   }
@@ -418,6 +439,9 @@
   .ml-1 {
     margin-left: var(--spacing);
   }
+  .ml-2 {
+    margin-left: calc(var(--spacing) * 2);
+  }
   .block {
     display: block;
   }
@@ -442,9 +466,15 @@
   .table {
     display: table;
   }
+  .h-0\.5 {
+    height: calc(var(--spacing) * 0.5);
+  }
   .h-2 {
     height: calc(var(--spacing) * 2);
   }
+  .h-2\.5 {
+    height: calc(var(--spacing) * 2.5);
+  }
   .h-3 {
     height: calc(var(--spacing) * 3);
   }
@@ -493,27 +523,33 @@
   .max-h-60 {
     max-height: calc(var(--spacing) * 60);
   }
-  .max-h-\[180px\] {
-    max-height: 180px;
+  .max-h-\[250px\] {
+    max-height: 250px;
+  }
+  .max-h-\[calc\(100vh-240px\)\] {
+    max-height: calc(100vh - 240px);
   }
   .max-h-full {
     max-height: 100%;
   }
+  .min-h-0 {
+    min-height: 0;
+  }
   .min-h-\[48px\] {
     min-height: 48px;
   }
   .min-h-\[260px\] {
     min-height: 260px;
   }
-  .min-h-\[350px\] {
-    min-height: 350px;
-  }
   .w-1\.5 {
     width: calc(var(--spacing) * 1.5);
   }
   .w-2 {
     width: calc(var(--spacing) * 2);
   }
+  .w-2\.5 {
+    width: calc(var(--spacing) * 2.5);
+  }
   .w-3 {
     width: calc(var(--spacing) * 3);
   }
@@ -556,6 +592,9 @@
   .w-72 {
     width: calc(var(--spacing) * 72);
   }
+  .w-\[260px\] {
+    width: 260px;
+  }
   .w-\[280px\] {
     width: 280px;
   }
@@ -574,9 +613,6 @@
   .max-w-\[160px\] {
     max-width: 160px;
   }
-  .max-w-\[300px\] {
-    max-width: 300px;
-  }
   .max-w-\[calc\(100\%-24px\)\] {
     max-width: calc(100% - 24px);
   }
@@ -601,9 +637,6 @@
   .min-w-\[50px\] {
     min-width: 50px;
   }
-  .min-w-\[200px\] {
-    min-width: 200px;
-  }
   .flex-1 {
     flex: 1;
   }
@@ -638,6 +671,9 @@
   .rotate-180 {
     rotate: 180deg;
   }
+  .transform {
+    transform: var(--tw-rotate-x,) var(--tw-rotate-y,) var(--tw-rotate-z,) var(--tw-skew-x,) var(--tw-skew-y,);
+  }
   .animate-pulse {
     animation: var(--animate-pulse);
   }
@@ -926,6 +962,12 @@
   .bg-blue-500 {
     background-color: var(--color-blue-500);
   }
+  .bg-blue-500\/20 {
+    background-color: color-mix(in srgb, oklch(62.3% 0.214 259.815) 20%, transparent);
+    @supports (color: color-mix(in lab, red, red)) {
+      background-color: color-mix(in oklab, var(--color-blue-500) 20%, transparent);
+    }
+  }
   .bg-blue-600 {
     background-color: var(--color-blue-600);
   }
@@ -1007,6 +1049,12 @@
       background-color: color-mix(in oklab, var(--color-slate-50) 50%, transparent);
     }
   }
+  .bg-slate-50\/60 {
+    background-color: color-mix(in srgb, oklch(98.4% 0.003 247.858) 60%, transparent);
+    @supports (color: color-mix(in lab, red, red)) {
+      background-color: color-mix(in oklab, var(--color-slate-50) 60%, transparent);
+    }
+  }
   .bg-slate-100 {
     background-color: var(--color-slate-100);
   }
@@ -1079,6 +1127,9 @@
   .p-2 {
     padding: calc(var(--spacing) * 2);
   }
+  .p-2\.5 {
+    padding: calc(var(--spacing) * 2.5);
+  }
   .p-3 {
     padding: calc(var(--spacing) * 3);
   }
@@ -1136,9 +1187,18 @@
   .py-12 {
     padding-block: calc(var(--spacing) * 12);
   }
+  .pt-1 {
+    padding-top: var(--spacing);
+  }
+  .pt-1\.5 {
+    padding-top: calc(var(--spacing) * 1.5);
+  }
   .pt-2 {
     padding-top: calc(var(--spacing) * 2);
   }
+  .pr-0\.5 {
+    padding-right: calc(var(--spacing) * 0.5);
+  }
   .pr-2 {
     padding-right: calc(var(--spacing) * 2);
   }
@@ -1148,24 +1208,30 @@
   .pr-9 {
     padding-right: calc(var(--spacing) * 9);
   }
+  .pb-0\.5 {
+    padding-bottom: calc(var(--spacing) * 0.5);
+  }
   .pb-1 {
     padding-bottom: var(--spacing);
   }
+  .pb-1\.5 {
+    padding-bottom: calc(var(--spacing) * 1.5);
+  }
   .pb-2 {
     padding-bottom: calc(var(--spacing) * 2);
   }
   .pb-2\.5 {
     padding-bottom: calc(var(--spacing) * 2.5);
   }
-  .pl-2 {
-    padding-left: calc(var(--spacing) * 2);
-  }
   .pl-3 {
     padding-left: calc(var(--spacing) * 3);
   }
   .pl-6 {
     padding-left: calc(var(--spacing) * 6);
   }
+  .pl-7 {
+    padding-left: calc(var(--spacing) * 7);
+  }
   .pl-8 {
     padding-left: calc(var(--spacing) * 8);
   }
@@ -1370,6 +1436,9 @@
       color: var(--color-slate-400);
     }
   }
+  .accent-\[\#0d9488\] {
+    accent-color: #0d9488;
+  }
   .opacity-0 {
     opacity: 0%;
   }
@@ -1407,10 +1476,6 @@
     --tw-shadow: 0 -2px 4px var(--tw-shadow-color, rgba(0,0,0,0.02));
     box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
   }
-  .shadow-lg {
-    --tw-shadow: 0 10px 15px -3px var(--tw-shadow-color, rgb(0 0 0 / 0.1)), 0 4px 6px -4px var(--tw-shadow-color, rgb(0 0 0 / 0.1));
-    box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
-  }
   .shadow-md {
     --tw-shadow: 0 4px 6px -1px var(--tw-shadow-color, rgb(0 0 0 / 0.1)), 0 2px 4px -2px var(--tw-shadow-color, rgb(0 0 0 / 0.1));
     box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
@@ -1466,6 +1531,11 @@
     -webkit-backdrop-filter: var(--tw-backdrop-blur,) var(--tw-backdrop-brightness,) var(--tw-backdrop-contrast,) var(--tw-backdrop-grayscale,) var(--tw-backdrop-hue-rotate,) var(--tw-backdrop-invert,) var(--tw-backdrop-opacity,) var(--tw-backdrop-saturate,) var(--tw-backdrop-sepia,);
     backdrop-filter: var(--tw-backdrop-blur,) var(--tw-backdrop-brightness,) var(--tw-backdrop-contrast,) var(--tw-backdrop-grayscale,) var(--tw-backdrop-hue-rotate,) var(--tw-backdrop-invert,) var(--tw-backdrop-opacity,) var(--tw-backdrop-saturate,) var(--tw-backdrop-sepia,);
   }
+  .transition {
+    transition-property: color, background-color, border-color, outline-color, text-decoration-color, fill, stroke, --tw-gradient-from, --tw-gradient-via, --tw-gradient-to, opacity, box-shadow, transform, translate, scale, rotate, filter, -webkit-backdrop-filter, backdrop-filter, display, content-visibility, overlay, pointer-events;
+    transition-timing-function: var(--tw-ease, var(--default-transition-timing-function));
+    transition-duration: var(--tw-duration, var(--default-transition-duration));
+  }
   .transition-all {
     transition-property: all;
     transition-timing-function: var(--tw-ease, var(--default-transition-timing-function));
@@ -1543,6 +1613,11 @@
       color: var(--color-blue-900);
     }
   }
+  .placeholder\:text-slate-400 {
+    &::placeholder {
+      color: var(--color-slate-400);
+    }
+  }
   .hover\:border-emerald-400 {
     &:hover {
       @media (hover: hover) {
@@ -1550,6 +1625,13 @@
       }
     }
   }
+  .hover\:bg-amber-100 {
+    &:hover {
+      @media (hover: hover) {
+        background-color: var(--color-amber-100);
+      }
+    }
+  }
   .hover\:bg-amber-100\/80 {
     &:hover {
       @media (hover: hover) {
@@ -1732,6 +1814,13 @@
       }
     }
   }
+  .hover\:text-blue-700 {
+    &:hover {
+      @media (hover: hover) {
+        color: var(--color-blue-700);
+      }
+    }
+  }
   .hover\:text-emerald-600 {
     &:hover {
       @media (hover: hover) {
@@ -1774,6 +1863,13 @@
       }
     }
   }
+  .hover\:text-slate-900 {
+    &:hover {
+      @media (hover: hover) {
+        color: var(--color-slate-900);
+      }
+    }
+  }
   .hover\:underline {
     &:hover {
       @media (hover: hover) {
@@ -1973,6 +2069,26 @@
   inherits: false;
   initial-value: 1;
 }
+@property --tw-rotate-x {
+  syntax: "*";
+  inherits: false;
+}
+@property --tw-rotate-y {
+  syntax: "*";
+  inherits: false;
+}
+@property --tw-rotate-z {
+  syntax: "*";
+  inherits: false;
+}
+@property --tw-skew-x {
+  syntax: "*";
+  inherits: false;
+}
+@property --tw-skew-y {
+  syntax: "*";
+  inherits: false;
+}
 @property --tw-space-y-reverse {
   syntax: "*";
   inherits: false;
@@ -2172,6 +2288,11 @@
       --tw-scale-x: 1;
       --tw-scale-y: 1;
       --tw-scale-z: 1;
+      --tw-rotate-x: initial;
+      --tw-rotate-y: initial;
+      --tw-rotate-z: initial;
+      --tw-skew-x: initial;
+      --tw-skew-y: initial;
       --tw-space-y-reverse: 0;
       --tw-border-style: solid;
       --tw-leading: initial;

package/dist/index.d.mts

@@ -76,7 +76,9 @@ interface BaseComponentProps<TData = any, TConfig = Record<string, any>> extends
 interface TableConfig extends SchemaDef {
 }
 type TableData = RecordData[];
-type TableBlockProps = BaseComponentProps<TableData, TableConfig>;
+interface TableBlockProps extends BaseComponentProps<TableData, TableConfig> {
+    exportAction?: (payload: any) => Promise<any>;
+}
 interface CreateRecordPayload {
     records: RecordData[];
 }
@@ -228,6 +230,30 @@ interface RelationPickerCellProps {
 declare function normalizeRelationValue(val: any): string[];
 declare function RelationPickerCell({ value, onChange, column, context, rowId, readOnly, }: RelationPickerCellProps): react_jsx_runtime.JSX.Element;
 
+interface RelationFilterOption {
+    id: string;
+    label: string;
+}
+type RelationFilterPayload = string[] | {
+    operator: 'notIn';
+    values: string[];
+} | undefined;
+interface RelationFilterPopoverProps {
+    isOpen: boolean;
+    onClose: () => void;
+    column: ColumnDef;
+    triggerRect: DOMRect | null;
+    options: RelationFilterOption[];
+    filterValue?: string[] | {
+        operator: 'notIn';
+        values: string[];
+    };
+    selectedValues?: string[];
+    onSelectionChange: (payload: RelationFilterPayload) => void;
+    isLoading?: boolean;
+}
+declare function RelationFilterPopover({ isOpen, onClose, column, triggerRect, options, filterValue, selectedValues, onSelectionChange, isLoading, }: RelationFilterPopoverProps): react_jsx_runtime.JSX.Element | null;
+
 /**
  * UNIVERSE_COMPONENTS
  * Dynamic Component Registry dictionary mapping component type strings (e.g., "TABLE")
@@ -259,4 +285,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, DatePickerCell, type DeleteRecordPayload, LinkPickerCell, PASTEL_PALETTES, type PastelPalette, RelationPickerCell, 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, calculateMinColumnWidth, cn, formatConflictCellValue, formatPhoneDisplay, formatTimeInput, formatTimeIso, getDeterministicPastelBadge, measureTextWidth, normalizeRelationValue, openWhatsAppChat, parseLinkValue, parseTimeParts, resolveProtocol, splitHeaderTitle, useColumnReorder, useColumnResize, useToast };
+export { type BaseComponentProps, ColumnHeaderTitle, type ColumnHeaderTitleProps, type ComponentCommunication, type ComponentConfig, type ComponentData, type ComponentPermissions, type ComponentRegistry, type ComponentState, type CreateRecordPayload, DatePickerCell, type DeleteRecordPayload, LinkPickerCell, PASTEL_PALETTES, type PastelPalette, type RelationFilterOption, type RelationFilterPayload, RelationFilterPopover, type RelationFilterPopoverProps, RelationPickerCell, 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, calculateMinColumnWidth, cn, formatConflictCellValue, formatPhoneDisplay, formatTimeInput, formatTimeIso, getDeterministicPastelBadge, measureTextWidth, normalizeRelationValue, openWhatsAppChat, parseLinkValue, parseTimeParts, resolveProtocol, splitHeaderTitle, useColumnReorder, useColumnResize, useToast };

package/dist/index.d.ts

@@ -76,7 +76,9 @@ interface BaseComponentProps<TData = any, TConfig = Record<string, any>> extends
 interface TableConfig extends SchemaDef {
 }
 type TableData = RecordData[];
-type TableBlockProps = BaseComponentProps<TableData, TableConfig>;
+interface TableBlockProps extends BaseComponentProps<TableData, TableConfig> {
+    exportAction?: (payload: any) => Promise<any>;
+}
 interface CreateRecordPayload {
     records: RecordData[];
 }
@@ -228,6 +230,30 @@ interface RelationPickerCellProps {
 declare function normalizeRelationValue(val: any): string[];
 declare function RelationPickerCell({ value, onChange, column, context, rowId, readOnly, }: RelationPickerCellProps): react_jsx_runtime.JSX.Element;
 
+interface RelationFilterOption {
+    id: string;
+    label: string;
+}
+type RelationFilterPayload = string[] | {
+    operator: 'notIn';
+    values: string[];
+} | undefined;
+interface RelationFilterPopoverProps {
+    isOpen: boolean;
+    onClose: () => void;
+    column: ColumnDef;
+    triggerRect: DOMRect | null;
+    options: RelationFilterOption[];
+    filterValue?: string[] | {
+        operator: 'notIn';
+        values: string[];
+    };
+    selectedValues?: string[];
+    onSelectionChange: (payload: RelationFilterPayload) => void;
+    isLoading?: boolean;
+}
+declare function RelationFilterPopover({ isOpen, onClose, column, triggerRect, options, filterValue, selectedValues, onSelectionChange, isLoading, }: RelationFilterPopoverProps): react_jsx_runtime.JSX.Element | null;
+
 /**
  * UNIVERSE_COMPONENTS
  * Dynamic Component Registry dictionary mapping component type strings (e.g., "TABLE")
@@ -259,4 +285,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, DatePickerCell, type DeleteRecordPayload, LinkPickerCell, PASTEL_PALETTES, type PastelPalette, RelationPickerCell, 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, calculateMinColumnWidth, cn, formatConflictCellValue, formatPhoneDisplay, formatTimeInput, formatTimeIso, getDeterministicPastelBadge, measureTextWidth, normalizeRelationValue, openWhatsAppChat, parseLinkValue, parseTimeParts, resolveProtocol, splitHeaderTitle, useColumnReorder, useColumnResize, useToast };
+export { type BaseComponentProps, ColumnHeaderTitle, type ColumnHeaderTitleProps, type ComponentCommunication, type ComponentConfig, type ComponentData, type ComponentPermissions, type ComponentRegistry, type ComponentState, type CreateRecordPayload, DatePickerCell, type DeleteRecordPayload, LinkPickerCell, PASTEL_PALETTES, type PastelPalette, type RelationFilterOption, type RelationFilterPayload, RelationFilterPopover, type RelationFilterPopoverProps, RelationPickerCell, 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, calculateMinColumnWidth, cn, formatConflictCellValue, formatPhoneDisplay, formatTimeInput, formatTimeIso, getDeterministicPastelBadge, measureTextWidth, normalizeRelationValue, openWhatsAppChat, parseLinkValue, parseTimeParts, resolveProtocol, splitHeaderTitle, useColumnReorder, useColumnResize, useToast };