@resolve-components/theme 1.0.0 → 1.2.1

package/file-upload/rc-file-upload.scss

@@ -0,0 +1,143 @@
+@use '../styles/theming' as *;
+
+@include rc-install-component() {
+  .rc-file-upload {
+    display: flex;
+    flex-direction: column;
+    gap: 0.75rem;
+    width: 100%;
+  }
+
+  // ── Hidden native input ───────────────────────────────────────────────────
+  .rc-file-upload-input {
+    position: absolute;
+    width: 1px;
+    height: 1px;
+    opacity: 0;
+    pointer-events: none;
+  }
+
+  // ── Drop zone ─────────────────────────────────────────────────────────────
+  .rc-file-upload-zone {
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    justify-content: center;
+    gap: 0.5rem;
+    padding: 2rem 1.5rem;
+    border: 1.5px dashed rc-theme('file-upload-border-color');
+    border-radius: rc-theme('file-upload-border-radius');
+    background: rc-theme('file-upload-background');
+    cursor: pointer;
+    text-align: center;
+    @include rc-component-animation(border-color background, $speed: 'medium');
+    outline: none;
+
+    &:hover,
+    &:focus-visible {
+      background: rc-theme('file-upload-hover-background');
+      border-color: rc-theme('file-upload-hover-border-color');
+    }
+  }
+
+  .rc-file-upload-zone-active {
+    background: rc-theme('file-upload-active-background') !important;
+    border-color: rc-theme('file-upload-active-border-color') !important;
+    border-style: solid;
+  }
+
+  .rc-file-upload-zone-disabled {
+    opacity: 0.55;
+    cursor: not-allowed;
+    pointer-events: none;
+  }
+
+  .rc-file-upload-zone-error {
+    border-color: rc-theme('file-upload-error-border-color');
+  }
+
+  .rc-file-upload-icon {
+    font-size: 2.25rem;
+    color: rc-theme('file-upload-icon-color');
+  }
+
+  .rc-file-upload-title {
+    font-size: rc-theme('file-upload-title-font-size');
+    color: rc-theme('file-upload-text-color');
+    font-weight: 500;
+  }
+
+  .rc-file-upload-browse {
+    color: rc-theme('file-upload-browse-color');
+    text-decoration: underline;
+    cursor: pointer;
+  }
+
+  .rc-file-upload-hint {
+    font-size: rc-theme('file-upload-hint-font-size');
+    color: rc-theme('file-upload-hint-color');
+    line-height: 1.5;
+  }
+
+  // ── File list ─────────────────────────────────────────────────────────────
+  .rc-file-upload-list {
+    list-style: none;
+    margin: 0;
+    padding: 0;
+    display: flex;
+    flex-direction: column;
+    gap: 0.375rem;
+  }
+
+  .rc-file-upload-item {
+    display: flex;
+    align-items: center;
+    gap: 0.625rem;
+    padding: 0.5rem 0.75rem;
+    background: rc-theme('file-upload-item-background');
+    border-radius: rc-theme('file-upload-item-border-radius');
+    border: 1px solid transparent;
+    @include rc-component-animation(border-color, $speed: 'medium');
+  }
+
+  .rc-file-upload-item-error {
+    border-color: rc-theme('file-upload-error-border-color');
+    background: rc-theme('file-upload-item-error-background');
+  }
+
+  .rc-file-upload-item-icon {
+    font-size: 1.125rem;
+    color: rc-theme('file-upload-icon-color');
+    flex-shrink: 0;
+
+    .rc-file-upload-item-error & {
+      color: rc-theme('file-upload-error-border-color');
+    }
+  }
+
+  .rc-file-upload-item-info {
+    display: flex;
+    flex-direction: column;
+    gap: 0.125rem;
+    flex: 1;
+    min-width: 0;
+  }
+
+  .rc-file-upload-item-name {
+    font-size: rc-theme('file-upload-item-font-size');
+    color: rc-theme('file-upload-text-color');
+    white-space: nowrap;
+    overflow: hidden;
+    text-overflow: ellipsis;
+  }
+
+  .rc-file-upload-item-size {
+    font-size: rc-theme('file-upload-hint-font-size');
+    color: rc-theme('file-upload-hint-color');
+  }
+
+  .rc-file-upload-item-error-msg {
+    font-size: rc-theme('file-upload-hint-font-size');
+    color: rc-theme('file-upload-error-border-color');
+  }
+}

package/icon/rc-icon.scss

@@ -0,0 +1,47 @@
+// =============================================================================
+// rc-icon — Resolve Components Icon (Eva Icons, Themed)
+// =============================================================================
+
+@use '../styles/theming/get-value' as *;
+@use '../styles/theming/install' as *;
+
+@include rc-install-component() {
+  rc-icon {
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    width: 20px;
+    height: 20px;
+    flex-shrink: 0;
+    vertical-align: middle;
+    line-height: 1;
+
+    svg {
+      display: block;
+      width: 100%;
+      height: 100%;
+    }
+
+    // -- Status colors --
+
+    &.rc-icon-primary {
+      color: rc-theme('color-primary-default');
+    }
+
+    &.rc-icon-success {
+      color: rc-theme('color-success-default');
+    }
+
+    &.rc-icon-warning {
+      color: rc-theme('color-warning-default');
+    }
+
+    &.rc-icon-danger {
+      color: rc-theme('color-danger-default');
+    }
+
+    &.rc-icon-info {
+      color: rc-theme('color-info-default');
+    }
+  }
+}

package/infinite-scroll/rc-infinite-scroll.scss

@@ -0,0 +1,54 @@
+@use '../styles/theming' as *;
+
+@include rc-install-component() {
+  // ── Host ─────────────────────────────────────────────────────────────────
+  .rc-infinite-scroll {
+    display: block;
+    width: 100%;
+  }
+
+  // When the host is the scroll container
+  .rc-infinite-scroll-scrollable {
+    overflow-y: auto;
+    // height is set via inline style on the host element; inherit it here
+    // so the scrollable class doesn't override it with 100% (which resolves
+    // to the parent's height, not the inline style on this element).
+    height: inherit;
+  }
+
+  // ── Sentinel ─────────────────────────────────────────────────────────────
+  // Invisible element at the bottom that the IntersectionObserver watches.
+  .rc-infinite-scroll-sentinel {
+    display: block;
+    height: 1px;
+    pointer-events: none;
+  }
+
+  // ── Loader ───────────────────────────────────────────────────────────────
+  .rc-infinite-scroll-loader {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    padding: rc-theme('infinite-scroll-loader-padding');
+  }
+
+  // ── End of list ──────────────────────────────────────────────────────────
+  .rc-infinite-scroll-end {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    padding: rc-theme('infinite-scroll-end-padding');
+  }
+
+  .rc-infinite-scroll-end-text {
+    font-family: rc-theme('infinite-scroll-end-font-family');
+    font-size: rc-theme('infinite-scroll-end-font-size');
+    color: rc-theme('infinite-scroll-end-color');
+  }
+
+  // Optional divider above loader / end message
+  .rc-infinite-scroll-loader,
+  .rc-infinite-scroll-end {
+    border-top: 1px solid rc-theme('infinite-scroll-separator-color');
+  }
+}

package/input/rc-input.scss

@@ -0,0 +1,156 @@
+// =============================================================================
+// rc-input  Resolve Components Input Directive (Themed)
+// =============================================================================
+
+@use '../styles/theming/get-value' as *;
+@use '../styles/theming/install' as *;
+@use '../styles/theming/animation' as *;
+
+@include rc-install-component() {
+  // ── Base ──────────────────────────────────────────────────────────────────
+  input.rc-input,
+  textarea.rc-input {
+    display: block;
+    width: 100%;
+    box-sizing: border-box;
+    font-family: rc-theme('input-font-family');
+    font-weight: rc-theme('input-font-weight');
+    font-size: rc-theme('input-md-font-size');
+    color: rc-theme('input-text-color');
+    background: rc-theme('input-background-color');
+    border: 1.5px solid rc-theme('input-border-color');
+    border-radius: rc-theme('input-border-radius');
+    padding: rc-theme('input-md-padding');
+    height: rc-theme('input-md-height');
+    outline: none;
+    @include rc-component-animation(border-color box-shadow background);
+    appearance: none;
+
+    &::placeholder {
+      color: rc-theme('input-placeholder-color');
+    }
+
+    &:hover:not(:disabled) {
+      border-color: rc-theme('input-hover-border-color');
+    }
+
+    &.rc-input-focused:not(:disabled),
+    &:focus:not(:disabled) {
+      border-color: rc-theme('input-focus-border-color');
+      box-shadow: rc-theme('input-focus-shadow');
+    }
+
+    &:disabled {
+      background: rc-theme('input-disabled-background-color');
+      border-color: rc-theme('input-disabled-border-color');
+      color: rc-theme('input-disabled-text-color');
+      cursor: not-allowed;
+      opacity: 0.7;
+    }
+
+    // ── Sizes ──────────────────────────────────────────────────────────────
+    &.rc-input-sm {
+      font-size: rc-theme('input-sm-font-size');
+      padding: rc-theme('input-sm-padding');
+      height: rc-theme('input-sm-height');
+    }
+
+    &.rc-input-md {
+      font-size: rc-theme('input-md-font-size');
+      padding: rc-theme('input-md-padding');
+      height: rc-theme('input-md-height');
+    }
+
+    &.rc-input-lg {
+      font-size: rc-theme('input-lg-font-size');
+      padding: rc-theme('input-lg-padding');
+      height: rc-theme('input-lg-height');
+    }
+
+    // ── Status variants ────────────────────────────────────────────────────
+    &.rc-input-success {
+      border-color: rc-theme('input-success-border-color');
+
+      &.rc-input-focused,
+      &:focus {
+        box-shadow: rc-theme('input-success-focus-shadow');
+      }
+    }
+
+    &.rc-input-danger {
+      border-color: rc-theme('input-danger-border-color');
+
+      &.rc-input-focused,
+      &:focus {
+        box-shadow: rc-theme('input-danger-focus-shadow');
+      }
+    }
+
+    &.rc-input-warning {
+      border-color: rc-theme('input-warning-border-color');
+
+      &.rc-input-focused,
+      &:focus {
+        box-shadow: rc-theme('input-warning-focus-shadow');
+      }
+    }
+  }
+
+  // ── Textarea overrides ────────────────────────────────────────────────────
+  textarea.rc-input,
+  input.rc-input.rc-input-textarea {
+    height: auto;
+    min-height: rc-theme('textarea-min-height');
+    resize: rc-theme('textarea-resize');
+    line-height: 1.6;
+  }
+
+  // ── Field wrapper helpers ─────────────────────────────────────────────────
+  // Consumer-side layout helpers — not applied automatically by the directive.
+  .rc-field {
+    display: flex;
+    flex-direction: column;
+    gap: 0;
+  }
+
+  .rc-field-label {
+    display: block;
+    font-size: rc-theme('input-label-font-size');
+    font-weight: rc-theme('input-label-font-weight');
+    color: rc-theme('input-label-color');
+    margin-bottom: rc-theme('input-label-gap');
+  }
+
+  .rc-field-required {
+    color: rc-theme('input-danger-border-color');
+    margin-left: 2px;
+  }
+
+  .rc-field-hint {
+    display: block;
+    font-size: rc-theme('input-hint-font-size');
+    color: rc-theme('input-hint-color');
+    margin-top: rc-theme('input-hint-gap');
+  }
+
+  .rc-field-error {
+    display: block;
+    font-size: rc-theme('input-hint-font-size');
+    color: rc-theme('input-danger-hint-color');
+    margin-top: rc-theme('input-hint-gap');
+  }
+
+  .rc-field-success-hint {
+    display: block;
+    font-size: rc-theme('input-hint-font-size');
+    color: rc-theme('input-success-hint-color');
+    margin-top: rc-theme('input-hint-gap');
+  }
+
+  .rc-field-warning-hint {
+    display: block;
+    font-size: rc-theme('input-hint-font-size');
+    color: rc-theme('input-warning-hint-color');
+    margin-top: rc-theme('input-hint-gap');
+  }
+}

package/menu/rc-menu.scss

@@ -0,0 +1,84 @@
+@use '../styles/theming' as *;
+
+@include rc-install-component() {
+  .rc-menu-panel {
+    background: rc-theme('menu-background');
+    border: 1px solid rc-theme('menu-border-color');
+    border-radius: rc-theme('menu-border-radius');
+    box-shadow: rc-theme('menu-shadow');
+    overflow: hidden;
+    padding: 0.25rem 0;
+    animation: rc-menu-in 120ms ease-out;
+
+    &:focus {
+      outline: none;
+    }
+  }
+
+  @keyframes rc-menu-in {
+    from {
+      opacity: 0;
+      transform: scale(0.97) translateY(-4px);
+    }
+    to {
+      opacity: 1;
+      transform: scale(1) translateY(0);
+    }
+  }
+
+  // ── Item ──────────────────────────────────────────────────────────────────
+  .rc-menu-item {
+    display: block;
+  }
+
+  .rc-menu-item-btn {
+    all: unset;
+    display: flex;
+    align-items: center;
+    width: 100%;
+    gap: 0.5rem;
+    padding: rc-theme('menu-item-padding');
+    font-family: rc-theme('menu-item-font-family');
+    font-size: rc-theme('menu-item-font-size');
+    color: rc-theme('menu-item-text-color');
+    cursor: pointer;
+    box-sizing: border-box;
+    @include rc-component-animation(background);
+
+    &:hover,
+    &:focus-visible {
+      background: rc-theme('menu-item-hover-background');
+    }
+
+    &:disabled {
+      opacity: rc-theme('menu-item-disabled-opacity');
+      cursor: not-allowed;
+    }
+  }
+
+  .rc-menu-item-danger .rc-menu-item-btn {
+    color: rc-theme('menu-item-danger-color');
+  }
+
+  .rc-menu-item-icon {
+    font-size: 1rem;
+    flex-shrink: 0;
+    color: rc-theme('menu-icon-color');
+
+    .rc-menu-item-danger & {
+      color: rc-theme('menu-item-danger-color');
+    }
+  }
+
+  .rc-menu-item-label {
+    flex: 1;
+  }
+
+  // ── Separator ─────────────────────────────────────────────────────────────
+  .rc-menu-separator {
+    display: block;
+    height: 1px;
+    background: rc-theme('menu-separator-color');
+    margin: 0.25rem 0;
+  }
+}

package/navbar/rc-navbar.scss

@@ -0,0 +1,112 @@
+// =============================================================================
+// rc-navbar  Resolve Components Navbar (Themed)
+// =============================================================================
+
+@use '../styles/theming/get-value' as *;
+@use '../styles/theming/install' as *;
+
+@include rc-install-component() {
+  // ── Base bar ───────────────────────────────────────────────────────────────
+  .rc-navbar {
+    display: flex;
+    flex-direction: row;
+    align-items: center;
+    width: 100%;
+    min-height: rc-theme('navbar-height');
+    padding: rc-theme('navbar-padding');
+    box-sizing: border-box;
+    gap: rc-theme('navbar-gap');
+    font-family: rc-theme('navbar-font-family');
+    font-size: rc-theme('navbar-font-size');
+    font-weight: rc-theme('navbar-font-weight');
+    flex-shrink: 0;
+    z-index: rc-theme('navbar-z-index');
+
+    // Multi-row — stack rows instead of inline items
+    &:has(rc-navbar-row) {
+      flex-direction: column;
+      align-items: stretch;
+      gap: 0;
+      padding: 0;
+    }
+  }
+
+  // ── Default color ─────────────────────────────────────────────────────────
+  .rc-navbar.rc-navbar-color-default {
+    background: rc-theme('navbar-default-background');
+    color: rc-theme('navbar-default-text-color');
+    border-bottom: 1px solid rc-theme('navbar-default-border-color');
+
+    // Ghost buttons inside get a tinted hover in default mode
+    .rc-btn-ghost {
+      color: rc-theme('navbar-default-text-color');
+    }
+  }
+
+  // ── Primary color ─────────────────────────────────────────────────────────
+  .rc-navbar.rc-navbar-color-primary {
+    background: rc-theme('navbar-primary-background');
+    color: rc-theme('navbar-primary-text-color');
+    border-bottom: none;
+    box-shadow: rc-theme('navbar-primary-shadow');
+
+    .rc-btn-ghost {
+      color: rc-theme('navbar-primary-text-color');
+
+      &:hover {
+        background: rc-theme('navbar-primary-btn-hover-background');
+      }
+    }
+  }
+
+  // ── Position strategies ────────────────────────────────────────────────────
+  .rc-navbar.rc-navbar-position-sticky {
+    position: sticky;
+    top: 0;
+  }
+
+  .rc-navbar.rc-navbar-position-fixed {
+    position: fixed;
+    top: 0;
+    left: 0;
+    right: 0;
+  }
+
+  // ── Inner row (multi-row toolbar) ──────────────────────────────────────────
+  .rc-navbar-row {
+    display: flex;
+    flex-direction: row;
+    align-items: center;
+    min-height: rc-theme('navbar-height');
+    padding: rc-theme('navbar-padding');
+    box-sizing: border-box;
+    gap: rc-theme('navbar-gap');
+    width: 100%;
+  }
+
+  // ── Brand ──────────────────────────────────────────────────────────────────
+  .rc-navbar-brand {
+    display: inline-flex;
+    align-items: center;
+    gap: 0.5rem;
+    font-size: rc-theme('navbar-brand-font-size');
+    font-weight: rc-theme('navbar-brand-font-weight');
+    text-decoration: none;
+    color: inherit;
+    white-space: nowrap;
+    flex-shrink: 0;
+  }
+
+  // ── Spacer ─────────────────────────────────────────────────────────────────
+  .rc-navbar-spacer {
+    flex: 1 1 auto;
+  }
+
+  // ── Actions ────────────────────────────────────────────────────────────────
+  .rc-navbar-actions {
+    display: inline-flex;
+    align-items: center;
+    gap: 0.25rem;
+    flex-shrink: 0;
+  }
+}

package/package.json

@@ -1,17 +1,24 @@
 {
   "name": "@resolve-components/theme",
-  "version": "1.0.0",
+  "version": "1.2.1",
   "schematics": "./collection.json",
-  "description": "🔥 Fully customizable Angular UI components made with ❤️ using Angular CDK 🔥",
+  "description": "🔥 Fully customizable Angular UI components made with ❤️ using Angular CDK 🔥",
   "peerDependencies": {
-    "@angular/common": "^21.1.0",
-    "@angular/core": "^21.1.0",
-    "@angular/forms": "~21.1.0",
-    "@angular/cdk": "^21.1.5",
-    "rxjs": "~7.8.0",
-    "@angular/platform-browser": "~21.1.0",
-    "eva-icons": "^1.1.3"
+    "@angular/common": ">=17.0.0",
+    "@angular/core": ">=17.0.0",
+    "@angular/forms": ">=17.0.0",
+    "@angular/cdk": ">=17.0.0",
+    "rxjs": ">=7.4.0",
+    "@angular/platform-browser": ">=17.0.0",
+    "eva-icons": "^1.1.3",
+    "@angular-devkit/schematics": ">=17.0.0"
   },
+  "peerDependenciesMeta": {
+    "eva-icons": {
+      "optional": true
+    }
+  },
+  "website": "https://resolve-components.web.app",
   "keywords": [
     "@resolve-components/theme",
     "@resolve-components",