@rolster/styles-foundations 2.7.3 → 3.0.0

package/scss/design-system-filled/organisms/field-date.scss

@@ -0,0 +1,61 @@
+// Rolster Technology FieldDate Component
+// v1.1.8
+// @license MIT
+// Author: Rolster Developers
+// Created: 23/Abr/2026
+// Updated: 23/Abr/2026
+
+.rls-field-date {
+  --rlc-field-box-body-padding: var(--rls-sizing-x3) var(--rls-sizing-x4);
+
+  --pvt-font-size: var(--rlc-field-date-font-size, var(--rls-input-font-size));
+
+  --pvt-letter-spacing: var(
+    --rlc-field-date-letter-spacing,
+    var(--rls-input-letter-spacing)
+  );
+
+  position: relative;
+  width: 100%;
+  box-sizing: border-box;
+
+  .rls-field-box--readonly {
+    --pvt-control-width: 100%;
+  }
+
+  .rls-field-box__body {
+    column-gap: var(--rls-sizing-x2);
+  }
+
+  &__control {
+    position: relative;
+    width: 100%;
+    height: var(--rls-sizing-x12);
+    line-height: var(--rls-sizing-x12);
+    padding: 0rem;
+    cursor: default;
+    border: none;
+    outline: none;
+    background: transparent;
+    color: var(--rls-app-color-900);
+    font-weight: var(--rls-font-weight-medium);
+    font-size: var(--pvt-font-size);
+    letter-spacing: var(--pvt-letter-spacing);
+
+    &::placeholder {
+      color: var(--rls-app-color-400);
+    }
+
+    &:disabled {
+      opacity: 0.5;
+      cursor: not-allowed;
+    }
+  }
+}
+
+.rls-field-date-modal {
+  --rlc-modal-background: transparent;
+  --rlc-modal-max-width: 150rem;
+  --rlc-picker-date-radius: var(--rls-sizing-x6);
+  --rlc-picker-date-background: var(--rls-app-color-050);
+}

package/scss/design-system-filled/organisms/field-select.scss

@@ -0,0 +1,18 @@
+// Rolster Technology FieldSelect Component
+// v1.0.6
+// @license MIT
+// Author: Rolster Developers
+// Created: 23/Abr/2026
+// Updated: 23/Abr/2026
+
+.rls-field-select {
+  --rlc-field-list-control-cursor: pointer;
+
+  .rls-field-list__action {
+    transition: transform 160ms 0ms var(--rls-sharp-curve);
+
+    &--visible {
+      transform: rotate(180deg);
+    }
+  }
+}

package/scss/design-system-filled/organisms/form-navigation.scss

@@ -0,0 +1,46 @@
+// Rolster Technology FormNavigation Component
+// v1.1.3
+// @license MIT
+// Author: Rolster Developers
+// Created: 23/Abr/2026
+// Updated: 23/Abr/2026
+
+.rls-form-navigation {
+  --rlc-field-box-body-background: var(
+    --rlc-form-navigation-field-box-background,
+    var(--rls-app-color-050)
+  );
+
+  --pvt-component-transition: 160ms;
+
+  position: fixed;
+  display: flex;
+  top: 0rem;
+  right: 0rem;
+  width: calc(100% - var(--rls-sizing-x16));
+  max-width: var(--rlc-form-navigation-max-width, 160rem);
+  height: 100%;
+  justify-content: flex-end;
+  visibility: hidden;
+  transform: translateX(100%);
+  transition: opacity var(--pvt-component-transition) 0ms
+      var(--rls-deceleration-curve),
+    transform var(--pvt-component-transition) 0ms var(--rls-deceleration-curve),
+    visibility var(--pvt-component-transition) 0ms var(--rls-deceleration-curve);
+  z-index: var(--rls-z-index-16);
+
+  &--visible {
+    visibility: visible;
+    transform: translateX(0%);
+  }
+
+  &__component {
+    position: absolute;
+    display: flex;
+    width: 100%;
+    height: 100%;
+    flex-direction: column;
+    background: var(--rlc-form-navigation-background, var(--rls-app-color-100));
+    border-left: var(--rlc-form-navigation-border, var(--rls-app-border-1-200));
+  }
+}

package/scss/design-system-filled/organisms/form.scss

@@ -0,0 +1,27 @@
+// Rolster Technology Form Component
+// v2.1.0
+// @license MIT
+// Author: Rolster Developers
+// Created: 23/Abr/2026
+// Updated: 23/Abr/2026
+
+.rls-form {
+  display: flex;
+  flex-direction: column;
+  row-gap: var(--rls-sizing-x8);
+
+  &__content {
+    position: relative;
+    padding: 0rem var(--rls-sizing-x8);
+    box-sizing: border-box;
+  }
+
+  &__footer {
+    position: relative;
+    display: flex;
+    justify-content: var(--rlc-form-footer-justify-content, end);
+    column-gap: var(--rls-sizing-x8);
+    padding: 0rem var(--rls-sizing-x8);
+    box-sizing: border-box;
+  }
+}

package/scss/design-system-filled/organisms/image-chooser.scss

@@ -0,0 +1,50 @@
+// Rolster Technology ImageChooser Component
+// v2.0.3
+// @license MIT
+// Author: Rolster Developers
+// Created: 23/Abr/2026
+// Updated: 23/Abr/2026
+
+.rls-image-chooser {
+  position: relative;
+  width: var(--rlc-image-chooser-width, 48rem);
+  height: var(--rlc-image-chooser-height, 48rem);
+  border-radius: var(--rlc-image-chooser-radius, 50%);
+  overflow: hidden;
+
+  &__avatar {
+    display: flex;
+    width: 100%;
+    height: 100%;
+    justify-content: center;
+    align-items: center;
+    background: var(--rls-theme-color-600);
+
+    img {
+      width: 100%;
+    }
+  }
+
+  & > input[type='file'] {
+    position: absolute;
+    z-index: -1;
+    visibility: hidden;
+  }
+
+  &__modal {
+    --rlc-image-editor-footer-padding: 0rem var(--rls-sizing-x12)
+      var(--rls-sizing-x12) var(--rls-sizing-x12);
+
+    --rlc-modal-max-width: calc(250rem - var(--rls-sizing-x16));
+    width: 100%;
+  }
+}
+
+@media only screen and (max-width: 480px) {
+  .rls-image-chooser__modal {
+    --rlc-image-editor-footer-padding: 0rem var(--rls-sizing-x8)
+      var(--rls-sizing-x8) var(--rls-sizing-x8);
+
+    --rlc-modal-max-width: 160rem;
+  }
+}

package/scss/design-system-filled/organisms/image-editor-modal.scss

@@ -0,0 +1,23 @@
+// Rolster Technology ImageEditorModal Component
+// v1.0.0
+// @license MIT
+// Author: Rolster Developers
+// Created: 23/Abr/2026
+// Updated: 23/Abr/2026
+
+.rls-image-editor-modal {
+  --rlc-image-editor-footer-padding: 0rem var(--rls-sizing-x12)
+    var(--rls-sizing-x12) var(--rls-sizing-x12);
+
+  --rlc-modal-max-width: calc(250rem - var(--rls-sizing-x16));
+  width: 100%;
+}
+
+@media only screen and (max-width: 480px) {
+  .rls-image-editor-modal {
+    --rlc-image-editor-footer-padding: 0rem var(--rls-sizing-x8)
+      var(--rls-sizing-x8) var(--rls-sizing-x8);
+
+    --rlc-modal-max-width: 160rem;
+  }
+}

package/scss/design-system-filled/organisms/image-editor.scss

@@ -0,0 +1,118 @@
+// Rolster Technology ImageEditor Component
+// v1.0.1
+// @license MIT
+// Author: Rolster Developers
+// Created: 23/Abr/2026
+// Updated: 23/Abr/2026
+
+.rls-image-editor {
+  --pvt-overlay-background: var(--rls-theme-backdrop-900);
+  --pvt-sliders-padding: 0rem var(--rls-sizing-x8);
+  --pvt-actions-direction: row;
+  --pvt-actions-row-gap: 0rem;
+  --pvt-actions-column-gap: var(--rls-sizing-x8);
+
+  position: relative;
+  display: flex;
+  height: 100%;
+  flex-direction: column;
+  row-gap: var(--rls-sizing-x12);
+
+  &__body {
+    position: relative;
+    display: flex;
+    height: 100%;
+    justify-content: center;
+    background: var(--rls-app-color-900);
+
+    &__image {
+      overflow: hidden;
+    }
+
+    &__selection {
+      position: absolute;
+      cursor: move;
+      box-sizing: border-box;
+      z-index: var(--rls-z-index-4);
+      border: var(
+        --rlc-image-editor-selection-border,
+        2px dashed var(--rls-app-color-050)
+      );
+      user-select: none;
+    }
+
+    &__overlay--top {
+      position: absolute;
+      top: 0rem;
+      z-index: var(--rls-z-index-2);
+      background: var(--pvt-overlay-background);
+    }
+
+    &__overlay--right {
+      position: absolute;
+      right: 0rem;
+      height: 100%;
+      z-index: var(--rls-z-index-2);
+      background: var(--pvt-overlay-background);
+    }
+
+    &__overlay--bottom {
+      position: absolute;
+      bottom: 0rem;
+      z-index: var(--rls-z-index-2);
+      background: var(--pvt-overlay-background);
+    }
+
+    &__overlay--left {
+      position: absolute;
+      right: 0rem;
+      height: 100%;
+      z-index: var(--rls-z-index-2);
+      background: var(--pvt-overlay-background);
+    }
+  }
+
+  &__footer {
+    display: flex;
+    flex-direction: column;
+    row-gap: var(--rls-sizing-x12);
+    padding: var(--rlc-image-editor-footer-padding, 0rem);
+    box-sizing: border-box;
+  }
+
+  &__sliders {
+    display: flex;
+    flex-direction: column;
+    row-gap: var(--rls-sizing-x6);
+    padding: var(--pvt-sliders-padding);
+    box-sizing: border-box;
+  }
+
+  &__actions {
+    display: flex;
+    flex-direction: var(--pvt-actions-direction);
+    justify-content: center;
+    row-gap: var(--pvt-actions-row-gap);
+    column-gap: var(--pvt-actions-column-gap);
+  }
+
+  & > canvas {
+    position: absolute;
+    top: 0rem;
+    left: 0rem;
+    z-index: -1;
+    visibility: hidden;
+    pointer-events: none;
+  }
+}
+
+@media only screen and (max-width: 420px) {
+  .rls-image-editor {
+    --pvt-sliders-padding: 0rem;
+    --pvt-actions-direction: column;
+    --pvt-actions-row-gap: var(--rls-sizing-x6);
+    --pvt-actions-column-gap: 0rem;
+
+    row-gap: var(--rls-sizing-x8);
+  }
+}

package/scss/design-system-filled/organisms/modal-sheet.scss

@@ -0,0 +1,138 @@
+// Rolster Technology ModalSheet Component
+// v1.0.2
+// @license MIT
+// Author: Rolster Developers
+// Created: 23/Abr/2026
+// Updated: 23/Abr/2026
+
+.rls-modal-sheet {
+  --pvt-component-transform: translateY(150px) scale(0.6);
+  --pvt-component-bottom: initial;
+  --pvt-component-max-width: var(
+    --rlc-modal-sheet-max-width,
+    calc(100% - var(--rls-sizing-x8))
+  );
+  --pvt-component-height: 0rem;
+  --pvt-component-max-height: calc(100% - var(--rls-sizing-x12));
+  --pvt-component-border-radius: var(
+    --rlc-modal-sheet-border-radius,
+    var(--rls-sizing-x4)
+  );
+  --pvt-component-opacity: 0;
+  --pvt-component-visibility: hidden;
+  --pvt-component-transition: 160ms;
+
+  --pvt-backdrop-opacity: 0;
+  --pvt-backdrop-bottom: initial;
+
+  position: fixed;
+  display: flex;
+  top: 0rem;
+  left: 0rem;
+  width: 100%;
+  height: 100%;
+  z-index: var(--rls-z-index-24);
+  visibility: hidden;
+  align-items: center;
+  justify-content: center;
+
+  &--visible {
+    --pvt-component-visibility: visible;
+    --pvt-component-height: auto;
+    --pvt-component-opacity: 1;
+    --pvt-component-transform: translateY(0) scale(1);
+    --pvt-backdrop-bottom: 0rem;
+    --pvt-backdrop-opacity: 1;
+
+    visibility: visible;
+  }
+
+  &__component {
+    position: absolute;
+    display: flex;
+    bottom: var(--pvt-component-bottom);
+    max-width: var(--pvt-component-max-width);
+    height: var(--pvt-component-height);
+    max-height: var(--pvt-component-max-height);
+    flex-direction: column;
+    opacity: var(--pvt-component-opacity);
+    visibility: var(--pvt-component-visibility);
+    z-index: var(--rls-z-index-2);
+    border-radius: var(--pvt-component-border-radius);
+    background: var(--rlc-modal-sheet-background, var(--rls-app-color-050));
+    transform: var(--pvt-component-transform);
+    transition:
+      opacity var(--pvt-component-transition) 0ms var(--rls-deceleration-curve),
+      transform var(--pvt-component-transition) 0ms
+        var(--rls-deceleration-curve),
+      visibility var(--pvt-component-transition) 0ms
+        var(--rls-deceleration-curve);
+  }
+
+  &__backdrop {
+    position: absolute;
+    display: block;
+    top: 0rem;
+    left: 0rem;
+    right: 0rem;
+    bottom: var(--pvt-backdrop-bottom);
+    opacity: var(--pvt-backdrop-opacity);
+    z-index: var(--rls-z-index-1);
+    background: var(
+      --rlc-modal-sheet-backdrop-color,
+      var(--rls-theme-backdrop-400)
+    );
+    backdrop-filter: var(--rlc-modal-sheet-backdrop-filter, blur(2px));
+    transition:
+      opacity 120ms 0ms var(--rls-deceleration-curve),
+      bottom 120ms 0ms var(--rls-deceleration-curve);
+  }
+}
+
+@media screen and (max-width: 640px) {
+  .rls-modal-sheet {
+    --pvt-component-transform: translateY(100%);
+    --pvt-component-bottom: 0px;
+    --pvt-component-max-width: 240rem;
+    --pvt-component-max-height: 75%;
+    --pvt-component-border-radius: var(--rls-sizing-x4) var(--rls-sizing-x4)
+      0rem 0rem;
+    --pvt-component-transition: 320ms;
+
+    align-items: initial;
+
+    &--visible {
+      --pvt-component-transform: translateY(0);
+    }
+
+    &__component {
+      &::before {
+        display: block;
+        content: '';
+        width: var(--rls-sizing-x24);
+        height: var(--rls-sizing-x2);
+        border-radius: var(--rls-sizing-x2);
+        background: var(--rls-app-color-300);
+        margin: var(--rls-sizing-x3) auto;
+      }
+    }
+  }
+}
+
+@media screen and (max-width: 640px) and (max-height: 960px) {
+  .rls-modal-sheet {
+    --pvt-component-max-height: calc(100% - 32rem);
+  }
+}
+
+@media screen and (max-width: 640px) and (max-height: 720px) {
+  .rls-modal-sheet {
+    --pvt-component-max-height: calc(100% - 24rem);
+  }
+}
+
+@media screen and (max-width: 640px) and (max-height: 560px) {
+  .rls-modal-sheet {
+    --pvt-component-max-height: calc(100% - 16rem);
+  }
+}

package/scss/design-system-filled/organisms/modal.scss

@@ -0,0 +1,75 @@
+// Rolster Technology Modal Component
+// v1.2.5
+// @license MIT
+// Author: Rolster Developers
+// Created: 23/Abr/2026
+// Updated: 23/Abr/2026
+
+.rls-modal {
+  --pvt-component-transform: translateY(150px) scale(0.6);
+  --pvt-component-height: 0rem;
+  --pvt-component-opacity: 0;
+  --pvt-component-visibility: hidden;
+  --pvt-component-transition: 160ms;
+  --pvt-backdrop-opacity: 0;
+  --pvt-backdrop-bottom: initial;
+
+  position: fixed;
+  display: flex;
+  top: 0rem;
+  left: 0rem;
+  width: 100%;
+  height: 100%;
+  z-index: var(--rls-z-index-24);
+  visibility: hidden;
+  align-items: center;
+  justify-content: center;
+
+  &--visible {
+    --pvt-component-visibility: visible;
+    --pvt-component-height: auto;
+    --pvt-component-opacity: 1;
+    --pvt-component-transform: translateY(0) scale(1);
+    --pvt-backdrop-bottom: 0rem;
+    --pvt-backdrop-opacity: 1;
+
+    visibility: visible;
+  }
+
+  &__component {
+    position: absolute;
+    display: flex;
+    max-width: var(--rlc-modal-max-width, calc(100% - var(--rls-sizing-x8)));
+    height: var(--pvt-component-height);
+    max-height: calc(100% - var(--rls-sizing-x12));
+    flex-direction: column;
+    opacity: var(--pvt-component-opacity);
+    visibility: var(--pvt-component-visibility);
+    z-index: var(--rls-z-index-2);
+    border-radius: var(--rls-sizing-x4);
+    background: var(--rlc-modal-background, var(--rls-app-color-050));
+    transform: var(--pvt-component-transform);
+    transition:
+      opacity var(--pvt-component-transition) 0ms var(--rls-deceleration-curve),
+      transform var(--pvt-component-transition) 0ms
+        var(--rls-deceleration-curve),
+      visibility var(--pvt-component-transition) 0ms
+        var(--rls-deceleration-curve);
+  }
+
+  &__backdrop {
+    position: absolute;
+    display: block;
+    top: 0rem;
+    left: 0rem;
+    right: 0rem;
+    bottom: var(--pvt-backdrop-bottom);
+    opacity: var(--pvt-backdrop-opacity);
+    z-index: var(--rls-z-index-1);
+    background: var(--rlc-modal-backdrop-color, var(--rls-theme-backdrop-400));
+    backdrop-filter: var(--rlc-modal-backdrop-filter, blur(2px));
+    transition:
+      opacity 120ms 0ms var(--rls-deceleration-curve),
+      bottom 120ms 0ms var(--rls-deceleration-curve);
+  }
+}

package/scss/design-system-filled/organisms/picker-clock.scss

@@ -0,0 +1,144 @@
+// Rolster Technology PickerClock Component
+// v2.0.2
+// @license MIT
+// Author: Rolster Developers
+// Created: 23/Abr/2026
+// Updated: 04/May/2026
+
+.rls-picker-clock {
+  position: relative;
+  display: flex;
+  width: 150rem;
+  flex-direction: column;
+  row-gap: var(--rls-sizing-x8);
+  overflow: hidden;
+  user-select: none;
+  padding: var(--rlc-picker-clock-padding, 0rem);
+  box-sizing: border-box;
+  border-radius: var(--rlc-picker-clock-radius, 0rem);
+  background: var(--rlc-picker-clock-background, transparent);
+
+  &__header {
+    display: flex;
+    column-gap: var(--rls-sizing-x8);
+    padding: var(--rls-sizing-x4) var(--rls-sizing-x4) 0rem var(--rls-sizing-x4);
+    box-sizing: border-box;
+    justify-content: center;
+  }
+
+  &__title {
+    display: flex;
+    width: auto;
+    column-gap: var(--rls-sizing-x2);
+    align-items: center;
+
+    &__value {
+      text-align: center;
+      font-size: var(--rls-heading4-font-size);
+      font-weight: var(--rls-font-weight-semibold);
+      color: var(--rls-app-color-600);
+
+      &--active {
+        color: var(--rls-theme-color-500);
+      }
+
+      &:hover {
+        color: var(--rls-app-color-900);
+      }
+    }
+
+    &__separator {
+      font-size: var(--rls-title-font-size);
+      font-weight: var(--rls-font-weight-semibold);
+    }
+  }
+
+  &__zone {
+    display: flex;
+    width: auto;
+    column-gap: var(--rls-sizing-x4);
+    align-items: center;
+
+    &__value {
+      width: 18rem;
+      text-align: center;
+      padding: var(--rls-sizing-x1) var(--rls-sizing-x2);
+      border-radius: var(--rls-sizing-x2);
+      font-size: var(--rls-body-font-size);
+      font-weight: var(--rls-font-weight-semibold);
+      background: var(--rls-app-color-200);
+
+      &--active {
+        background: var(--rls-theme-gradient-500);
+        color: var(--rls-theme-color-050);
+      }
+    }
+  }
+
+  &__body {
+    display: flex;
+    justify-content: center;
+  }
+
+  &__plate {
+    width: 120rem;
+    height: 120rem;
+    border-radius: 50%;
+    border: var(--rls-app-border-2-200);
+    box-sizing: border-box;
+    overflow: hidden;
+  }
+
+  &__canvas {
+    position: absolute;
+
+    &__line {
+      stroke: var(--rls-theme-color-500);
+      stroke-width: var(--rls-sizing-x1);
+    }
+
+    &__center {
+      fill: var(--rls-theme-color-500);
+    }
+
+    &__indicator {
+      fill: var(--rls-theme-color-300);
+    }
+
+    &__point {
+      fill: var(--rls-theme-color-050);
+    }
+  }
+
+  &__tick {
+    position: absolute;
+    width: var(--rls-sizing-x14);
+    height: var(--rls-sizing-x14);
+    line-height: var(--rls-sizing-x14);
+    text-align: center;
+    cursor: pointer;
+    font-size: var(--rls-paragraph-font-size);
+    font-weight: var(--rls-font-weight-semibold);
+  }
+
+  &__footer {
+    --rlc-button-width: 100%;
+    --rlc-button-content-padding: 0rem var(--rls-sizing-x3);
+    --rls-button-font-size: 6.75rem;
+
+    display: flex;
+    column-gap: var(--rls-sizing-x6);
+    align-items: center;
+    padding: var(--rls-sizing-x4) var(--rls-sizing-x8) var(--rls-sizing-x6)
+      var(--rls-sizing-x8);
+    overflow: hidden;
+    box-sizing: border-box;
+
+    &--today {
+      display: flex;
+      width: var(--rls-sizing-x16);
+      align-items: center;
+      justify-content: center;
+    }
+  }
+}