globuswebcomponents 2.9.0 → 2.9.1

package/dist/globuscomponents/p-cHn6O-Kf.js.map

@@ -1 +1 @@
-{"version":3,"file":"p-cHn6O-Kf.js","sources":["src/models/reusableModels.ts"],"sourcesContent":["import { JSX } from \"@stencil/core\";\r\n\r\nexport type GeneralSizes = 'xxxxl' | 'xxxl' | 'xxl' | 'xl' | 'lg' | 'md' | 'sm' | 'xs' | 'xxs' | 'profile_lg' | 'profile_md' | 'profile_sm';\r\n\r\nexport type GeneralHierarchies = 'primary' | 'secondary_gray' | 'secondary_color' | 'tertiary_gray' | 'tertiary_color' | 'link_gray' | 'link_color';\r\n\r\nexport enum StateEnum {\r\n  Default = 'default',\r\n  Disabled = 'disabled',\r\n}\r\n\r\nexport type ArrowPositions = 'bottom_center' | 'bottom_left' | 'bottom_right' | 'top_center' | 'left' | 'right' | 'none' | 'center';\r\n\r\nexport type CheckBoxVariants = 'checkbox' | 'check_circle' | 'radio';\r\n\r\nexport enum BorderWeights {\r\n  VeryLight = 'very_light',\r\n  Light = 'light',\r\n  Regular = 'regular',\r\n  Heavy = 'heavy',\r\n}\r\n\r\nexport enum OnlineIndicatorStates {\r\n  Online = 'online',\r\n  Offline = 'offline',\r\n}\r\n\r\nexport type BreakPoints = 'desktop' | 'mobile';\r\n\r\nexport type FileUploadIconType = 'solid' | 'outline';\r\n\r\nexport type FileUploadStates = 'default' | 'in_progress' | 'complete' | 'hover' | 'disabled' | 'error';\r\n\r\nexport type GeneralColors = 'default' | 'gray' | 'primary' | 'error' | 'warning' | 'success' | 'discovery' | 'information' | 'pink' | 'purple' | 'white';\r\n\r\nexport type PaginationNumberShapes = 'square' | 'circle';\r\n\r\nexport type PaginationTypes =\r\n  | 'page_default'\r\n  | 'page_minimal_center_aligned'\r\n  | 'card_default'\r\n  | 'card_minimal_right_aligned'\r\n  | 'card_minimal_left_aligned'\r\n  | 'card_minimal_center_aligned'\r\n  | 'card_button_group_right_aligned'\r\n  | 'card_button_group_left_aligned'\r\n  | 'card_button_group_center_aligned';\r\n\r\nexport type TabTypes =\r\n  | 'button_primary'\r\n  | 'button_gray'\r\n  | 'button_white'\r\n  | 'rounded_button_white'\r\n  | 'underline'\r\n  | 'underline_filled'\r\n  | 'line'\r\n  | 'button_white_border'\r\n  | 'rounded_button_white_border'\r\n  | 'button_gray_border';\r\n\r\nexport type GeneralBackgroundCategories = 'plain_background' | 'colored_background';\r\n\r\nexport type InputFieldTypes =\r\n  | 'default'\r\n  | 'icon_leading'\r\n  | 'leading_dropdown'\r\n  | 'trailing_dropdown'\r\n  | 'leading_text'\r\n  | 'payment_input'\r\n  | 'tags'\r\n  | 'trailing_button'\r\n  | 'password'\r\n  | 'password_icon_leading'\r\n  | 'count';\r\n\r\nexport type DropdownTypes = 'default' | 'icon_leading' | 'avatar_leading' | 'dot_leading' | 'checkbox' | 'search' | 'tags';\r\n\r\nexport type ColorTypes = 'gray' | 'blue' | 'cyan' | 'pink' | 'purple' | 'green' | 'yellow' | 'red' | 'white';\r\n\r\nexport type DropdownItemTypes = string | number | { name: string | number; username: string; selected?: boolean };\r\n\r\nexport type PaginationDotTypes = 'dot' | 'line';\r\n\r\nexport type FileIconStyles = 'default' | 'gray' | 'solid';\r\n\r\nexport type FileIconTypes = 'pdf' | 'csv' | 'jpg' | 'jpeg' | 'ppt' | 'pptx' | 'doc' | 'docx' | 'xls' | 'xlsx' | 'svg' | 'txt' | 'zip' | 'rar' | 'mp3' | 'mp4' | 'png' | 'empty';\r\n\r\nexport type TableCellTypes = 'text' | 'lead_text' | 'lead_checkbox' | 'badge';\r\n\r\nexport type ProgressStepStatus = 'incomplete' | 'current' | 'complete';\r\n\r\nexport type ProgressStepTypes = 'icon_only' | 'icon_left' | 'icon_top' | 'text_line' | 'featured_icon_left' | 'featured_icon_top';\r\n\r\nexport type ProgressStepStates = 'default' | 'destructive';\r\n\r\nexport type BadgeTypes = 'pill_color' | 'pill_outline' | 'badge_color' | 'badge_modern';\r\n\r\nexport type GeneralStyles = 'standard' | 'compact';\r\n\r\nexport type StateType = 'default' | 'disabled' | 'applied' | 'loading';\r\n\r\nexport type ButtonGroupTypes = 'false' | 'leading' | 'only' | 'dot' | 'checkbox';\r\n\r\nexport type ThemeTypes = 'system' | 'light' | 'dark';\r\n\r\nexport type BadgeIconTypes = 'dot' | 'avatar' | 'icon_leading' | 'icon_trailing' | 'country' | 'only' | 'false';\r\n\r\nexport type DropdownRoles = { badgeLabel: string; badgeColor: GeneralColors; badgeType: BadgeTypes };\r\n\r\nexport type StepperType = {\r\n  state: ProgressStepStates;\r\n  status: ProgressStepStatus;\r\n  label?: string;\r\n  supportingText?: string;\r\n};\r\n\r\nexport type DetailCellType = 'information' | 'document' | 'status' | 'button';\r\n\r\nexport type MetricFeaturedIconTypes = 'glassmorphism' | 'circular_filled';\r\n\r\nexport interface DropdownListGroup {\r\n  icon: string;\r\n  label: string;\r\n  shortcut: string;\r\n}\r\n\r\n\r\nexport type CloseButtonPositions = 'left' | 'right';\r\n\r\nexport interface Notification {\r\n  label: string;\r\n  time: string;\r\n  desc: string;\r\n  icon: string;\r\n}\r\n\r\nexport type IllustrationTypes = 'cloud' | 'box' | 'documents' | 'credit_card';\r\n\r\nexport type PatternTypes = 'circles' | 'grid' | 'grid_dot' | 'squares';\r\n\r\nexport type MobilePosition = 'top_left' | 'top_right' | 'bottom_left' | 'bottom_right';\r\n\r\nexport interface TableColumn {\r\n  key: string;\r\n  label: string;\r\n  width?: string;\r\n  align?: 'left' | 'center' | 'right';\r\n  stickyRight?: boolean;\r\n  helpIcon?: boolean;\r\n  sortable?: boolean;\r\n  sortType?: 'string' | 'number' | 'date';\r\n  sortComparator?: (a: any, b: any) => number;\r\n  render?: (row: any) => any;\r\n  cellComponent?: string;\r\n  cellActionType?: 'dropdown' | 'void';\r\n  cellProps?: { [key: string]: any };\r\n  cellSlots?: JSX.Element | ((row: any) => JSX.Element);\r\n  onClick?: () => void;\r\n  mobile?: {\r\n    position?: MobilePosition;\r\n  };\r\n}\r\n\r\nexport interface RowAction {\r\n  label: string;\r\n  icon?: string;\r\n  action: string; // emitted event name\r\n  disabled?: boolean;\r\n  type?: 'button' | 'dropdown';\r\n}\r\n\r\nexport interface DropdownOption {\r\n  label: string;\r\n  icon?: string;\r\n  action: string; // emitted event name\r\n  disabled?: boolean;\r\n}\r\n\r\nexport type PortalPlacement =\r\n  | 'top'\r\n  | 'top-start'\r\n  | 'top-end'\r\n  | 'bottom'\r\n  | 'bottom-start'\r\n  | 'bottom-end'\r\n  | 'left'\r\n  | 'left-start'\r\n  | 'left-end'\r\n  | 'right'\r\n  | 'right-start'\r\n  | 'right-end';\r\n"],"names":[],"mappings":"AAMY,IAAA;AAAZ,CAAA,UAAY,SAAS,EAAA;AACnB,IAAA,SAAA,CAAA,SAAA,CAAA,GAAA,SAAmB;AACnB,IAAA,SAAA,CAAA,UAAA,CAAA,GAAA,UAAqB;AACvB,CAAC,EAHW,SAAS,KAAT,SAAS,GAGpB,EAAA,CAAA,CAAA;AAMW,IAAA;AAAZ,CAAA,UAAY,aAAa,EAAA;AACvB,IAAA,aAAA,CAAA,WAAA,CAAA,GAAA,YAAwB;AACxB,IAAA,aAAA,CAAA,OAAA,CAAA,GAAA,OAAe;AACf,IAAA,aAAA,CAAA,SAAA,CAAA,GAAA,SAAmB;AACnB,IAAA,aAAA,CAAA,OAAA,CAAA,GAAA,OAAe;AACjB,CAAC,EALW,aAAa,KAAb,aAAa,GAKxB,EAAA,CAAA,CAAA;AAEW,IAAA;AAAZ,CAAA,UAAY,qBAAqB,EAAA;AAC/B,IAAA,qBAAA,CAAA,QAAA,CAAA,GAAA,QAAiB;AACjB,IAAA,qBAAA,CAAA,SAAA,CAAA,GAAA,SAAmB;AACrB,CAAC,EAHW,qBAAqB,KAArB,qBAAqB,GAGhC,EAAA,CAAA,CAAA;;;;"}
+{"version":3,"file":"p-cHn6O-Kf.js","sources":["src/models/reusableModels.ts"],"sourcesContent":["export type GeneralSizes = 'xxxxl' | 'xxxl' | 'xxl' | 'xl' | 'lg' | 'md' | 'sm' | 'xs' | 'xxs' | 'profile_lg' | 'profile_md' | 'profile_sm';\r\n\r\nexport type GeneralHierarchies = 'primary' | 'secondary_gray' | 'secondary_color' | 'tertiary_gray' | 'tertiary_color' | 'link_gray' | 'link_color';\r\n\r\nexport enum StateEnum {\r\n  Default = 'default',\r\n  Disabled = 'disabled',\r\n}\r\n\r\nexport type ArrowPositions = 'bottom_center' | 'bottom_left' | 'bottom_right' | 'top_center' | 'left' | 'right' | 'none' | 'center';\r\n\r\nexport type CheckBoxVariants = 'checkbox' | 'check_circle' | 'radio';\r\n\r\nexport enum BorderWeights {\r\n  VeryLight = 'very_light',\r\n  Light = 'light',\r\n  Regular = 'regular',\r\n  Heavy = 'heavy',\r\n}\r\n\r\nexport enum OnlineIndicatorStates {\r\n  Online = 'online',\r\n  Offline = 'offline',\r\n}\r\n\r\nexport type BreakPoints = 'desktop' | 'mobile';\r\n\r\nexport type FileUploadIconType = 'solid' | 'outline';\r\n\r\nexport type FileUploadStates = 'default' | 'in_progress' | 'complete' | 'hover' | 'disabled' | 'error';\r\n\r\nexport type GeneralColors = 'default' | 'gray' | 'primary' | 'error' | 'warning' | 'success' | 'discovery' | 'information' | 'pink' | 'purple' | 'white';\r\n\r\nexport type PaginationNumberShapes = 'square' | 'circle';\r\n\r\nexport type PaginationTypes =\r\n  | 'page_default'\r\n  | 'page_minimal_center_aligned'\r\n  | 'card_default'\r\n  | 'card_minimal_right_aligned'\r\n  | 'card_minimal_left_aligned'\r\n  | 'card_minimal_center_aligned'\r\n  | 'card_button_group_right_aligned'\r\n  | 'card_button_group_left_aligned'\r\n  | 'card_button_group_center_aligned';\r\n\r\nexport type TabTypes =\r\n  | 'button_primary'\r\n  | 'button_gray'\r\n  | 'button_white'\r\n  | 'rounded_button_white'\r\n  | 'underline'\r\n  | 'underline_filled'\r\n  | 'line'\r\n  | 'button_white_border'\r\n  | 'rounded_button_white_border'\r\n  | 'button_gray_border';\r\n\r\nexport type GeneralBackgroundCategories = 'plain_background' | 'colored_background';\r\n\r\nexport type InputFieldTypes =\r\n  | 'default'\r\n  | 'icon_leading'\r\n  | 'leading_dropdown'\r\n  | 'trailing_dropdown'\r\n  | 'leading_text'\r\n  | 'payment_input'\r\n  | 'tags'\r\n  | 'trailing_button'\r\n  | 'password'\r\n  | 'password_icon_leading'\r\n  | 'count';\r\n\r\nexport type DropdownTypes = 'default' | 'icon_leading' | 'avatar_leading' | 'dot_leading' | 'checkbox' | 'search' | 'tags';\r\n\r\nexport type ColorTypes = 'gray' | 'blue' | 'cyan' | 'pink' | 'purple' | 'green' | 'yellow' | 'red' | 'white';\r\n\r\nexport type DropdownItemTypes = string | number | { name: string | number; username: string; selected?: boolean };\r\n\r\nexport type PaginationDotTypes = 'dot' | 'line';\r\n\r\nexport type FileIconStyles = 'default' | 'gray' | 'solid';\r\n\r\nexport type FileIconTypes = 'pdf' | 'csv' | 'jpg' | 'jpeg' | 'ppt' | 'pptx' | 'doc' | 'docx' | 'xls' | 'xlsx' | 'svg' | 'txt' | 'zip' | 'rar' | 'mp3' | 'mp4' | 'png' | 'empty';\r\n\r\nexport type TableCellTypes = 'text' | 'lead_text' | 'lead_checkbox' | 'badge';\r\n\r\nexport type ProgressStepStatus = 'incomplete' | 'current' | 'complete';\r\n\r\nexport type ProgressStepTypes = 'icon_only' | 'icon_left' | 'icon_top' | 'text_line' | 'featured_icon_left' | 'featured_icon_top';\r\n\r\nexport type ProgressStepStates = 'default' | 'destructive';\r\n\r\nexport type BadgeTypes = 'pill_color' | 'pill_outline' | 'badge_color' | 'badge_modern';\r\n\r\nexport type GeneralStyles = 'standard' | 'compact';\r\n\r\nexport type StateType = 'default' | 'disabled' | 'applied' | 'loading';\r\n\r\nexport type ButtonGroupTypes = 'false' | 'leading' | 'only' | 'dot' | 'checkbox';\r\n\r\nexport type ThemeTypes = 'system' | 'light' | 'dark';\r\n\r\nexport type BadgeIconTypes = 'dot' | 'avatar' | 'icon_leading' | 'icon_trailing' | 'country' | 'only' | 'false';\r\n\r\nexport type DropdownRoles = { badgeLabel: string; badgeColor: GeneralColors; badgeType: BadgeTypes };\r\n\r\nexport type StepperType = {\r\n  state: ProgressStepStates;\r\n  status: ProgressStepStatus;\r\n  label?: string;\r\n  supportingText?: string;\r\n};\r\n\r\nexport type DetailCellType = 'information' | 'document' | 'status' | 'button';\r\n\r\nexport type MetricFeaturedIconTypes = 'glassmorphism' | 'circular_filled';\r\n\r\nexport interface DropdownListGroup {\r\n  icon: string;\r\n  label: string;\r\n  shortcut: string;\r\n}\r\n\r\nexport type CloseButtonPositions = 'left' | 'right';\r\n\r\nexport interface Notification {\r\n  label: string;\r\n  time: string;\r\n  desc: string;\r\n  icon: string;\r\n}\r\n\r\nexport type IllustrationTypes = 'cloud' | 'box' | 'documents' | 'credit_card';\r\n\r\nexport type PatternTypes = 'circles' | 'grid' | 'grid_dot' | 'squares';\r\n\r\nexport type MobilePosition = 'top_left' | 'top_right' | 'bottom_left' | 'bottom_right';\r\n\r\nexport interface TableColumn {\r\n  key: string;\r\n  label: string;\r\n  width?: string;\r\n  align?: 'left' | 'center' | 'right';\r\n  stickyRight?: boolean;\r\n  helpIcon?: boolean;\r\n  sortable?: boolean;\r\n  sortType?: 'string' | 'number' | 'date';\r\n  sortComparator?: (a: any, b: any) => number;\r\n  cellComponent?: string;\r\n  cellActionType?: 'dropdown' | 'void';\r\n  cellProps?: ((row: any) => { [key: string]: any }) | { [key: string]: any };\r\n  cellSlots?: {\r\n    default?: {\r\n      tag?: string; // e.g., 'p', 'span' to wrap content\r\n      content: (row: any) => string | any; // Function to get slot content\r\n    };\r\n    named?: {\r\n      [slotName: string]: {\r\n        tag: string; // e.g., 'p', 'h1', 'span'\r\n        content: (row: any) => string | any; // Function to get slot content\r\n      };\r\n    };\r\n  };\r\n  onClick?: () => void;\r\n  mobile?: {\r\n    position?: MobilePosition;\r\n  };\r\n}\r\n\r\nexport interface RowAction {\r\n  label: string;\r\n  icon?: string;\r\n  action: string; // emitted event name\r\n  disabled?: boolean;\r\n  type?: 'button' | 'dropdown';\r\n}\r\n\r\nexport interface DropdownOption {\r\n  label: string;\r\n  icon?: string;\r\n  action: string; // emitted event name\r\n  disabled?: boolean;\r\n}\r\n\r\nexport type PortalPlacement =\r\n  | 'top'\r\n  | 'top-start'\r\n  | 'top-end'\r\n  | 'bottom'\r\n  | 'bottom-start'\r\n  | 'bottom-end'\r\n  | 'left'\r\n  | 'left-start'\r\n  | 'left-end'\r\n  | 'right'\r\n  | 'right-start'\r\n  | 'right-end';\r\n"],"names":[],"mappings":"AAIY,IAAA;AAAZ,CAAA,UAAY,SAAS,EAAA;AACnB,IAAA,SAAA,CAAA,SAAA,CAAA,GAAA,SAAmB;AACnB,IAAA,SAAA,CAAA,UAAA,CAAA,GAAA,UAAqB;AACvB,CAAC,EAHW,SAAS,KAAT,SAAS,GAGpB,EAAA,CAAA,CAAA;AAMW,IAAA;AAAZ,CAAA,UAAY,aAAa,EAAA;AACvB,IAAA,aAAA,CAAA,WAAA,CAAA,GAAA,YAAwB;AACxB,IAAA,aAAA,CAAA,OAAA,CAAA,GAAA,OAAe;AACf,IAAA,aAAA,CAAA,SAAA,CAAA,GAAA,SAAmB;AACnB,IAAA,aAAA,CAAA,OAAA,CAAA,GAAA,OAAe;AACjB,CAAC,EALW,aAAa,KAAb,aAAa,GAKxB,EAAA,CAAA,CAAA;AAEW,IAAA;AAAZ,CAAA,UAAY,qBAAqB,EAAA;AAC/B,IAAA,qBAAA,CAAA,QAAA,CAAA,GAAA,QAAiB;AACjB,IAAA,qBAAA,CAAA,SAAA,CAAA,GAAA,SAAmB;AACrB,CAAC,EAHW,qBAAqB,KAArB,qBAAqB,GAGhC,EAAA,CAAA,CAAA;;;;"}

package/dist/types/components.d.ts

@@ -2203,7 +2203,7 @@ export namespace Components {
          */
         "actionsType": 'none' | 'dropdown' | '';
         /**
-          * @default [     { key: 'id', label: '#', width: '70px', sortable: true, sortType: 'string', mobile: { position: 'top_left' } },     { key: 'date', label: 'Date', mobile: { position: 'bottom_left' } },     { key: 'name', label: 'Name', sortable: true, sortType: 'string', helpIcon: true, mobile: { position: 'top_right' } },     { key: 'role', label: 'Role' },     { key: 'amount', label: 'Amount', align: 'right', sortable: true, sortType: 'number' },     {       key: 'status',       label: 'Status',       render: row => (         <gb-badge color={row.status === 'Completed' ? 'success' : 'error'} type="badge_modern" size="sm" icon="dot">           <p>{row.status}</p>         </gb-badge>       ),       mobile: { position: 'bottom_right' },     },     // {     //   key: '',     //   label: '',     //   cellComponent: 'gb-button',     //   width: '50px',     //   cellProps: () => ({     //     hierarchy: 'tertiary_gray',     //     size: 'sm',     //     icon: 'only',     //     iconLeading: true,     //     iconLeadingSwap: 'assets/more-horizontal.svg',     //   }),     // },   ]
+          * @default [     { key: 'id', label: '#', width: '70px', sortable: true, sortType: 'string', mobile: { position: 'top_left' } },     { key: 'date', label: 'Date', mobile: { position: 'bottom_left' } },     { key: 'name', label: 'Name', sortable: true, sortType: 'string', helpIcon: true, mobile: { position: 'top_right' } },     { key: 'role', label: 'Role' },     { key: 'amount', label: 'Amount', align: 'right', sortable: true, sortType: 'number' },     {       key: 'status',       label: 'Status',       cellComponent: 'gb-badge',       cellProps: row => ({ color: row.status === 'Completed' ? 'success' : 'error', type: 'badge_modern', size: 'sm', icon: 'dot' }),       cellSlots: {         default: {           tag: 'p',           content: row => row.status, // Get status value from row         },       },       mobile: { position: 'bottom_right' },     },     // {     //   key: '',     //   label: '',     //   cellComponent: 'gb-button',     //   width: '50px',     //   cellProps: () => ({     //     hierarchy: 'tertiary_gray',     //     size: 'sm',     //     icon: 'only',     //     iconLeading: true,     //     iconLeadingSwap: 'assets/more-horizontal.svg',     //   }),     // },   ]
          */
         "columns": TableColumn[];
         /**
@@ -6359,7 +6359,7 @@ declare namespace LocalJSX {
          */
         "actionsType"?: 'none' | 'dropdown' | '';
         /**
-          * @default [     { key: 'id', label: '#', width: '70px', sortable: true, sortType: 'string', mobile: { position: 'top_left' } },     { key: 'date', label: 'Date', mobile: { position: 'bottom_left' } },     { key: 'name', label: 'Name', sortable: true, sortType: 'string', helpIcon: true, mobile: { position: 'top_right' } },     { key: 'role', label: 'Role' },     { key: 'amount', label: 'Amount', align: 'right', sortable: true, sortType: 'number' },     {       key: 'status',       label: 'Status',       render: row => (         <gb-badge color={row.status === 'Completed' ? 'success' : 'error'} type="badge_modern" size="sm" icon="dot">           <p>{row.status}</p>         </gb-badge>       ),       mobile: { position: 'bottom_right' },     },     // {     //   key: '',     //   label: '',     //   cellComponent: 'gb-button',     //   width: '50px',     //   cellProps: () => ({     //     hierarchy: 'tertiary_gray',     //     size: 'sm',     //     icon: 'only',     //     iconLeading: true,     //     iconLeadingSwap: 'assets/more-horizontal.svg',     //   }),     // },   ]
+          * @default [     { key: 'id', label: '#', width: '70px', sortable: true, sortType: 'string', mobile: { position: 'top_left' } },     { key: 'date', label: 'Date', mobile: { position: 'bottom_left' } },     { key: 'name', label: 'Name', sortable: true, sortType: 'string', helpIcon: true, mobile: { position: 'top_right' } },     { key: 'role', label: 'Role' },     { key: 'amount', label: 'Amount', align: 'right', sortable: true, sortType: 'number' },     {       key: 'status',       label: 'Status',       cellComponent: 'gb-badge',       cellProps: row => ({ color: row.status === 'Completed' ? 'success' : 'error', type: 'badge_modern', size: 'sm', icon: 'dot' }),       cellSlots: {         default: {           tag: 'p',           content: row => row.status, // Get status value from row         },       },       mobile: { position: 'bottom_right' },     },     // {     //   key: '',     //   label: '',     //   cellComponent: 'gb-button',     //   width: '50px',     //   cellProps: () => ({     //     hierarchy: 'tertiary_gray',     //     size: 'sm',     //     icon: 'only',     //     iconLeading: true,     //     iconLeadingSwap: 'assets/more-horizontal.svg',     //   }),     // },   ]
          */
         "columns"?: TableColumn[];
         /**

package/dist/types/models/reusableModels.d.ts

@@ -1,4 +1,3 @@
-import { JSX } from "../stencil-public-runtime";
 export type GeneralSizes = 'xxxxl' | 'xxxl' | 'xxl' | 'xl' | 'lg' | 'md' | 'sm' | 'xs' | 'xxs' | 'profile_lg' | 'profile_md' | 'profile_sm';
 export type GeneralHierarchies = 'primary' | 'secondary_gray' | 'secondary_color' | 'tertiary_gray' | 'tertiary_color' | 'link_gray' | 'link_color';
 export declare enum StateEnum {
@@ -84,13 +83,25 @@ export interface TableColumn {
     sortable?: boolean;
     sortType?: 'string' | 'number' | 'date';
     sortComparator?: (a: any, b: any) => number;
-    render?: (row: any) => any;
     cellComponent?: string;
     cellActionType?: 'dropdown' | 'void';
-    cellProps?: {
+    cellProps?: ((row: any) => {
         [key: string]: any;
+    }) | {
+        [key: string]: any;
+    };
+    cellSlots?: {
+        default?: {
+            tag?: string;
+            content: (row: any) => string | any;
+        };
+        named?: {
+            [slotName: string]: {
+                tag: string;
+                content: (row: any) => string | any;
+            };
+        };
     };
-    cellSlots?: JSX.Element | ((row: any) => JSX.Element);
     onClick?: () => void;
     mobile?: {
         position?: MobilePosition;

package/dist/types/utils/tableColumnBuilder.d.ts

@@ -0,0 +1,88 @@
+import { TableColumn } from '../models/reusableModels';
+/**
+ * Helper interface for slot configuration
+ */
+interface SlotConfig {
+    tag: string;
+    content: (row: any) => string | any;
+}
+interface NamedSlotsConfig {
+    [slotName: string]: SlotConfig;
+}
+/**
+ * Creates a basic table column with text rendering
+ */
+export declare function createTextColumn(key: string, label: string, options?: {
+    align?: 'left' | 'center' | 'right';
+    sortable?: boolean;
+    width?: string;
+}): TableColumn;
+/**
+ * Creates a column with a custom web component
+ */
+export declare function createComponentColumn(key: string, label: string, componentTag: string, componentProps?: ((row: any) => {
+    [key: string]: any;
+}) | {
+    [key: string]: any;
+}, namedSlots?: NamedSlotsConfig, options?: {
+    align?: 'left' | 'center' | 'right';
+    width?: string;
+}): TableColumn;
+/**
+ * Creates a column with a component that has a default slot
+ */
+export declare function createComponentColumnWithDefaultSlot(key: string, label: string, componentTag: string, defaultSlotTag: string, defaultSlotContent: (row: any) => string | any, componentProps?: ((row: any) => {
+    [key: string]: any;
+}) | {
+    [key: string]: any;
+}, options?: {
+    align?: 'left' | 'center' | 'right';
+    width?: string;
+}): TableColumn;
+/**
+ * Creates a badge component column
+ * Usage: createBadgeColumn('status', 'Status', row => ({ color: row.status === 'active' ? 'success' : 'error' }), row => row.status)
+ */
+export declare function createBadgeColumn(key: string, label: string, componentPropsBuilder: (row: any) => {
+    [key: string]: any;
+}, contentBuilder: (row: any) => string, slotTag?: string): TableColumn;
+/**
+ * Creates an avatar label group column with name, initials, and supporting text
+ * Usage: createAvatarLabelGroupColumn('reviewer', 'Reviewer', {
+ *   nameBuilder: row => row.reviewerName,
+ *   initialsBuilder: row => row.reviewerInitials,
+ *   supportingTextBuilder: row => row.reviewerRole
+ * })
+ */
+export declare function createAvatarLabelGroupColumn(key: string, label: string, options: {
+    nameBuilder: (row: any) => string;
+    initialsBuilder: (row: any) => string;
+    supportingTextBuilder: (row: any) => string;
+    componentPropsBuilder?: (row: any) => {
+        [key: string]: any;
+    };
+}, align?: 'left' | 'center' | 'right'): TableColumn;
+/**
+ * Creates a button column for actions
+ * Usage: createButtonColumn('action', 'Action', { hierarchy: 'tertiary_gray', size: 'sm' })
+ */
+export declare function createButtonColumn(key: string, label: string, componentPropsBuilder: (row: any) => {
+    [key: string]: any;
+}, align?: 'left' | 'center' | 'right'): TableColumn;
+/**
+ * Creates a custom component column with flexible configuration
+ */
+export declare function createCustomComponentColumn(key: string, label: string, componentTag: string, config: {
+    componentPropsBuilder?: (row: any) => {
+        [key: string]: any;
+    };
+    defaultSlot?: {
+        tag: string;
+        content: (row: any) => string | any;
+    };
+    namedSlots?: NamedSlotsConfig;
+    align?: 'left' | 'center' | 'right';
+    width?: string;
+    sortable?: boolean;
+}): TableColumn;
+export {};

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "globuswebcomponents",
-  "version": "2.9.0",
+  "version": "2.9.1",
   "description": "Globus One",
   "main": "dist/index.cjs.js",
   "module": "dist/index.js",