@keenmate/pure-admin-core 1.0.0-rc01

package/src/scss/core-components/forms/_checkboxes-radios.scss

@@ -0,0 +1,205 @@
+/* ========================================
+   Checkboxes and Radio Buttons
+   Custom checkbox component with tri-state support, radio buttons
+   ======================================== */
+@use '../../variables' as *;
+
+// Checkboxes and Radio Buttons Container
+.pa-checkbox-group,
+.pa-radio-group {
+  display: flex;
+  flex-direction: column;
+  gap: $form-scale;
+}
+
+// ============================================================================
+// Custom Checkbox Component (Tri-State Support)
+// ============================================================================
+// States: unchecked, checked, indeterminate
+// Set indeterminate via JS: checkbox.indeterminate = true
+// ============================================================================
+.pa-checkbox {
+  display: inline-flex;
+  align-items: center;
+  gap: $spacing-sm;
+  cursor: pointer;
+  font-size: $font-size-sm;
+  color: var(--pa-text-primary);
+  user-select: none;
+
+  // Hide native checkbox (visually hidden but accessible)
+  input[type="checkbox"] {
+    position: absolute;
+    opacity: 0;
+    width: 0;
+    height: 0;
+    pointer-events: none;
+  }
+
+  // Custom checkbox box
+  &__box {
+    position: relative;
+    width: $checkbox-size;
+    height: $checkbox-size;
+    border: $checkbox-border-width solid var(--pa-checkbox-border-color);
+    border-radius: $checkbox-border-radius;
+    background-color: var(--pa-checkbox-bg);
+    transition: all $checkbox-transition $easing-snappy;
+    flex-shrink: 0;
+
+    // Checkmark/dash (hidden by default)
+    &::after {
+      content: '';
+      position: absolute;
+      display: none;
+    }
+  }
+
+  // Hover state
+  &:hover &__box {
+    border-color: var(--pa-checkbox-border-color-hover);
+  }
+
+  // Focus state (keyboard navigation)
+  input:focus-visible + &__box {
+    box-shadow: var(--pa-checkbox-focus-shadow);
+    border-color: var(--pa-checkbox-border-color-checked);
+  }
+
+  // Checked state
+  input:checked + &__box {
+    background-color: var(--pa-checkbox-bg-checked);
+    border-color: var(--pa-checkbox-border-color-checked);
+
+    &::after {
+      display: block;
+      // Checkmark shape (CSS border trick)
+      left: 30%;
+      top: 10%;
+      width: 30%;
+      height: 55%;
+      border: solid var(--pa-checkbox-checkmark-color);
+      border-width: 0 2px 2px 0;
+      transform: rotate(45deg);
+    }
+  }
+
+  // Indeterminate state (dash)
+  input:indeterminate + &__box {
+    background-color: var(--pa-checkbox-bg-indeterminate);
+    border-color: var(--pa-checkbox-border-color-checked);
+
+    &::after {
+      display: block;
+      // Dash shape
+      left: 20%;
+      top: 45%;
+      width: 60%;
+      height: 0;
+      border: solid var(--pa-checkbox-checkmark-color);
+      border-width: 0 0 2px 0;
+      transform: none;
+    }
+  }
+
+  // Label text
+  &__label {
+    flex: 1;
+  }
+
+  // Size modifiers - apply to box element
+  &--xs &__box { width: $checkbox-size-xs; height: $checkbox-size-xs; }
+  &--sm &__box { width: $checkbox-size-sm; height: $checkbox-size-sm; }
+  &--lg &__box { width: $checkbox-size-lg; height: $checkbox-size-lg; }
+  &--xl &__box { width: $checkbox-size-xl; height: $checkbox-size-xl; }
+
+  // Checkmark position adjustments for smaller sizes
+  &--xs input:checked + &__box::after,
+  &--sm input:checked + &__box::after {
+    left: 25%;
+    top: 5%;
+  }
+  &--xs input:indeterminate + &__box::after,
+  &--sm input:indeterminate + &__box::after {
+    top: 40%;
+  }
+
+  // X mark modifier (instead of checkmark)
+  &--x input:checked + &__box {
+    &::after {
+      // First diagonal of X
+      left: 50%;
+      top: 50%;
+      width: 60%;
+      height: 0;
+      border: solid var(--pa-checkbox-checkmark-color);
+      border-width: 0 0 2px 0;
+      transform: translate(-50%, -50%) rotate(45deg);
+    }
+    &::before {
+      // Second diagonal of X
+      content: '';
+      position: absolute;
+      display: block;
+      left: 50%;
+      top: 50%;
+      width: 60%;
+      height: 0;
+      border: solid var(--pa-checkbox-checkmark-color);
+      border-width: 0 0 2px 0;
+      transform: translate(-50%, -50%) rotate(-45deg);
+    }
+  }
+
+  // Disabled state
+  &--disabled,
+  &:has(input:disabled) {
+    opacity: 0.5;
+    cursor: not-allowed;
+
+    .pa-checkbox__box {
+      cursor: not-allowed;
+    }
+  }
+}
+
+// ============================================================================
+// Radio Buttons (Native styling)
+// ============================================================================
+.pa-radio {
+  display: flex;
+  align-items: center;
+  gap: $form-scale;
+  cursor: pointer;
+  font-size: $font-size-sm;
+  color: var(--pa-text-primary);
+
+  input {
+    margin: 0;
+    width: $checkbox-size;
+    height: $checkbox-size;
+    cursor: pointer;
+    flex-shrink: 0;
+  }
+
+  // Size modifiers
+  &--xs input {
+    width: $checkbox-size-xs;
+    height: $checkbox-size-xs;
+  }
+
+  &--sm input {
+    width: $checkbox-size-sm;
+    height: $checkbox-size-sm;
+  }
+
+  &--lg input {
+    width: $checkbox-size-lg;
+    height: $checkbox-size-lg;
+  }
+
+  &--xl input {
+    width: $checkbox-size-xl;
+    height: $checkbox-size-xl;
+  }
+}

package/src/scss/core-components/forms/_form-inputs.scss

@@ -0,0 +1,100 @@
+/* ========================================
+   Form Input Elements
+   Input, select, textarea base styles and sizes
+   ======================================== */
+@use '../../variables' as *;
+
+.pa-input {
+  width: 100%;
+  padding: $input-padding-v $input-padding-h;
+  border: $border-width-base solid var(--pa-border-color);
+  border-radius: $border-radius;
+  font-size: $font-size-sm;
+  background-color: var(--pa-input-bg);
+  color: var(--pa-text-primary);
+  transition: border-color $transition-fast $easing-snappy;
+
+  &:focus {
+    outline: none;
+    border-color: var(--pa-input-focus-border-color);
+    box-shadow: 0 0 0 $focus-ring-width var(--pa-accent-light);
+  }
+}
+
+.pa-select {
+  width: 100%;
+  padding: $select-padding-v $select-padding-h;
+  border: $border-width-base solid var(--pa-border-color);
+  border-radius: $border-radius;
+  font-size: $font-size-sm;
+  background-color: var(--pa-input-bg);
+  color: var(--pa-text-primary);
+  transition: border-color $transition-fast $easing-snappy;
+
+  &:focus {
+    outline: none;
+    border-color: var(--pa-select-focus-border-color);
+    box-shadow: 0 0 0 $focus-ring-width var(--pa-accent-light);
+  }
+}
+
+.pa-textarea {
+  width: 100%;
+  padding: $input-padding-v $input-padding-h;
+  border: $border-width-base solid var(--pa-border-color);
+  border-radius: $border-radius;
+  font-size: $font-size-sm;
+  background-color: var(--pa-input-bg);
+  color: var(--pa-text-primary);
+  transition: border-color $transition-fast $easing-snappy;
+  resize: vertical;
+  min-height: $textarea-min-height;
+
+  &:focus {
+    outline: none;
+    border-color: var(--pa-textarea-focus-border-color);
+    box-shadow: 0 0 0 $focus-ring-width var(--pa-accent-light);
+  }
+
+  &::placeholder {
+    color: var(--pa-text-secondary);
+  }
+}
+
+// Input Sizes
+.pa-input--xs,
+.pa-select--xs {
+  padding: $input-padding-xs-v $input-padding-h;
+  font-size: $font-size-xs;
+}
+
+.pa-input--sm,
+.pa-select--sm {
+  padding: $input-padding-v $input-padding-h;
+  font-size: $font-size-sm;
+}
+
+.pa-input--lg,
+.pa-select--lg {
+  padding: $input-padding-v $input-padding-h;
+  font-size: $font-size-base;
+}
+
+.pa-input--xl,
+.pa-select--xl {
+  padding: $input-padding-v $input-padding-h;
+  font-size: $font-size-lg;
+}
+
+// Dark mode: invert native date/time picker icons for visibility
+.pa-mode-dark {
+  input[type="date"],
+  input[type="time"],
+  input[type="datetime-local"],
+  input[type="month"],
+  input[type="week"] {
+    &::-webkit-calendar-picker-indicator {
+      filter: invert(1);
+    }
+  }
+}

package/src/scss/core-components/forms/_form-layout.scss

@@ -0,0 +1,66 @@
+/* ========================================
+   Form Layout
+   Form groups, form containers, horizontal layouts
+   ======================================== */
+@use '../../variables' as *;
+
+// Form Elements
+.pa-form-group {
+  margin-bottom: $form-group-margin-bottom;
+
+  // Remove margins when first/last child in card body (direct, in forms+grids, or in grid columns)
+  .pa-card__body > &:first-child,
+  .pa-card__body > .pa-form > .pure-g > [class*="pure-u"]:first-child > &:first-child,
+  .pa-card__body > [class*="pure-u"]:first-child > &:first-child {
+    margin-top: 0;
+  }
+  .pa-card__body > &:last-child,
+  .pa-card__body > .pa-form > .pure-g > [class*="pure-u"]:last-child > &:last-child,
+  .pa-card__body > [class*="pure-u"]:last-child > &:last-child {
+    margin-bottom: 0;
+  }
+}
+
+// Horizontal form group (label on left, input on right)
+.pa-form-group--horizontal {
+  display: flex;
+  align-items: flex-start;
+  gap: $spacing-base;
+
+  label {
+    flex-shrink: 0;
+    padding-top: $input-padding-v;
+    margin-bottom: 0;
+    color: var(--pa-text-primary);
+    font-weight: $font-weight-medium;
+    font-size: $font-size-sm;
+  }
+
+  // Input container takes remaining space
+  > .pa-input,
+  > .pa-select,
+  > .pa-textarea {
+    flex: 1;
+  }
+}
+
+.pa-form {
+  .pa-form-group {
+    label {
+      display: flex;
+      align-items: center;
+      gap: $form-scale;
+      margin-bottom: $form-label-margin-bottom;
+      color: var(--pa-text-primary);
+      font-weight: $font-weight-medium;
+      font-size: $font-size-sm;
+    }
+  }
+
+  .pa-form-actions {
+    margin-top: $spacing-base;
+    display: flex;
+    gap: $form-scale;
+    flex-wrap: wrap;
+  }
+}

package/src/scss/core-components/forms/_form-states.scss

@@ -0,0 +1,89 @@
+/* ========================================
+   Form Validation States
+   Input states (error, success, warning), form groups with states, help text
+   ======================================== */
+@use '../../variables' as *;
+
+// Input States
+.pa-input--error,
+.pa-select--error {
+  border-color: var(--pa-danger-bg);
+
+  &:focus {
+    border-color: var(--pa-danger-bg);
+    box-shadow: 0 0 0 $focus-ring-width var(--pa-danger-bg-light);
+  }
+}
+
+.pa-input--success,
+.pa-select--success {
+  border-color: var(--pa-success-bg);
+
+  &:focus {
+    border-color: var(--pa-success-bg);
+    box-shadow: 0 0 0 $focus-ring-width var(--pa-success-bg-light);
+  }
+}
+
+.pa-input--warning,
+.pa-select--warning {
+  border-color: var(--pa-warning-bg);
+
+  &:focus {
+    border-color: var(--pa-warning-bg);
+    box-shadow: 0 0 0 $focus-ring-width var(--pa-warning-bg-light);
+  }
+}
+
+// Form Groups with States
+.pa-form-group--error {
+  .pa-input,
+  .pa-select {
+    border-color: var(--pa-danger-bg);
+
+    &:focus {
+      border-color: var(--pa-danger-bg);
+      box-shadow: 0 0 0 $focus-ring-width var(--pa-danger-bg-light);
+    }
+  }
+}
+
+.pa-form-group--success {
+  .pa-input,
+  .pa-select {
+    border-color: var(--pa-success-bg);
+
+    &:focus {
+      border-color: var(--pa-success-bg);
+      box-shadow: 0 0 0 $focus-ring-width var(--pa-success-bg-light);
+    }
+  }
+}
+
+.pa-form-group--warning {
+  .pa-input,
+  .pa-select {
+    border-color: var(--pa-warning-bg);
+
+    &:focus {
+      border-color: var(--pa-warning-bg);
+      box-shadow: 0 0 0 $focus-ring-width var(--pa-warning-bg-light);
+    }
+  }
+}
+
+// Form Help Text
+.pa-form-help {
+  display: block;
+  margin-top: $form-help-margin-top;
+  font-size: $font-size-xs;
+  color: var(--pa-text-secondary);
+
+  &--error {
+    color: var(--pa-danger-bg);
+  }
+
+  &--success {
+    color: var(--pa-success-bg);
+  }
+}

package/src/scss/core-components/forms/_index.scss

@@ -0,0 +1,12 @@
+/* ========================================
+   Forms Index
+   Central import point for all form component modules
+   ======================================== */
+
+@forward 'form-layout';
+@forward 'form-inputs';
+@forward 'form-states';
+@forward 'input-groups';
+@forward 'input-wrapper';
+@forward 'query-editor';
+@forward 'checkboxes-radios';

package/src/scss/core-components/forms/_input-groups.scss

@@ -0,0 +1,149 @@
+/* ========================================
+   Input Groups
+   Input groups with prepend/append addons and buttons
+   ======================================== */
+@use '../../variables' as *;
+
+.pa-input-group {
+  display: flex;
+  align-items: stretch;
+
+  .pa-input {
+    border-radius: 0;
+    flex: 1;
+
+    &:first-child {
+      border-top-left-radius: $border-radius;
+      border-bottom-left-radius: $border-radius;
+    }
+
+    &:last-child {
+      border-top-right-radius: $border-radius;
+      border-bottom-right-radius: $border-radius;
+    }
+
+    &:not(:first-child) {
+      border-left: none;
+    }
+
+    &:not(:last-child) {
+      border-right: none;
+    }
+  }
+
+  &__prepend,
+  &__append {
+    display: flex;
+    align-items: center;
+    padding: $input-padding-v $input-padding-h;
+    border: $border-width-base solid var(--pa-border-color);
+    font-size: $font-size-sm;
+    line-height: 1;
+    white-space: nowrap;
+    border-radius: 0;
+  }
+
+  &__prepend {
+    background-color: var(--pa-input-group-prepend-bg);
+    color: var(--pa-input-group-prepend-text);
+    border-right: none;
+
+    &:first-child {
+      border-top-left-radius: $border-radius;
+      border-bottom-left-radius: $border-radius;
+    }
+  }
+
+  &__append {
+    background-color: var(--pa-input-group-append-bg);
+    color: var(--pa-input-group-append-text);
+    border-left: none;
+
+    &:last-child {
+      border-top-right-radius: $border-radius;
+      border-bottom-right-radius: $border-radius;
+    }
+  }
+
+  // Adjacent prepends/appends need borders between them
+  &__prepend + &__prepend {
+    border-left: $border-width-base solid var(--pa-border-color);
+  }
+
+  &__append + &__append {
+    border-left: $border-width-base solid var(--pa-border-color);
+  }
+
+  // When input is focused, only show focus border on edges adjacent to input
+  &:focus-within {
+    // Last prepend (one before input) gets focus border
+    .pa-input-group__prepend {
+      border-right: $border-width-base solid var(--pa-input-focus-border-color);
+    }
+
+    // But prepends followed by another prepend keep normal border
+    .pa-input-group__prepend:has(+ .pa-input-group__prepend) {
+      border-right: none;
+    }
+
+    // First append (one after input) gets focus border
+    .pa-input-group__append {
+      border-left: $border-width-base solid var(--pa-input-focus-border-color);
+    }
+
+    // But appends following another append keep normal border
+    .pa-input-group__append + .pa-input-group__append {
+      border-left: $border-width-base solid var(--pa-border-color);
+    }
+  }
+
+  &__button {
+    border-radius: 0;
+    border-color: var(--pa-border-color);
+    border-left: none;
+
+    &:first-child {
+      border-top-left-radius: $border-radius;
+      border-bottom-left-radius: $border-radius;
+      border-left: $border-width-base solid var(--pa-border-color);
+    }
+
+    &:last-child {
+      border-top-right-radius: $border-radius;
+      border-bottom-right-radius: $border-radius;
+    }
+  }
+
+  // Input group sizes - match prepend/append to input sizes
+  &--xs {
+    .pa-input-group__prepend,
+    .pa-input-group__append {
+      padding: $input-padding-xs-v $input-padding-h;
+      font-size: $font-size-xs;
+    }
+  }
+
+  &--sm {
+    .pa-input-group__prepend,
+    .pa-input-group__append {
+      padding: $input-padding-v $input-padding-h;
+      font-size: $font-size-sm;
+    }
+  }
+
+  &--lg {
+    .pa-input-group__prepend,
+    .pa-input-group__append {
+      padding: $input-padding-v $input-padding-h;
+      font-size: $font-size-base;
+    }
+  }
+
+  &--xl {
+    .pa-input-group__prepend,
+    .pa-input-group__append {
+      padding: $input-padding-v $input-padding-h;
+      font-size: $font-size-lg;
+    }
+  }
+}

package/src/scss/core-components/forms/_input-wrapper.scss

@@ -0,0 +1,89 @@
+/* ========================================
+   Input Wrapper
+   Input with clear button, search tokens container
+   ======================================== */
+@use '../../variables' as *;
+
+// Input with clear button wrapper
+.pa-input-wrapper {
+  position: relative;
+  display: flex;
+  flex-wrap: wrap;
+  align-items: center;
+  gap: $spacing-xs;
+  width: 100%;
+
+  .pa-input,
+  .pa-select,
+  .pa-virtual-textbox {
+    flex: 1;
+    min-width: 0; // Allow inputs to shrink below their content size
+    padding-right: 4rem; // Make room for clear button
+  }
+
+  &__clear {
+    position: absolute;
+    right: $spacing-xs;
+    top: 50%;
+    transform: translateY(-50%);
+    background: transparent;
+    border: none;
+    color: var(--pa-text-secondary);
+    cursor: pointer;
+    padding: $spacing-xs;
+    font-size: $font-size-base;
+    line-height: 1;
+    opacity: 0.6;
+    transition: opacity $transition-fast $easing-snappy;
+
+    &:hover {
+      opacity: 1;
+      color: $danger-bg;
+    }
+
+    &:focus {
+      outline: none;
+      opacity: 1;
+    }
+
+    // Hide when input is empty
+    &--hidden {
+      display: none;
+    }
+  }
+}
+
+// Search Tokens Container (for query builder badges)
+.pa-search-tokens {
+  display: flex;
+  flex-wrap: wrap;
+  gap: $spacing-xs;
+  align-items: center;
+}
+
+.pa-search-token-group {
+  display: inline-flex;
+  align-items: center;
+  gap: 2px;
+
+  .pa-badge {
+    margin: 0;
+  }
+}
+
+.pa-search-token-remove {
+  margin-left: $spacing-xs;
+  padding: 0 $spacing-xs;
+  border: none;
+  background: transparent;
+  color: currentColor;
+  cursor: pointer;
+  font-size: 1.2em;
+  line-height: 1;
+  opacity: 0.7;
+  transition: opacity $transition-fast $easing-smooth;
+
+  &:hover {
+    opacity: 1;
+  }
+}