@keenmate/pure-admin-core 1.0.0-rc01

package/src/scss/core-components/_forms.scss

@@ -0,0 +1,16 @@
+/* ========================================
+   Form Components
+   Form groups, inputs, selects, textareas, checkboxes, radio buttons, states
+   ======================================== */
+
+// ============================================================================
+// BACKWARD COMPATIBILITY AGGREGATOR
+// This file re-exports all form components from the modular forms/ directory.
+// For new code, prefer importing from forms/ directly:
+//   @use 'forms' as *;
+// or specific modules:
+//   @use 'forms/form-inputs';
+//   @use 'forms/checkboxes-radios';
+// ============================================================================
+
+@forward 'forms/index';

package/src/scss/core-components/_grid.scss

@@ -0,0 +1,264 @@
+// ============================================================================
+// NATIVE GRID SYSTEM
+// ============================================================================
+// Flexbox-based grid with percentage and fraction columns
+// Replaces PureCSS grid dependency
+@use '../variables' as *;
+//
+// Naming convention:
+// - .pa-row            → flex container
+// - .pa-col            → auto-equal width column
+// - .pa-col-{n}        → percentage width in 5% increments (5, 10, 15... 100)
+// - .pa-col-{x}-{y}    → fraction width (1-2, 1-3, 2-3, 1-4, 3-4, 1-6, 5-6, etc.)
+// - .pa-col-{bp}-{n}   → responsive variants (sm, md, lg, xl)
+// - .pa-offset-{n}     → left margin offset
+// ============================================================================
+
+@use "sass:math";
+
+// Configuration (note: $grid-breakpoints is in _variables.scss for shared use)
+$grid-gutter: 0.8rem !default; // 8px gutter on each side (with 10px base), total gap = 16px
+
+// Column sizes - 5% increments (n*5, n=1-20)
+$grid-columns-5: (5, 10, 15, 20, 25, 30, 35, 40, 45, 50, 55, 60, 65, 70, 75, 80, 85, 90, 95, 100);
+
+// Column sizes - fractions (for unintuitive percentages)
+$grid-columns-fractions: (
+  '1-2': 50%,
+  '1-3': 33.333%,
+  '2-3': 66.667%,
+  '1-4': 25%,
+  '3-4': 75%,
+  '1-5': 20%,
+  '2-5': 40%,
+  '3-5': 60%,
+  '4-5': 80%,
+  '1-6': 16.667%,
+  '5-6': 83.333%,
+  '1-12': 8.333%,
+  '5-12': 41.667%,
+  '7-12': 58.333%,
+  '11-12': 91.667%
+);
+
+// ============================================================================
+// ROW (Container)
+// ============================================================================
+.pa-row {
+  display: flex;
+  flex-wrap: wrap;
+  margin-left: -$grid-gutter;
+  margin-right: -$grid-gutter;
+
+  // Nested rows reset margins
+  .pa-row {
+    margin-left: 0;
+    margin-right: 0;
+  }
+}
+
+// Row modifiers
+.pa-row--no-gutter {
+  margin-left: 0;
+  margin-right: 0;
+
+  > [class*="pa-col"] {
+    padding-left: 0;
+    padding-right: 0;
+  }
+}
+
+.pa-row--center {
+  justify-content: center;
+}
+
+.pa-row--end {
+  justify-content: flex-end;
+}
+
+.pa-row--between {
+  justify-content: space-between;
+}
+
+.pa-row--around {
+  justify-content: space-around;
+}
+
+.pa-row--stretch {
+  align-items: stretch;
+}
+
+.pa-row--top {
+  align-items: flex-start;
+}
+
+.pa-row--middle {
+  align-items: center;
+}
+
+.pa-row--bottom {
+  align-items: flex-end;
+}
+
+.pa-row--same-height {
+  > [class*="pa-col"] {
+    > .pa-card {
+      height: 100%;
+    }
+  }
+}
+
+// ============================================================================
+// COLUMN (Base)
+// ============================================================================
+.pa-col {
+  flex: 1;
+  padding-left: $grid-gutter;
+  padding-right: $grid-gutter;
+  min-width: 0; // Prevent content overflow
+}
+
+// Auto-width column
+.pa-col-auto {
+  flex: 0 0 auto;
+  width: auto;
+  padding-left: $grid-gutter;
+  padding-right: $grid-gutter;
+}
+
+// ============================================================================
+// PERCENTAGE COLUMNS (Base - 5% increments)
+// ============================================================================
+@each $size in $grid-columns-5 {
+  .pa-col-#{$size} {
+    flex: 0 0 math.percentage(math.div($size, 100));
+    max-width: math.percentage(math.div($size, 100));
+    padding-left: $grid-gutter;
+    padding-right: $grid-gutter;
+    min-width: 0; // Prevent content overflow
+  }
+}
+
+// ============================================================================
+// FRACTION COLUMNS (Base - intuitive naming)
+// ============================================================================
+@each $name, $width in $grid-columns-fractions {
+  .pa-col-#{$name} {
+    flex: 0 0 $width;
+    max-width: $width;
+    padding-left: $grid-gutter;
+    padding-right: $grid-gutter;
+    min-width: 0; // Prevent content overflow
+  }
+}
+
+// ============================================================================
+// OFFSETS (Base - 5% increments)
+// ============================================================================
+@each $size in $grid-columns-5 {
+  @if $size < 100 {
+    .pa-offset-#{$size} {
+      margin-left: math.percentage(math.div($size, 100));
+    }
+  }
+}
+
+// ============================================================================
+// RESPONSIVE COLUMNS & OFFSETS
+// ============================================================================
+@each $bp, $min-width in $grid-breakpoints {
+  @media (min-width: $min-width) {
+    // Responsive percentage columns (5% increments)
+    @each $size in $grid-columns-5 {
+      .pa-col-#{$bp}-#{$size} {
+        flex: 0 0 math.percentage(math.div($size, 100));
+        max-width: math.percentage(math.div($size, 100));
+        min-width: 0; // Prevent content overflow
+      }
+    }
+
+    // Responsive fraction columns
+    @each $name, $width in $grid-columns-fractions {
+      .pa-col-#{$bp}-#{$name} {
+        flex: 0 0 $width;
+        max-width: $width;
+        min-width: 0; // Prevent content overflow
+      }
+    }
+
+    // Responsive offsets (5% increments)
+    @each $size in $grid-columns-5 {
+      @if $size < 100 {
+        .pa-offset-#{$bp}-#{$size} {
+          margin-left: math.percentage(math.div($size, 100));
+        }
+      }
+    }
+
+    // Responsive auto column
+    .pa-col-#{$bp}-auto {
+      flex: 0 0 auto;
+      width: auto;
+    }
+  }
+}
+
+// ============================================================================
+// COLUMN MODIFIERS
+// ============================================================================
+.pa-col--no-padding {
+  padding-left: 0;
+  padding-right: 0;
+}
+
+.pa-col--grow {
+  flex-grow: 1;
+}
+
+.pa-col--shrink {
+  flex-shrink: 1;
+}
+
+// ============================================================================
+// VISIBILITY HELPERS (Responsive)
+// ============================================================================
+.pa-hide {
+  display: none !important;
+}
+
+.pa-show {
+  display: block !important;
+}
+
+@each $bp, $min-width in $grid-breakpoints {
+  // Hide at breakpoint and up
+  @media (min-width: $min-width) {
+    .pa-hide-#{$bp} {
+      display: none !important;
+    }
+
+    .pa-show-#{$bp} {
+      display: block !important;
+    }
+  }
+
+  // Hide below breakpoint
+  @media (max-width: $min-width - 1px) {
+    .pa-hide-below-#{$bp} {
+      display: none !important;
+    }
+
+    .pa-show-below-#{$bp} {
+      display: block !important;
+    }
+  }
+}
+
+// ============================================================================
+// REMOVE BOTTOM PADDING IN CARDS
+// ============================================================================
+// Remove bottom padding from grid columns inside cards to avoid conflicts
+.pa-card__body .pa-row > [class*="pa-col"] {
+  padding-bottom: 0;
+}
+

package/src/scss/core-components/_layout.scss

@@ -0,0 +1,15 @@
+/* ========================================
+   Layout V2 - Based on Testbench Structure
+   ======================================== */
+
+// ============================================================================
+// BACKWARD COMPATIBILITY AGGREGATOR
+// This file re-exports all layout components from the modular layout/ directory.
+// For new code, prefer importing from layout/ directly:
+//   @use 'layout' as *;
+// or specific modules:
+//   @use 'layout/navbar';
+//   @use 'layout/sidebar';
+// ============================================================================
+
+@forward 'layout/index';

package/src/scss/core-components/_lists.scss

@@ -0,0 +1,211 @@
+/* ========================================
+   List Components
+   List items with avatars, titles, subtitles, and meta information
+   ======================================== */
+@use '../variables' as *;
+
+// Basic HTML Lists (ul, ol, dl)
+.pa-list-basic {
+  margin: 0;
+  padding-left: $spacing-lg;
+
+  li {
+    margin-bottom: $spacing-sm;
+    line-height: 1.6;
+  }
+
+  &--spacious li {
+    margin-bottom: $spacing-base;
+  }
+
+  &--compact li {
+    margin-bottom: $spacing-xs;
+  }
+
+  &--unstyled {
+    list-style: none;
+    padding-left: 0;
+  }
+
+  &--inline {
+    list-style: none;
+    padding-left: 0;
+    display: flex;
+    flex-wrap: wrap;
+    gap: $spacing-base;
+  }
+
+  &--bordered {
+    list-style: none;
+    padding-left: 0;
+
+    li {
+      padding: $spacing-sm $spacing-base;
+      border-bottom: $border-width-base solid var(--pa-border-color);
+
+      &:last-child {
+        border-bottom: none;
+      }
+    }
+  }
+
+  &--striped {
+    list-style: none;
+    padding-left: 0;
+
+    li {
+      padding: $spacing-sm $spacing-base;
+
+      &:nth-child(even) {
+        background-color: var(--pa-table-stripe);
+      }
+    }
+  }
+
+  &--icon {
+    list-style: none;
+    padding-left: 0;
+
+    li {
+      display: flex;
+      align-items: flex-start;
+      gap: $spacing-sm;
+
+      &::before {
+        content: '✓';
+        color: $success-bg;
+        font-weight: $font-weight-semibold;
+        flex-shrink: 0;
+      }
+    }
+
+    &.pa-list-basic--danger li::before {
+      content: '✗';
+      color: $danger-bg;
+    }
+
+    &.pa-list-basic--info li::before {
+      content: '→';
+      color: $info-bg;
+    }
+
+    &.pa-list-basic--warning li::before {
+      content: '!';
+      color: $warning-bg;
+    }
+  }
+}
+
+.pa-list-ordered {
+  margin: 0;
+  padding-left: $spacing-lg;
+
+  li {
+    margin-bottom: $spacing-sm;
+    line-height: 1.6;
+    padding-left: $spacing-xs;
+  }
+
+  &--roman {
+    list-style-type: upper-roman;
+  }
+
+  &--alpha {
+    list-style-type: lower-alpha;
+  }
+}
+
+.pa-list-definition {
+  margin: 0;
+
+  dt {
+    font-weight: $font-weight-semibold;
+    color: var(--pa-text-primary);
+    margin-bottom: $spacing-xs;
+    margin-top: $spacing-base;
+
+    &:first-child {
+      margin-top: 0;
+    }
+  }
+
+  dd {
+    margin-left: $spacing-lg;
+    margin-bottom: $spacing-sm;
+    color: var(--pa-text-secondary);
+    line-height: 1.6;
+  }
+
+  &--inline {
+    dt {
+      display: inline;
+      margin-right: $spacing-xs;
+
+      &::after {
+        content: ':';
+      }
+    }
+
+    dd {
+      display: inline;
+      margin-left: 0;
+      margin-right: $spacing-base;
+
+      &::after {
+        content: '';
+        display: block;
+      }
+    }
+  }
+}
+
+// Complex Lists (with avatars, titles, etc.)
+.pa-list {
+  &__item {
+    display: flex;
+    align-items: center;
+    gap: $spacing-md;
+    padding: $card-footer-padding-v $card-footer-padding-h;
+    border-bottom: $border-width-base solid var(--pa-border-color);
+
+    &:last-child {
+      border-bottom: none;
+    }
+
+    &:hover {
+      background-color: var(--pa-primary-bg);
+    }
+  }
+
+  &__avatar {
+    width: $btn-icon-only-size;
+    height: $btn-icon-only-size;
+    border-radius: 50%;
+    background-color: var(--pa-primary-bg);
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    font-size: $font-size-base;
+  }
+
+  &__content {
+    flex: 1;
+  }
+
+  &__title {
+    font-weight: $font-weight-medium;
+    color: var(--pa-text-primary);
+    margin-bottom: $spacing-xs;
+  }
+
+  &__subtitle {
+    color: var(--pa-text-secondary);
+    font-size: $font-size-sm;
+    margin-bottom: $spacing-xs;
+  }
+
+  &__meta {
+    color: var(--pa-text-secondary);
+    font-size: $font-size-xs;
+  }
+}