@drumee/ui-toolkit 0.0.1

package/LICENSE

@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) 2025 Drumee
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

package/README.md

@@ -0,0 +1 @@
+# ui-toolkit

package/package.json

@@ -0,0 +1,62 @@
+{
+  "name": "@drumee/ui-toolkit",
+  "version": "0.0.1",
+  "description": "",
+  "main": ".",
+  "repository": {
+    "type": "git",
+    "url": "git@github.com:drumee/package.json.git"
+  },
+  "keywords": [
+    "Drumee UI toolkit"
+  ],
+  "scripts": {
+    "release": "git push && npm publish --access public && npm version patch"
+  },
+  "author": "Somanos Sar <somanos.sar@drumee.com>",
+  "devDependencies": {
+    "@babel/core": "^7.19.1",
+    "@babel/preset-env": "^7.19.1",
+    "@unocss/preset-wind4": "^66.3.3",
+    "@unocss/webpack": "^66.3.3",
+    "argparse": "^2.0.1",
+    "autoprefixer": "^10.4.21",
+    "babel-loader": "^8.2.5",
+    "babel-plugin-syntax-dynamic-import": "^6.18.0",
+    "clean-webpack-plugin": "^4.0.0",
+    "css-loader": "^6.7.1",
+    "cssnano": "^5.1.13",
+    "extract-css-chunks-webpack-plugin": "^4.9.0",
+    "file-loader": "^6.2.0",
+    "inspectpack": "^4.7.1",
+    "json-loader": "^0.5.7",
+    "json2md": "^2.0.3",
+    "jsonfile": "^6.1.0",
+    "mini-css-extract-plugin": "^2.6.1",
+    "minimist": "^1.2.6",
+    "postcss": "^8.4.16",
+    "postcss-cli": "^10.0.0",
+    "postcss-loader": "^7.3.4",
+    "postcss-preset-env": "^7.8.2",
+    "postcss-scss": "^4.0.9",
+    "raw-loader": "^4.0.2",
+    "sass": "^1.93.3",
+    "sass-loader": "^16.0.6",
+    "sass-resources-loader": "^2.2.5",
+    "shelljs": "^0.8.5",
+    "style-loader": "^3.3.1",
+    "terser-webpack-plugin": "^5.3.9",
+    "ts-loader": "^9.4.1",
+    "typescript": "^4.8.3",
+    "underscore-template-loader": "^1.1.0",
+    "unocss": "^66.3.3",
+    "url-loader": "^4.1.1",
+    "walkdir": "^0.4.1",
+    "webpack": "^5.82.0",
+    "webpack-cli": "^5.1.1",
+    "webpack-stats-plugin": "^1.1.1"
+  },
+  "dependencies": {
+    "@drumee/ui-styles": "^1.0.1"
+  }
+}

package/skeletons/index.js

@@ -0,0 +1,168 @@
+/**
+ * 
+ * @param {*} ui 
+ * @param {*} opt 
+ * @returns 
+ */
+export function button(ui, opt) {
+  let { label, ico, service, sys_pn, className, priority = "primary", type, haptic } = opt;
+  const pfx = className || `${ui.fig.group}__button`;
+  let kids = []
+  if (label) kids.push(
+    Skeletons.Element({
+      className: `${pfx} btn`,
+      content: label,
+      tagName: _K.tag.span,
+    })
+  )
+  let main = Skeletons.Box.G;
+  if (ico) {
+    let el = Skeletons.Button.Svg({
+      className: `${pfx} icon`,
+      ico,
+    })
+    if ([_a.api].includes(type)) {
+      kids.unshift(el);
+      main = Skeletons.Box.X;
+    } else if ([_a.row].includes(type)) {
+      kids.push(el)
+      main = Skeletons.Box.X;
+    } else {
+      kids.push(el)
+      main = Skeletons.Box.G;
+    }
+  }
+
+  return main({
+    className: `${pfx}-main ${priority}`,
+    partHandler: [ui],
+    uiHandler: [ui],
+    sys_pn,
+    service,
+    haptic,
+    kidsOpt: {
+      active: 0,
+    },
+    kids
+  })
+}
+
+/**
+ * 
+ * @param {*} ui 
+ * @returns 
+ */
+export function header(ui, content, tips) {
+  const fig = ui.fig.family;
+  let kids = [
+    Skeletons.Box.X({
+      className: `${fig}__logo-container`,
+      kids: [
+        Skeletons.Button.Svg({
+          ico: "raw-logo-drumee-icon",
+          className: `${fig}__logo-content`,
+        })
+      ]
+    }),
+
+    Skeletons.Box.Y({
+      className: `${fig}__text-container`,
+      kids: [
+        Skeletons.Note({
+          className: `${fig}__title`,
+          content
+        }),
+      ]
+    })
+
+  ]
+
+  if (tips) {
+    kids.push(Skeletons.Box.Y({
+      className: `${fig}__text-container`,
+      kids: [
+        Skeletons.Note({
+          className: `${fig}__tips`,
+          tips
+        }),
+      ]
+    }))
+  }
+
+  let a = Skeletons.Box.Y({
+    className: `${ui.fig.family}__header`,
+    debug: __filename,
+    kids
+  })
+  return a;
+}
+
+/**
+ * 
+ * @param {*} ui 
+ * @param {*} opt 
+ * @returns 
+ */
+export function entry(ui, opt) {
+  let { value, name, placeholder, label, sys_pn, service = _a.input, autocomplete } = opt;
+  autocomplete = autocomplete || name;
+  const pfx = `${ui.fig.family}__entry`;
+  let args = {
+    className: `${pfx}-input`,
+    name,
+    value,
+    formItem: name,
+    innerClass: name,
+    mode: _a.interactive,
+    service,
+    placeholder,
+    uiHandler: [ui],
+    autocomplete,
+    radio: ui._id
+  }
+  if (sys_pn) {
+    args.sys_pn = sys_pn;
+    args.partHandler = [ui];
+  }
+  return Skeletons.Box.Y({
+    className: `${pfx}-main`,
+    kids: [
+      Skeletons.Note({
+        className: `${pfx}-label ${name}`,
+        content: label,
+      }),
+      Skeletons.Entry(args)
+    ]
+  })
+}
+
+/**
+* 
+* @param {*} ui 
+* @param {*} cn 
+* @param {*} passmeter 
+* @returns 
+*/
+export function password(ui, opt) {
+  const { placeholder, interactive = 1, name, service, sys_pn } = opt;
+  const pfx = `${ui.fig.family}__entry`;
+  return Skeletons.Box.X({
+    className: `${pfx}-main`,
+    sys_pn: 'wrapper-pw',
+    partHandler: [ui],
+    kids: [
+      Skeletons.EntryBox({
+        uiHandler: [ui],
+        type: _a.password,
+        className: `${pfx}-input`,
+        service: service || _e.submit,
+        name,
+        placeholder,
+        interactive,
+        sys_pn,
+        shower: 1
+      })
+    ]
+  });
+}
+

package/skin/skin.scss

@@ -0,0 +1,167 @@
+@use '@drumee/ui-styles/src/mixins';
+
+@mixin dtk-butler-main {
+
+  &__ui {
+    width: 100vw;
+    height: 100vh;
+    align-content: center;
+    align-items: center;
+    justify-content: start;
+    background-color: var(--neutral-100);
+    overflow: auto;
+    font-family: var(--font-main);
+    flex-wrap: wrap;
+    padding: var(--spacer-7);
+    gap: var(--spacer-8);
+    flex-shrink: 0;
+
+    &[data-device="mobile"] {
+      padding: 10px;
+      height: auto;
+    }
+  }
+
+  &__main {
+    top: 180px;
+    justify-content: start;
+    align-items: center;
+    width: 100%;
+    max-width: 480px;
+    border-width: 1px;
+    gap: var(--spacer-8);
+    background-color: var(--white);
+    border: 1px solid var(--neutral-200);
+    padding: var(--spacer-7);
+    border-radius: var(--corner-radius-6);
+  }
+
+
+  &__logo {
+    &-container {
+      align-content: center;
+      justify-content: center;
+      align-items: center;
+      flex-wrap: wrap;
+    }
+
+    &-content {
+      width: 80px;
+      height: 64px;
+      align-content: center;
+      justify-content: start;
+      align-items: start;
+      flex-wrap: wrap;
+
+      svg {
+        width: 100%;
+        height: 100%;
+      }
+    }
+  }
+
+  &__title {
+    font-weight: bold;
+    font-size: 32px;
+    line-height: 40px;
+    text-align: center;
+  }
+
+  &__tips {
+    font-weight: 400;
+    font-style: normal;
+    font-size: 16px;
+    line-height: 26px;
+    letter-spacing: 1px;
+    text-align: center;
+  }
+
+  &__message {
+    font-weight: 400;
+    font-style: normal;
+    font-size: 14px;
+    line-height: 22px;
+    text-align: center;
+    letter-spacing: 1px;
+
+    span {
+      font-weight: bold;
+      cursor: pointer;
+    }
+  }
+
+}
+
+@mixin dtk-butler-button {
+
+  &__buttons {
+    gap: var(--spacer-6);
+    width: 100%;
+  }
+
+
+  &__button-main {
+    height: 48px;
+    opacity: 1;
+    gap: var(--spacer-4);
+    border-radius: var(--corner-radius-max);
+    padding-top: 8px;
+    padding-right: 16px;
+    padding-bottom: 8px;
+    padding-left: 16px;
+    cursor: pointer;
+
+    &[data-haptic="1"] {
+      opacity: .6;
+      pointer-events: none;
+    }
+
+    &.primary {
+      padding-right: 3px;
+      justify-content: center;
+      grid-template-columns: 1fr 40px;
+      background: var(--primary-500);
+      color: var(--white);
+      align-content: center;
+      flex-wrap: wrap;
+
+      .icon.svg-wrapper {
+        height: 38px;
+        width: 38px;
+        color: var(--primary-500);
+        background-color: white;
+        border-radius: 50%;
+        padding: 9px;
+      }
+    }
+
+    &.secondary {
+      justify-content: center;
+      background-color: var(--neutral-200);
+
+      .icon.svg-wrapper {
+        height: 32px;
+        width: 32px;
+        color: var(--neutral-900);
+        border-radius: 50%;
+        padding: 6px;
+      }
+    }
+
+    svg {
+      width: 100%;
+      height: 100%;
+    }
+  }
+
+  &__button.btn {
+    width: auto;
+    height: 100%;
+    align-content: center;
+    display: flex;
+    flex-wrap: wrap;
+    justify-content: center;
+    line-height: 20px;
+  }
+
+}

package/widgets/dialog/index.js

@@ -0,0 +1,42 @@
+
+/**
+ * Class representing signup page in Welcome module.
+ * @class __welcome_signup
+ * @extends __welcome_interact
+ */
+const Common = require("..")
+require('./skin');
+
+export class dtk_butler_dialog extends Common {
+
+  /**
+   ** @param {object} opt
+  */
+  initialize(opt = {}) {
+    super.initialize(opt);
+    this.declareHandlers();
+    this.mset({ flow: _a.y })
+  }
+
+  /**
+   *
+  */
+  onDomRefresh() {
+    this.feed(require('./skeleton').default(this));
+  }
+
+  /**
+   * @param {LetcBox} cmd
+   * @param {any} args
+  */
+  onUiEvent(cmd, args = {}) {
+    const service = args.service || cmd.mget(_a.service);
+    this.debug(`onUiEvent service = ${service}`, cmd, this);
+
+    switch (service) {
+      default:
+        this.triggerHandlers({ service })
+    }
+  }
+
+}

package/widgets/dialog/skeleton/index.js

@@ -0,0 +1,23 @@
+const { header } = require("../../../skeletons")
+
+export default function (ui) {
+  const fig = ui.fig.family
+  const { title, message, buttons } = ui.model.toJSON()
+  const Buttons = Skeletons.Box.X({
+    className: `${fig}__buttons`,
+    kids: buttons
+  })
+
+  let a = Skeletons.Box.Y({
+    className: `${fig}__main`,
+    debug: __filename,
+    kids: [
+      header(ui, title),
+      Skeletons.Element({ className: `${fig}__message`, content: message || LOCALE.ERROR_SERVER }),
+      Buttons
+    ]
+  })
+
+  return a;
+
+}

package/widgets/dialog/skin/index.scss

@@ -0,0 +1,22 @@
+@use '@drumee/ui-styles/src/mixins';
+@use '../../toolkit/skin' as *;
+
+.dtk-butler-dialog {
+  @include dtk-butler-main;
+
+
+  &__message {
+    font-weight: 400;
+    font-style: normal;
+    font-size: 14px;
+    line-height: 22px;
+    text-align: center;
+    letter-spacing: 1px;
+
+    span {
+      font-weight: bold;
+      cursor: pointer;
+    }
+  }
+
+}

package/widgets/index.js

@@ -0,0 +1,31 @@
+
+/**
+ * Common class
+ */
+class signup_common extends LetcBox {
+
+  /**
+   * 
+   */
+  setItemState(pn, s = 0) {
+    this.ensurePart(pn).then((p) => { setTimeout(() => { p.setState(s) }, 100) })
+  }
+
+  /**
+   * 
+   */
+  setItemStatus(pn, s = 0, attr = _a.status) {
+    this.ensurePart(pn).then((p) => { setTimeout(() => { p.el.dataset[attr] = s }, 100) })
+  }
+
+
+  /**
+   * 
+   * @param {*} xhr 
+   */
+  onServerComplain(xhr) {
+    this.warn(xhr)
+  }
+}
+
+module.exports = signup_common

package/widgets/otp/index.js

@@ -0,0 +1,114 @@
+
+require('./skin');
+const Common = require("..")
+export class dtk_otp extends Common {
+
+  /**
+   ** @param {object} opt
+  */
+  initialize(opt = {}) {
+    super.initialize(opt);
+    this.declareHandlers();
+    this.mset({ flow: _a.y })
+  }
+
+  /**
+   * 
+   */
+  bindPasteEvent() {
+    this.ensurePart("digits").then(async (p) => {
+      await Kind.waitFor('entry');
+      for (let c of p.children.toArray()) {
+        c.once("input:ready", () => {
+          c._input[0].onpaste = (e) => {
+            setTimeout(() => {
+              this.debug("OM ZZZ PASTE", e, c.getValue())
+              let value = c.getValue() || '';
+              if (!/[0-9]{1,6}/.test(value)) {
+                c.setValue("")
+                return
+              }
+              let digits = value.split('');
+              let i = c.getIndex();
+              for (let d of digits) {
+                if (!p.children._views[i]) continue;
+                p.children._views[i].setValue(d);
+                i++;
+              }
+              this.checkForm()
+            }, 300)
+          }
+        })
+      }
+    })
+  }
+
+  /**
+   * 
+   */
+  checkForm(api) {
+    this.ensurePart("digits").then((p) => {
+      let res = [];
+      for (let c of p.children.toArray()) {
+        let v = c.getValue()
+        if (/[0-9]/.test(v)) {
+          res.push(v)
+        }
+      }
+      if (res.length >= 6) {
+        if (api) {
+          return this.postService(api, { otp: res.join('') }, { async: 1 })
+        }
+      }
+    })
+  }
+
+  /**
+   *
+  */
+  onDomRefresh() {
+    this.feed(require("./skeleton").default(this));
+    this.bindPasteEvent();
+  }
+
+
+  /**
+   * @param {LetcBox} cmd
+   * @param {any} args
+  */
+  onUiEvent(cmd, args = {}) {
+    const service = args.service || cmd.get(_a.service);
+    let status = cmd.status;
+    this.debug(`onUiEvent service = ${service}`, args, status, cmd);
+    switch (service) {
+      case _a.input:
+        cmd.focus();
+        if (status == _e.click) {
+          cmd.setValue('');
+          return;
+        }
+        let res = [];
+        this.ensurePart("digits").then((p) => {
+          let i = cmd.getIndex() + 1;
+          let value = cmd.getValue();
+          for (let c of p.children.toArray()) {
+            if (c.getIndex() < i) {
+              continue;
+            } else {
+              if (/[0-9]/.test(value) && /[0-9]/.test(status)) {
+                c.focus();
+                c.setValue('')
+              } else {
+                cmd.setValue('');
+              }
+              break;
+            }
+          }
+          this.checkForm()
+        })
+        break;
+    }
+  }
+
+
+}

package/widgets/otp/skeleton/index.js

@@ -0,0 +1,71 @@
+const { header } = require("../../toolkit/skeleton")
+
+function __skl_welcome_signup(ui) {
+  const fig = ui.fig.family
+  let digits = []
+  let { title, message } = ui.model.toJSON()
+  for (let i = 0; i < 6; i++) {
+    digits.push(
+      Skeletons.Entry({
+        name: `digit-${i}`,
+        service: _a.input
+      })
+    )
+  }
+  const code = Skeletons.Box.X({
+    kidsOpt: {
+      className: `${fig}__digit`,
+      placeholder: "",
+      min: 0,
+      max: 9,
+      maxlength: 6,
+      interactive: 1
+    },
+    className: `${fig}__digits`,
+    sys_pn: "digits",
+    kids: digits
+  })
+
+  const resend = Skeletons.Box.X({
+    className: `${fig}__resend`,
+    kidsOpt: {
+      tagName: _K.tag.span,
+    },
+    kids: [
+      Skeletons.Element({
+        className: `${fig}__resend-text`,
+        content: `${LOCALE.DIDNT_GET_EMAIL} ${LOCALE.OR}`
+      }),
+      Skeletons.Element({
+        className: `${fig}__resend-text resend`,
+        content: LOCALE.RESEND_CODE,
+        service: _a.resend
+      }),
+    ]
+  })
+
+  if (_.isString(message)) {
+    message = Skeletons.Box.X({
+      className: `${fig}__message`,
+      kids: [
+        Skeletons.Element({
+          className: `${fig}__message-text`,
+          content: message
+        })
+      ]
+    });
+  }
+  return Skeletons.Box.Y({
+    className: `${fig}__main`,
+    debug: __filename,
+    kids: [
+      header(ui, title || LOCALE.VALIDATION_SENT_TO),
+      message,
+      code,
+      resend
+    ]
+  })
+
+}
+
+export default __skl_welcome_signup

package/widgets/otp/skin/index.scss

@@ -0,0 +1,67 @@
+@use '../../toolkit/skin' as *;
+
+.dtk-otp {
+  @include dtk-butler-main;
+
+  &__digits {
+    width: 100%;
+    justify-content: center;
+    height: 78px;
+    gap: var(--spacer-6);
+  }
+
+  &__digit {
+    width: 52px;
+    height: 72px;
+    opacity: 1;
+    gap: 16px;
+    border-radius: var(--corner-radius-max);
+    padding-top: 8px;
+    padding-right: 16px;
+    padding-bottom: 8px;
+    padding-left: 16px;
+    border: 1px var(--neutral-200) solid;
+
+    input {
+      width: 100%;
+      width: 100%;
+      font-weight: 400;
+      font-style: normal;
+      font-size: 32px;
+      line-height: 40px;
+      text-align: center;
+      vertical-align: middle;
+
+      &:focus {
+        background: var(--primary-100);
+        color: var(--primary-500);
+      }
+    }
+
+    &:focus-within {
+      border: 1px solid var(--primary-500);
+      background: var(--primary-100);
+    }
+  }
+
+  &__resend {
+    width: 100%;
+    justify-content: start;
+    flex-wrap: wrap;
+
+    &-text {
+      font-weight: 400;
+      font-style: normal;
+      font-size: 16px;
+      line-height: 26px;
+      letter-spacing: 1px;
+      width: 100%;
+
+      &.resend {
+        color: var(--primary-500);
+        font-weight: bold;
+        cursor: pointer;
+      }
+    }
+  }
+}

package/widgets/pwsetter/index.js

@@ -0,0 +1,80 @@
+
+
+require('./skin');
+
+export class dtk_pwmeter extends LetcBox {
+
+  /**
+   ** @param {object} opt
+  */
+  initialize(opt = {}) {
+    super.initialize(opt);
+    this.declareHandlers();
+    this.mset({ flow: _a.y })
+  }
+
+  /**
+   *
+  */
+  onDomRefresh() {
+    this.feed(require('./skeleton').default(this));
+  }
+
+  /**
+   * 
+   * @param {*} pw 
+   */
+  check(pw) {
+    let rate = 100 * (pw.length / 20) + 5;
+    if (rate > 100) rate = 100;
+    this.__strengthGrade.el.style.width = `${rate}%`;
+    let min = 6;
+    this._isValid = 0;
+    if (pw.length < min) {
+      this.__strengthState.set({ content: LOCALE.WEAK })
+      this.__strengthGrade.el.dataset.strenght = "0";
+      this.__errorMessage.set({ content: LOCALE.PASSWORD_AT_LEAST.format(min) })
+    } else if (pw.length <= 10) {
+      this.__strengthState.set({ content: LOCALE.STRONG })
+      this.__strengthGrade.el.dataset.strenght = "1";
+      this.__errorMessage.set({ content: "" })
+      this._isValid = 1;
+    } else {
+      this.__strengthGrade.el.dataset.strenght = "2";
+      this.__strengthState.set({ content: LOCALE.VERY_STRONG })
+      this.__errorMessage.set({ content: "" });
+      this._isValid = 1;
+    }
+  }
+
+  /**
+   * 
+   * @returns 
+   */
+  isValid(){
+    return this._isValid
+  }
+  
+  /**
+   * 
+   * @param {*} pw 
+   */
+  message(content) {
+    this.__errorMessage.set({ content })
+  }
+
+  /**
+   * @param {LetcBox} cmd
+   * @param {any} args
+  */
+  onUiEvent(cmd, args = {}) {
+    const service = args.service || cmd.mget(_a.service);
+    this.debug(`onUiEvent service = ${service}`, cmd, this);
+
+    switch (service) {
+      default:
+        this.triggerHandlers({ service })
+    }
+  }
+
+}

package/widgets/pwsetter/skeleton/index.js

@@ -0,0 +1,48 @@
+
+/**
+* 
+* @param {*} ui 
+* @param {*} opt 
+* @returns 
+*/
+function passmeter(ui, opt) {
+  let fig = `${ui.fig.family}`
+  return Skeletons.Box.Y({
+    className: `${fig}__main`,
+    kids: [
+      Skeletons.Box.X({
+        className: `${fig}__dashboard`,
+        kids: [
+          Skeletons.Element({
+            className: `${fig}__topic`,
+            content: LOCALE.PASSWORD_STRENGTH
+          }),
+          Skeletons.Note({
+            className: `${fig}__strength-state`,
+            content: "",
+            sys_pn: "strength-state"
+          }),
+          Skeletons.Box.X({
+            className: `${fig}__strength-container`,
+            kids: [
+              Skeletons.Element({
+                className: `${fig}__strength-content`,
+                sys_pn: "strength-grade"
+              }),
+            ]
+          })
+        ]
+      }),
+      Skeletons.Note({
+        className: `${fig}__error`,
+        content: "",
+        sys_pn: "error-message"
+      }),
+    ]
+  })
+};
+
+
+
+
+export default passmeter

package/widgets/pwsetter/skin/index.scss

@@ -0,0 +1,58 @@
+.dtk-pwsetter {
+  &__ui {
+    width: 100%;
+  }
+
+  &__main {
+    font-weight: 400;
+    width: 100%;
+    font-style: normal;
+    font-size: 14px;
+    line-height: 22px;
+    text-align: center;
+    letter-spacing: 1px;
+    color: var(--neutral-600);
+  }
+
+  &__topic {
+    margin-right: auto;
+  }
+
+  &__strength-state {
+    min-width: 40px;
+  }
+
+  &__dashboard {
+    gap: 10px;
+  }
+
+  &__strength-container {
+    width: 48px;
+    align-content: center;
+    flex-wrap: wrap;
+    gap: 10px;
+  }
+
+  &__strength-content {
+    height: 4px;
+    width: 0;
+    border-radius: var(--corner-radius-max);
+
+    &[data-strenght="0"] {
+      background-color: var(--red-500);
+    }
+
+    &[data-strenght="1"] {
+      background-color: var(--green-200);
+    }
+
+    &[data-strenght="2"] {
+      background-color: var(--green-400);
+    }
+  }
+
+  &__error {
+    color: var(--red-500);
+  }
+
+}