platformcommons-web-lib 1.0.0

package/src/lib/modules/summary-card/summary-card.theme.scss

@@ -0,0 +1,176 @@
+@use 'sass:map';
+
+// Default configuration for the summary card theme (Theme 1 - Clean & Minimal)
+$default-summary-card-config: (
+    // Base
+    font-family: ('Inter', sans-serif),
+    bg-color: #ffffff,
+    border-radius: 8px,
+    border: 1px solid #e0e0e0,
+    padding: 20px,
+    shadow: 0 1px 3px rgba(0, 0, 0, 0.05),
+    min-height: auto,
+    transition-duration: 0.2s,
+
+    // Hover States
+    hover-transform: translateY(-2px),
+    hover-shadow: 0 4px 8px rgba(0, 0, 0, 0.1),
+
+    // Disabled State
+    disabled-opacity: 0.5,
+
+    // Icon Section
+    icon-box-size: 48px,
+    icon-size: 24px,
+    icon-radius: 8px,
+    icon-bg: rgba(0, 0, 0, 0.05),
+    icon-color: #666666,
+    icon-margin: 1rem,
+
+    // Content Section
+    content-gap: 0.5rem,
+
+    // Header
+    header-size: 0.75rem,
+    header-weight: 600,
+    header-color: #6c757d,
+    header-transform: uppercase,
+    header-letter-spacing: 0.05em,
+    header-line-height: 1.2,
+
+    // Value
+    value-size: 1.5rem,
+    value-weight: 700,
+    value-color: #333333,
+    value-line-height: 1.2,
+
+    // Description
+    desc-size: 0.75rem,
+    desc-weight: 400,
+    desc-color: #6c757d,
+    desc-line-height: 1.4,
+    value-desc-gap: 0.25rem,
+
+    // Meta Pill
+    meta-pill-bg: #f1f5f9,
+    meta-pill-color: #475569,
+    meta-pill-padding: 4px 12px,
+    meta-pill-radius: 20px,
+    meta-pill-font-size: 0.75rem,
+    meta-pill-font-weight: 600
+);
+
+// Theme 2 configuration (Aesthetic & Modern)
+$theme-2-summary-card-config: (
+    // Base
+    font-family: ('Poppins', 'Segoe UI', sans-serif),
+    bg-color: #ffffff,
+    border-radius: 16px,
+    border: none,
+    padding: 28px,
+    shadow: 0 8px 24px rgba(0, 0, 0, 0.08),
+    min-height: 120px,
+    transition-duration: 0.3s,
+
+    // Hover States
+    hover-transform: translateY(-4px),
+    hover-shadow: 0 12px 32px rgba(0, 0, 0, 0.15),
+
+    // Disabled State
+    disabled-opacity: 0.4,
+
+    // Icon Section
+    icon-box-size: 56px,
+    icon-size: 28px,
+    icon-radius: 12px,
+    icon-bg: linear-gradient(135deg, rgba(99, 102, 241, 0.1) 0%, rgba(168, 85, 247, 0.1) 100%),
+    icon-color: #6366f1,
+    icon-margin: 1.25rem,
+
+    // Content Section
+    content-gap: 0.75rem,
+
+    // Header
+    header-size: 0.8rem,
+    header-weight: 500,
+    header-color: #94a3b8,
+    header-transform: none,
+    header-letter-spacing: 0.02em,
+    header-line-height: 1.3,
+
+    // Value
+    value-size: 2rem,
+    value-weight: 700,
+    value-color: #1e293b,
+    value-line-height: 1.1,
+
+    // Description
+    desc-size: 0.85rem,
+    desc-weight: 400,
+    desc-color: #64748b,
+    desc-line-height: 1.5,
+    value-desc-gap: 0.5rem,
+
+    // Meta Pill
+    meta-pill-bg: #f1f5f9,
+    meta-pill-color: #475569,
+    meta-pill-padding: 4px 12px,
+    meta-pill-radius: 20px,
+    meta-pill-font-size: 0.75rem,
+    meta-pill-font-weight: 600
+);
+
+// Mixin to generate CSS variables for the summary card component
+@mixin summary-card-theme($user-config: ()) {
+    // Merge user config with defaults
+    $config: map.merge($default-summary-card-config, $user-config);
+
+    // Generate CSS Variables
+    --cc-sc-font-family: #{map.get($config, font-family)};
+    --cc-sc-bg-color: #{map.get($config, bg-color)};
+    --cc-sc-border-radius: #{map.get($config, border-radius)};
+    --cc-sc-border: #{map.get($config, border)};
+    --cc-sc-padding: #{map.get($config, padding)};
+    --cc-sc-shadow: #{map.get($config, shadow)};
+    --cc-sc-min-height: #{map.get($config, min-height)};
+    --cc-sc-transition-duration: #{map.get($config, transition-duration)};
+
+    --cc-sc-hover-transform: #{map.get($config, hover-transform)};
+    --cc-sc-hover-shadow: #{map.get($config, hover-shadow)};
+
+    --cc-sc-disabled-opacity: #{map.get($config, disabled-opacity)};
+
+    --cc-sc-icon-box-size: #{map.get($config, icon-box-size)};
+    --cc-sc-icon-size: #{map.get($config, icon-size)};
+    --cc-sc-icon-radius: #{map.get($config, icon-radius)};
+    --cc-sc-icon-bg: #{map.get($config, icon-bg)};
+    --cc-sc-icon-color: #{map.get($config, icon-color)};
+    --cc-sc-icon-margin: #{map.get($config, icon-margin)};
+
+    --cc-sc-content-gap: #{map.get($config, content-gap)};
+
+    --cc-sc-header-size: #{map.get($config, header-size)};
+    --cc-sc-header-weight: #{map.get($config, header-weight)};
+    --cc-sc-header-color: #{map.get($config, header-color)};
+    --cc-sc-header-transform: #{map.get($config, header-transform)};
+    --cc-sc-header-letter-spacing: #{map.get($config, header-letter-spacing)};
+    --cc-sc-header-line-height: #{map.get($config, header-line-height)};
+
+    --cc-sc-value-size: #{map.get($config, value-size)};
+    --cc-sc-value-weight: #{map.get($config, value-weight)};
+    --cc-sc-value-color: #{map.get($config, value-color)};
+    --cc-sc-value-line-height: #{map.get($config, value-line-height)};
+
+    --cc-sc-desc-size: #{map.get($config, desc-size)};
+    --cc-sc-desc-weight: #{map.get($config, desc-weight)};
+    --cc-sc-desc-color: #{map.get($config, desc-color)};
+    --cc-sc-desc-line-height: #{map.get($config, desc-line-height)};
+    --cc-sc-value-desc-gap: #{map.get($config, value-desc-gap)};
+
+    --cc-sc-meta-pill-bg: #{map.get($config, meta-pill-bg)};
+    --cc-sc-meta-pill-color: #{map.get($config, meta-pill-color)};
+    --cc-sc-meta-pill-padding: #{map.get($config, meta-pill-padding)};
+    --cc-sc-meta-pill-radius: #{map.get($config, meta-pill-radius)};
+    --cc-sc-meta-pill-font-size: #{map.get($config, meta-pill-font-size)};
+    --cc-sc-meta-pill-font-weight: #{map.get($config, meta-pill-font-weight)};
+}

package/src/lib/shared-ui.module.ts

@@ -0,0 +1,44 @@
+import { NgModule } from '@angular/core';
+import { CommonModule } from '@angular/common';
+import { MaterialModule } from './modules/material/material.module';
+import { AlertModule } from './modules/alert/alert.module';
+import { ButtonModule } from './modules/button/button.module';
+import { ButtonDropdownModule } from './modules/button-dropdown/button-dropdown.module';
+import { ConfirmationModalModule } from './modules/confirmation-modal/confirmation-modal.module';
+import { FilterSidebarModule } from './modules/filter-sidebar/filter-sidebar.module';
+import { SummaryCardModule } from './modules/summary-card/summary-card.module';
+import { ConfigurableFormModule } from './modules/configurable-form/configurable-form.module';
+import { FormComponentsModule } from './modules/form-components/form-components.module';
+import { SmartFormModule } from './modules/smart-form/smart-form.module';
+import { FilterModule } from './modules/filter/filter.module';
+import { SideNavModule } from './modules/side-nav/side-nav.module';
+import { FormBuilderModule } from './modules/form-builder/form-builder.module';
+import { FilterTableSelectorModule } from './modules/filter-table-selector/filter-table-selector.module';
+
+@NgModule({
+  declarations: [],
+  imports: [
+    CommonModule,
+    MaterialModule,
+    AlertModule, ButtonModule, ButtonDropdownModule, ConfirmationModalModule, FilterSidebarModule, FilterModule,
+    SummaryCardModule,
+    ConfigurableFormModule,
+    FormComponentsModule,
+    SmartFormModule,
+    SideNavModule,
+    FormBuilderModule,
+    FilterTableSelectorModule
+  ],
+  exports: [
+    MaterialModule,
+    AlertModule, ButtonModule, ButtonDropdownModule, ConfirmationModalModule, FilterSidebarModule, FilterModule,
+    SummaryCardModule,
+    ConfigurableFormModule,
+    FormComponentsModule,
+    SmartFormModule,
+    SideNavModule,
+    FormBuilderModule,
+    FilterTableSelectorModule
+  ],
+})
+export class SharedUiModule { }

package/src/lib/styles/global.scss

@@ -0,0 +1,152 @@
+@use '../modules/side-nav/side-nav.theme' as sideNav;
+@use '../modules/form-builder/form-builder.theme' as fb;
+@use '../modules/filter-table-selector/filter-table-selector.theme' as fts;
+@import 'quill/dist/quill.snow.css';
+@import './utilities.scss';
+
+:root {
+  @include sideNav.side-nav-theme();
+  @include fb.form-builder-theme();
+  --cc-card-bg: #ffffff;
+  --cc-card-border-color: #e0e0e0;
+  --cc-card-border-radius: 8px;
+  --cc-card-padding: 16px;
+  --cc-card-shadow: none;
+
+  @include fts.filter-table-selector-theme();
+
+  /* Text Colors */
+  --text-color: #333333;
+  --text-muted: #666666;
+  --text-muted-2: #888888;
+  --text-light: #6c757d;
+  --text-on-primary: #ffffff;
+
+  /* Borders & Icons */
+  --border-color: #dee2e6;
+  --icon-bg: rgba(0, 0, 0, 0.05);
+
+  /* Components */
+  --primary-color: #c21e25;
+  /* Default Base Primary */
+  --btn-primary-bg: var(--primary-color);
+  --btn-primary-text: #ffffff;
+  --card-bg: #ffffff;
+  --input-bg: #fcfcfc;
+  --sidenav-bg: #ffffff;
+  --sidenav-active-bg: #fff0f0;
+  --sidenav-active-text: #ff0000;
+
+  /* Status & Chips */
+  --status-active-bg: #f6ffed;
+  --status-active-text: #52c41a;
+  --status-inactive-bg: #fffbe6;
+  --status-inactive-text: #faad14;
+
+  --chip-blue-bg: #e6f7ff;
+  --chip-blue-text: #1890ff;
+  --chip-green-bg: #f6ffed;
+  --chip-green-text: #52c41a;
+
+  /* Form Fields */
+  --field-label-color: #202124;
+  --field-label-height: 27px;
+  --field-input-bg: #fefefe;
+  --field-input-border: #bdc1c6;
+  --field-input-height: 40px;
+  --field-input-radius: 7px;
+  --field-hint-color: #5f6368;
+
+  /* Smart Table Inline Edit Controls */
+  --st-cell-input-border: 1px solid var(--field-input-border, #dee2e6);
+  --st-cell-input-focus-outline-color: var(--primary-color, #c21e25);
+  --st-cell-input-bg: var(--field-input-bg, #fcfcfc);
+  --st-cell-select-bg: var(--field-input-bg, #fcfcfc);
+
+  /* Smart Table Inline Edit Controls (Mirrored) */
+  --st-edit-actions-gap: 0.75rem;
+  --st-action-btn-size: 32px;
+  --st-action-btn-icon-size: 16px;
+  --st-tick-btn-bg: transparent;
+  --st-cross-btn-bg: #ffffff;
+  --st-cross-btn-border: 1px solid #e8eaed;
+  --st-cross-btn-hover-bg: #f8f9fa;
+  --st-top-add-btn-bg: #4d89eb;
+  --st-top-add-btn-hover-bg: #295eb7;
+
+  /* MultiSave (Card Repeater) */
+  --ms-card-bg: #ffffff;
+  --ms-card-border: #e8eaed;
+  --ms-card-radius: 10px;
+  --ms-card-shadow: 0 1px 4px rgba(0, 0, 0, 0.05);
+  --ms-card-shadow-hover: 0 6px 16px rgba(0, 0, 0, 0.08);
+  --ms-title-color: #111827;
+  --ms-desc-color: #6b7280;
+  --ms-btn-add-color: #3b82f6;
+  --ms-btn-add-hover: #2563eb;
+
+  @include sideNav.side-nav-theme();
+}
+
+/* ----------------------------------------------------
+   Theme 2 - Aesthetic Midnight (Dark/Neon)
+   ---------------------------------------------------- */
+body.theme-2 {
+  --primary-color: #00d4ff;
+  /* Neon Cyan */
+  --secondary-color: #2b52ff;
+  /* Bright Blue */
+
+  /* Layout Backgrounds */
+  --header-bg: rgba(15, 28, 63, 0.95);
+  /* Deep Indigo */
+  --footer-bg-start: #0a1128;
+  --footer-bg-end: #0f1c3f;
+  --sidebar-bg: #0a1128;
+  --content-bg: #0f1c3f;
+
+  /* Text Colors */
+  --text-color: #ffffff;
+  --text-muted: rgba(255, 255, 255, 0.7);
+  --text-muted-2: rgba(255, 255, 255, 0.6);
+  --text-light: #aaaaaa;
+  --text-on-primary: #000000;
+
+  /* Borders & Icons */
+  --border-color: rgba(255, 255, 255, 0.1);
+  --icon-bg: rgba(255, 255, 255, 0.1);
+  /* Typography */
+  --cc-font-family: 'Roboto', 'Helvetica Neue', sans-serif;
+  --cc-text-color-primary: #000000;
+  --cc-text-color-secondary: #757575;
+  --cc-text-size-label: 12px;
+  --cc-text-size-value: 24px;
+  --cc-text-weight-bold: 700;
+  --cc-text-weight-medium: 500;
+
+  /* Theme 1 - Screenshot Match */
+  --cc-theme-1-padding: 20px;
+  --cc-theme-1-border-radius: 6px;
+  --cc-theme-1-border: 1px solid #eeeeee;
+  --cc-theme-1-shadow: 0 1px 3px rgba(0, 0, 0, 0.05);
+
+  /* Theme 2 - Aesthetic */
+  --cc-theme-2-padding: 32px;
+  --cc-theme-2-border-radius: 16px;
+  --cc-theme-2-border: none;
+  --cc-theme-2-shadow: 0 10px 30px -10px rgba(0, 0, 0, 0.1);
+  --cc-theme-2-bg: #ffffff;
+
+}
+
+/* Global Reset/Base */
+body {
+  margin: 0;
+  font-family: 'Inter', sans-serif;
+  background-color: var(--content-bg);
+  /* Use content-bg, not generic bg-color */
+  color: var(--text-color);
+  transition:
+    background-color 0.3s ease,
+    color 0.3s ease;
+}

package/src/lib/styles/utilities.scss

@@ -0,0 +1,250 @@
+/* utilities.scss */
+
+/* Display Classes */
+.d-flex { display: flex; }
+.d-inline-flex { display: inline-flex; }
+.d-grid { display: grid; }
+.d-block { display: block; }
+.d-none { display: none; }
+
+/* Flexbox Directions & Wraps */
+.flex-column { flex-direction: column; }
+.flex-row { flex-direction: row; }
+.flex-row-reverse { flex-direction: row-reverse; }
+.flex-wrap { flex-wrap: wrap; }
+.flex-1 { flex: 1; }
+
+/* Alignments */
+.align-items-center { align-items: center; }
+.align-items-start { align-items: flex-start; }
+.align-items-end { align-items: flex-end; }
+.justify-content-center { justify-content: center; }
+.justify-content-between { justify-content: space-between; }
+.justify-content-start { justify-content: flex-start; }
+.justify-content-end { justify-content: flex-end; }
+
+/* Grid */
+.grid-cols-12 { grid-template-columns: repeat(12, 1fr); }
+
+/* Width & Height (Percentages) */
+.w-100 { width: 100%; }
+.h-100 { height: 100%; }
+
+/* Positioning */
+.position-relative { position: relative; }
+.position-absolute { position: absolute; }
+
+/* Text Alignment */
+.text-center { text-align: center; }
+.text-left { text-align: left; }
+.text-right { text-align: right; }
+
+/* Fonts */
+.font-poppins { font-family: var(--cc-sf-font-family, 'Poppins', sans-serif); }
+.font-weight-400 { font-weight: 400; }
+.font-weight-500 { font-weight: 500; }
+.font-weight-600 { font-weight: 600; }
+
+.text-13 { font-size: 13px; }
+.text-14 { font-size: 14px; }
+.text-16 { font-size: 16px; }
+
+/* Colors (from variables) */
+.color-white { color: #ffffff; }
+.color-dark { color: #111827; }
+.color-gray { color: #6B7280; }
+.color-error { color: var(--cc-sf-error-text-color, #DC2626); }
+.bg-white { background-color: #ffffff; }
+.bg-transparent { background-color: transparent; }
+
+/* Margins */
+.m-0 { margin: 0; }
+.mt-4 { margin-top: 4px; }
+.mt-8 { margin-top: 8px; }
+.mt-10 { margin-top: 10px; }
+.mt-12 { margin-top: 12px; }
+.mt-16 { margin-top: 16px; }
+.mt-20 { margin-top: 20px; }
+.mt-24 { margin-top: 24px; }
+
+.mb-0 { margin-bottom: 0px; }
+.mb-4 { margin-bottom: 4px; }
+.mb-8 { margin-bottom: 8px; }
+.mb-10 { margin-bottom: 10px; }
+.mb-12 { margin-bottom: 12px; }
+.mb-16 { margin-bottom: 16px; }
+.mb-20 { margin-bottom: 20px; }
+.mb-24 { margin-bottom: 24px; }
+
+.ml-16 { margin-left: 16px; }
+.ml-20 { margin-left: 20px; }
+
+/* Paddings */
+.p-0 { padding: 0; }
+.p-16 { padding: 16px; }
+.p-20 { padding: 20px; }
+.p-24 { padding: 24px; }
+.pt-20 { padding-top: 20px; }
+.pb-10 { padding-bottom: 10px; }
+
+/* Gaps */
+.gap-4 { gap: 4px; }
+.gap-6 { gap: 6px; }
+.gap-8 { gap: 8px; }
+.gap-10 { gap: 10px; }
+.gap-12 { gap: 12px; }
+.gap-16 { gap: 16px; }
+.gap-20 { gap: 20px; }
+
+/* Border Radius */
+.rounded-4 { border-radius: 4px; }
+.rounded-6 { border-radius: 6px; }
+.rounded-8 { border-radius: 8px; }
+.rounded-10 { border-radius: 10px; }
+.rounded-12 { border-radius: 12px; }
+.rounded-20 { border-radius: 20px; }
+.rounded-24 { border-radius: 24px; }
+.rounded-50 { border-radius: 50%; }
+
+/* Utilities */
+.cursor-pointer { cursor: pointer; }
+.overflow-hidden { overflow: hidden; }
+.resize-vertical { resize: vertical; }
+.box-sizing-border { box-sizing: border-box; }
+
+/* Form Auto Extracted Utilities 2 */
+.border-none { border: none !important; }
+.mb-16px { margin-bottom: var(--cc-sf-grid-gap, 16px) !important; }
+.c-DC2626 { color: var(--cc-sf-label-required-color, #DC2626) !important; }
+.ml-0-125rem { margin-left: 0.125rem !important; }
+.fs-0-875rem { font-size: 0.875rem !important; }
+.c-111827 { color: var(--cc-sf-label-color, #111827) !important; }
+.br-7px { border-radius: var(--cc-sf-input-radius, 7px) !important; }
+.c-6B7280 { color: var(--cc-sf-hint-color, #6B7280) !important; }
+.fs-0-75rem { font-size: var(--cc-sf-error-text-size, 0.75rem) !important; }
+.b-none { background: none !important; }
+.p-32px-24px { padding: 32px 24px !important; }
+.us-none { user-select: none !important; }
+.c-1E293B { color: var(--cc-sf-label-color, #1E293B) !important; }
+.c-3B82F6 { color: var(--cc-sf-chip-selected-bg, #3B82F6) !important; }
+.fs-0-78rem { font-size: 0.78rem !important; }
+.p-10px-14px { padding: 10px 14px !important; }
+.fs-0-85rem { font-size: 0.85rem !important; }
+.fs-0-72rem { font-size: 0.72rem !important; }
+.c-94A3B8 { color: #94A3B8 !important; }
+.p-4px { padding: 4px !important; }
+.br-8px { border-radius: var(--cc-sf-input-radius, 8px) !important; }
+.bc-F3F4F6 { background-color: var(--cc-sf-input-disabled-bg, #F3F4F6) !important; }
+.br-none { border-right: none !important; }
+.bl-none { border-left: none !important; }
+.pe-none { pointer-events: none !important; }
+.fs-1-1rem { font-size: 1.1rem !important; }
+.c-9CA3AF { color: var(--cc-sf-hint-color, #9CA3AF) !important; }
+.pl-2-4rem { padding-left: 2.4rem !important; }
+.fs-0-8125rem { font-size: 0.8125rem !important; }
+.ls-none { list-style: none !important; }
+.br-12px { border-radius: var(--mu-carousel-radius, 12px) !important; }
+.b-FFFAF1 { background: var(--cc-sf-dropzone-bg, #FFFAF1) !important; }
+.fs-18px { font-size: 18px !important; }
+.b-FEF2F2 { background: var(--cc-sf-error-bg, #FEF2F2) !important; }
+
+/* Form Auto Extracted Utilities 3 */
+.bc-DC2626 { border-color: var(--cc-sf-error-border, #DC2626) !important; }
+.c-202124 { color: var(--cc-sf-label-color, #202124) !important; }
+.fs-18px { font-size: var(--cc-sf-label-size, 18px) !important; }
+.mb-0-5rem { margin-bottom: 0.5rem !important; }
+.pt-0-625rem { padding-top: var(--cc-sf-input-padding-y, 0.625rem) !important; }
+.pb-0-625rem { padding-bottom: var(--cc-sf-input-padding-y, 0.625rem) !important; }
+.pl-16px { padding-left: var(--cc-sf-input-padding-x, 16px) !important; }
+.pr-16px { padding-right: var(--cc-sf-input-padding-x, 16px) !important; }
+.bc-ffffff { background-color: var(--cc-sf-section-bg, #ffffff) !important; }
+.b-1px-solid-D1D5DB { border: 1px solid var(--cc-sf-input-border, #D1D5DB) !important; }
+.fs-0-75rem { font-size: 0.75rem !important; }
+.c-1F2937 { color: var(--cc-sf-section-label-color, #1F2937) !important; }
+.p-6px-14px { padding: var(--cc-sf-chip-padding, 6px 14px) !important; }
+.b-ffffff { background: var(--loc-suggestion-bg, #ffffff) !important; }
+.c-374151 { color: var(--cc-sf-label-color, #374151) !important; }
+.br-20px { border-radius: var(--cc-sf-chip-radius, 20px) !important; }
+.fs-0-875rem { font-size: var(--cc-sf-btn-font-size, 0.875rem) !important; }
+.bc-D1D5DB { background-color: var(--cc-sf-switch-track-off, #D1D5DB) !important; }
+.pr-2-75rem { padding-right: 2.75rem !important; }
+.p-0-25rem { padding: 0.25rem !important; }
+.p-0-625rem-0-875rem { padding: var(--cc-sf-generated-padding, 0.625rem 0.875rem) !important; }
+.b-F3F4F6 { background: var(--cc-sf-generated-bg, #F3F4F6) !important; }
+.b-1px-solid-E5E7EB { border: 1px solid var(--cc-sf-input-disabled-border, #E5E7EB) !important; }
+.br-8px { border-radius: var(--cc-sf-uploaded-item-radius, 8px) !important; }
+.c-6B7280 { color: var(--ms-desc-color, #6B7280) !important; }
+.mb-20px { margin-bottom: var(--cc-sf-section-gap, 20px) !important; }
+.br-10px { border-radius: var(--cc-sf-input-radius, 10px) !important; }
+.p-20px { padding: var(--cc-sf-section-padding, 20px) !important; }
+.fs-1rem { font-size: 1rem !important; }
+.m-0-0-16px-0 { margin: 0 0 16px 0 !important; }
+.bb-2px-solid-E5E7EB { border-bottom: var(--cc-sf-section-label-border, 2px solid #E5E7EB) !important; }
+.p-16px { padding: var(--cc-sf-instance-padding, 16px) !important; }
+.b-F9FAFB { background: var(--loc-tba-bg, #F9FAFB) !important; }
+.bb-1px-dashed-D1D5DB { border-bottom: var(--cc-sf-instance-divider, 1px dashed #D1D5DB) !important; }
+.c-4B5563 { color: var(--cc-sf-instance-num-color, #4B5563) !important; }
+.fs-0-8125rem { font-size: var(--cc-sf-hint-size, 0.8125rem) !important; }
+.pb-0 { padding-bottom: 0 !important; }
+.p-18px-24px { padding: 18px 24px !important; }
+.c-111827 { color: var(--ms-title-color, #111827) !important; }
+.bt-1px-solid-E5E7EB { border-top: 1px solid #E5E7EB !important; }
+.p-4px-10px { padding: 4px 10px !important; }
+.b-FFF5F5 { background: var(--cc-sf-btn-remove-bg, #FFF5F5) !important; }
+.c-E53E3E { color: var(--loc-delete-color, #E53E3E) !important; }
+.b-1px-solid-FED7D7 { border: var(--cc-sf-btn-remove-border, 1px solid #FED7D7) !important; }
+.br-4px { border-radius: var(--cc-sf-btn-remove-radius, 4px) !important; }
+.p-8px-16px { padding: 8px 16px !important; }
+.b-transparent { background: var(--cc-sf-btn-add-bg, transparent) !important; }
+.c-3B82F6 { color: var(--cc-sf-input-focus-border, #3B82F6) !important; }
+.b-1px-dashed-CBD5E1 { border: var(--cc-sf-btn-add-border, 1px dashed #CBD5E1) !important; }
+.br-6px { border-radius: var(--cc-sf-btn-add-radius, 6px) !important; }
+.b-1-5px-dashed-CBD5E1 { border: var(--cc-sf-dropzone-border, 1.5px dashed #CBD5E1) !important; }
+.br-12px { border-radius: var(--cc-sf-dropzone-radius, 12px) !important; }
+.bc-FFFAF1 { background-color: var(--cc-sf-dropzone-bg, #FFFAF1) !important; }
+.c-94A3B8 { color: var(--cc-sf-uploaded-remove-color, #94A3B8) !important; }
+.fs-0-9rem { font-size: var(--cc-sf-input-font-size, 0.9rem) !important; }
+.c-64748B { color: var(--cc-sf-dropzone-hint-color, #64748B) !important; }
+.b-1px-solid-E2E8F0 { border: var(--cc-sf-uploaded-item-border, 1px solid #E2E8F0) !important; }
+.b-2px-solid-E2E8F0 { border: 2px solid #E2E8F0 !important; }
+.pr-3-5rem { padding-right: 3.5rem !important; }
+.p-0-0-875rem { padding: 0 0.875rem !important; }
+.bc-FFFFFF { background-color: var(--cc-sf-input-bg, #FFFFFF) !important; }
+.b-1-5px-solid-D1D5DB { border: var(--cc-sf-input-border, 1.5px solid #D1D5DB) !important; }
+.mb-0-75rem { margin-bottom: 0.75rem !important; }
+.mt-6px { margin-top: 6px !important; }
+.pr-2-4rem { padding-right: 2.4rem !important; }
+.p-0-2rem { padding: 0.2rem !important; }
+.fs-1-35rem { font-size: 1.35rem !important; }
+.p-4px-12px { padding: 4px 12px !important; }
+.b-111827 { background: var(--cc-sf-label-color, #111827) !important; }
+.b-2px-dashed-CBD5E1 { border: 2px dashed var(--cc-sf-dropzone-border, #CBD5E1) !important; }
+.fs-52px { font-size: 52px !important; }
+.p-12px-16px { padding: 12px 16px !important; }
+.bb-1px-solid-F3F4F6 { border-bottom: 1px solid var(--cc-sf-input-disabled-border, #F3F4F6) !important; }
+.b-0F172A { background: var(--mu-carousel-bg, #0F172A) !important; }
+.b-3px-solid-rgba-255-255-255-0-15 { border: 3px solid rgba(255, 255, 255, 0.15) !important; }
+.b-rgba-255-255-255-0-85 { background: rgba(255, 255, 255, 0.85) !important; }
+.b-rgba-0-0-0-0-55 { background: rgba(0, 0, 0, 0.55) !important; }
+.b-rgba-255-255-255-0-45 { background: rgba(255, 255, 255, 0.45) !important; }
+.pb-4px { padding-bottom: 4px !important; }
+.b-2px-solid-transparent { border: 2px solid transparent !important; }
+.b-E2E8F0 { background: var(--mu-thumb-bg, #E2E8F0) !important; }
+.b-1E293B { background: #1E293B !important; }
+.c-EF4444 { color: #EF4444 !important; }
+.b-rgba-0-0-0-0-5 { background: rgba(0, 0, 0, 0.5) !important; }
+.br-16px { border-radius: var(--mu-modal-radius, 16px) !important; }
+.p-24px-28px { padding: 24px 28px !important; }
+.bb-1px-solid-E5E7EB { border-bottom: 1px solid var(--cc-sf-input-disabled-border, #E5E7EB) !important; }
+.fs-1-25rem { font-size: 1.25rem !important; }
+.p-48px-24px { padding: 48px 24px !important; }
+.b-3px-solid-E2E8F0 { border: 3px solid #E2E8F0 !important; }
+.p-16px-24px { padding: 16px 24px !important; }
+.p-28px { padding: 28px !important; }
+.b-3px-solid-transparent { border: 3px solid transparent !important; }
+.b-rgba-59-130-246-0-12 { background: rgba(59, 130, 246, 0.12) !important; }
+.p-20px-28px { padding: 20px 28px !important; }
+.c-1A56DB { color: var(--loc-add-color, #1A56DB) !important; }
+.b-1px-dashed-D1D5DB { border: 1px dashed var(--cc-sf-input-disabled-border, #D1D5DB) !important; }
+.fs-40px { font-size: 40px !important; }
+.c-9CA3AF { color: var(--loc-tba-icon-color, #9CA3AF) !important; }

package/src/lib/utils/constants.ts

@@ -0,0 +1,11 @@
+export const DEFAULT_ITEMS_PER_PAGE = 10;
+export const DEFAULT_PAGE_SIZE_OPTIONS = [5, 10, 20, 50, 100];
+export const PAGINATION_THEME_DEFAULT = 'theme-1';
+export const PAGINATION_THEME_DARK = 'theme-2';
+
+// Nav
+export const NAV_VARIANT_DEFAULT: 'filled' | 'underline' | 'pills' = 'filled';
+export const NAV_ORIENTATION_DEFAULT: 'horizontal' | 'vertical' = 'horizontal';
+
+// Side Nav
+export const DEFAULT_SIDE_NAV_TOOLTIP_POSITION = 'right';

package/src/lib/utils/storage.utils.ts

@@ -0,0 +1,37 @@
+/**
+ * Utility functions for LocalStorage operations
+ */
+export const getLocalStorageItem = (key: string): string | null => {
+  return localStorage.getItem(key);
+};
+
+export const setLocalStorageItem = (key: string, value: string): void => {
+  localStorage.setItem(key, value);
+};
+
+export const removeLocalStorageItem = (key: string): void => {
+  localStorage.removeItem(key);
+};
+
+export const clearLocalStorage = (): void => {
+  localStorage.clear();
+};
+
+/**
+ * Utility functions for SessionStorage operations
+ */
+export const getSessionStorageItem = (key: string): string | null => {
+  return sessionStorage.getItem(key);
+};
+
+export const setSessionStorageItem = (key: string, value: string): void => {
+  sessionStorage.setItem(key, value);
+};
+
+export const removeSessionStorageItem = (key: string): void => {
+  sessionStorage.removeItem(key);
+};
+
+export const clearSessionStorage = (): void => {
+  sessionStorage.clear();
+};

package/src/lib/utils/string.utils.ts

@@ -0,0 +1,23 @@
+/**
+ * Utility functions for string manipulation
+ */
+export class StringUtils {
+
+    /**
+     * Converts a string to camelCase.
+     * Example: "First Name" -> "firstName", "Profile Picture" -> "profilePicture"
+     */
+    static toCamelCase(str?: string): string {
+        if (!str) return '';
+        return str
+            .replace(/[^a-zA-Z0-9 ]/g, '')
+            .split(' ')
+            .filter(Boolean)
+            .map((word, i) =>
+                i === 0
+                    ? word.charAt(0).toLowerCase() + word.slice(1)
+                    : word.charAt(0).toUpperCase() + word.slice(1)
+            )
+            .join('');
+    }
+}