@dragunio/fe-libs 0.1.5 → 0.1.7

package/dist/styles.css

@@ -214,6 +214,36 @@
   outline-offset: 2px;
 }
 
+/* packages/button-bar/src/styles.css */
+.fe-button-bar {
+  display: flex;
+  align-items: center;
+  flex-wrap: wrap;
+  gap: 8px;
+}
+.fe-button-bar__more {
+  position: relative;
+}
+.fe-button-bar__menu {
+  position: absolute;
+  z-index: 10;
+  top: calc(100% + 8px);
+  right: 0;
+  width: 256px;
+  min-width: 256px;
+  padding: 4px 0;
+  border: 1px solid #d4d8e0;
+  border-radius: 12px;
+  background: #fff;
+  box-shadow: 0 10px 24px rgb(16 24 40 / 15%);
+}
+.fe-button-bar__menu .fe-button {
+  justify-content: flex-start;
+  width: 100%;
+  border-radius: 0;
+  text-align: left;
+}
+
 /* packages/table/src/styles.css */
 .fe-table {
   width: 100%;
@@ -327,6 +357,10 @@ table[data-fe-table] tbody tr:hover {
   font: inherit;
   line-height: 1.25;
 }
+.fe-toggle--label-top {
+  flex-direction: column;
+  align-items: flex-start;
+}
 .fe-toggle__input {
   position: absolute;
   width: 1px;
@@ -347,7 +381,7 @@ table[data-fe-table] tbody tr:hover {
   border-radius: 999px;
   background: var(--fe-toggle-off);
   box-shadow: inset 0 0 0 1px rgb(16 24 40 / 8%);
-  transition: background-color .18s ease;
+  transition: background-color 0.18s ease;
 }
 .fe-toggle__control::after {
   width: 18px;
@@ -356,7 +390,7 @@ table[data-fe-table] tbody tr:hover {
   background: #fff;
   box-shadow: 0 1px 2px rgb(16 24 40 / 22%);
   content: "";
-  transition: transform .18s ease;
+  transition: transform 0.18s ease;
 }
 .fe-toggle__input:checked + .fe-toggle__control {
   background: var(--fe-toggle-color);
@@ -369,7 +403,7 @@ table[data-fe-table] tbody tr:hover {
   outline-offset: 2px;
 }
 .fe-toggle__input:disabled + .fe-toggle__control {
-  opacity: .52;
+  opacity: 0.52;
 }
 .fe-toggle:has(.fe-toggle__input:disabled) {
   cursor: not-allowed;
@@ -826,33 +860,91 @@ table[data-fe-table] tbody tr:hover {
   font-size: 13px;
   font-weight: 600;
 }
-.fe-number-input input {
-  width: 100%;
+.fe-number-input__control {
+  position: relative;
+  display: flex;
+  align-items: center;
   min-height: 40px;
-  padding: 0 13px;
-  padding-right: 13px;
   border: 1px solid #d4d8e0;
   border-radius: 12px;
-  outline: 0;
   background: #fff;
-  color: #20242c;
-  font: inherit;
   transition:
     border-color 0.15s,
     box-shadow 0.15s,
     background 0.15s;
 }
-.fe-number-input input:focus {
+.fe-number-input__control:hover {
+  border-color: #aab0bb;
+  background: #fcfdff;
+}
+.fe-number-input input {
+  display: block;
+  box-sizing: border-box;
+  width: 100%;
+  min-width: 0;
+  min-height: 38px;
+  padding: 0 13px;
+  border: 0;
+  border-radius: 11px;
+  outline: 0;
+  background: transparent;
+  box-shadow: none;
+  color: #20242c;
+  font: inherit;
+}
+.fe-number-input__input-wrap {
+  position: relative;
+  display: flex;
+  min-width: 0;
+  flex: 1 1 auto;
+  align-self: stretch;
+}
+.fe-number-input__prefix,
+.fe-number-input__suffix {
+  z-index: 1;
+  display: inline-flex;
+  flex: 0 0 auto;
+  align-items: center;
+  color: #535b6a;
+  font-size: 13px;
+  white-space: nowrap;
+}
+.fe-number-input__prefix {
+  margin-right: -5px;
+  padding-left: 13px;
+}
+.fe-number-input__suffix {
+  margin-left: -5px;
+  padding-right: 13px;
+}
+.fe-number-input__stepper {
+  display: flex;
+  width: 28px;
+  min-width: 28px;
+  flex: 0 0 28px;
+  flex-direction: column;
+  align-self: stretch;
+  justify-content: center;
+  margin-right: 4px;
+}
+.fe-number-input__stepper .fe-button {
+  width: 28px;
+  min-width: 28px;
+  min-height: 16px;
+  height: 16px;
+  padding: 2px 8px;
+  border-radius: 6px;
+}
+.fe-number-input__stepper .fe-button:disabled {
+  opacity: 0.35;
+}
+.fe-number-input__control:focus-within {
   border-color: #2878f0;
   box-shadow: 0 0 0 3px rgba(40, 120, 240, 0.16);
 }
-.fe-number-input--error input {
+.fe-number-input--error .fe-number-input__control {
   border-color: #d83d55;
 }
-.fe-number-input__control {
-  position: relative;
-  display: block;
-}
 .fe-number-input__placeholder {
   position: absolute;
   top: 50%;
@@ -871,9 +963,12 @@ table[data-fe-table] tbody tr:hover {
   overflow: hidden;
   text-overflow: ellipsis;
 }
-.fe-number-input__control:has(.fe-number-input__placeholder) input::placeholder {
+.fe-number-input__input-wrap:has(.fe-number-input__placeholder) input::placeholder {
   color: transparent;
 }
+.fe-number-input input:focus {
+  outline: 0;
+}
 .fe-number-input__helper {
   color: #687183;
   font-size: 12px;
@@ -1084,6 +1179,9 @@ table[data-fe-table] tbody tr:hover {
   background: transparent;
   box-shadow: none;
 }
+.fe-text-area--autosize textarea {
+  resize: none;
+}
 .fe-text-area__placeholder {
   position: absolute;
   top: 10px;
@@ -1129,30 +1227,22 @@ table[data-fe-table] tbody tr:hover {
 .fe-currency-input {
   position: relative;
 }
-.fe-currency-input .fe-number-input__control input {
-  padding-right: 78px;
-}
-.fe-currency-input:has(.fe-currency-input__currency) .fe-number-input__control input {
-  padding-right: 110px;
-}
 .fe-currency-input__suffix,
 .fe-currency-input__currency {
-  position: absolute;
-  right: 11px;
   color: #535b6a;
   font: inherit;
   font-size: 13px;
   font-weight: 700;
 }
 .fe-currency-input__suffix {
-  top: 50%;
-  transform: translateY(-50%);
+  display: inline-flex;
+  align-items: center;
+  padding: 0 13px 0 8px;
 }
 .fe-currency-input__currency {
-  z-index: 2;
-  top: 3px;
-  right: 4px;
+  align-self: center;
   width: 96px;
+  margin-right: 4px;
 }
 .fe-currency-input__currency .fe-selection__trigger {
   box-sizing: border-box;
@@ -1324,6 +1414,154 @@ table[data-fe-table] tbody tr:hover {
   font: inherit;
 }
 
+/* packages/form-controls/src/controls/Checkbox/style.css */
+.fe-checkbox,
+.fe-radio-button {
+  display: inline-flex;
+  align-items: center;
+  gap: 8px;
+  color: #20242c;
+  cursor: pointer;
+  font: inherit;
+  line-height: 1.25;
+}
+.fe-checkbox--label-top,
+.fe-radio-button--label-top {
+  align-items: flex-start;
+  flex-direction: column;
+}
+.fe-checkbox__content,
+.fe-radio-button__content {
+  display: inline-flex;
+  align-items: center;
+  gap: 8px;
+}
+.fe-checkbox__input,
+.fe-radio-button__input {
+  position: absolute;
+  width: 1px;
+  height: 1px;
+  margin: -1px;
+  overflow: hidden;
+  clip: rect(0 0 0 0);
+  white-space: nowrap;
+  border: 0;
+}
+.fe-checkbox__control,
+.fe-radio-button__control {
+  display: inline-grid;
+  width: 18px;
+  height: 18px;
+  flex: 0 0 auto;
+  place-items: center;
+  border: 1px solid #98a2b3;
+  background: #fff;
+  transition:
+    border-color 0.16s ease,
+    background-color 0.16s ease,
+    box-shadow 0.16s ease;
+}
+.fe-checkbox__control {
+  border-radius: 4px;
+}
+.fe-checkbox__control::after {
+  width: 8px;
+  height: 4px;
+  border-bottom: 2px solid #fff;
+  border-left: 2px solid #fff;
+  content: "";
+  opacity: 0;
+  transform: rotate(-45deg) translate(1px, -1px);
+  transition: opacity 0.16s ease;
+}
+.fe-checkbox__input:checked + .fe-checkbox__control {
+  border-color: #2878f0;
+  background: #2878f0;
+}
+.fe-checkbox__input:checked + .fe-checkbox__control::after {
+  opacity: 1;
+}
+.fe-checkbox__input:indeterminate + .fe-checkbox__control::after {
+  width: 8px;
+  height: 2px;
+  border: 0;
+  background: #fff;
+  opacity: 1;
+  transform: none;
+}
+.fe-checkbox__input:focus-visible + .fe-checkbox__control,
+.fe-radio-button__input:focus-visible + .fe-radio-button__control {
+  outline: 3px solid rgb(40 120 240 / 22%);
+  outline-offset: 2px;
+}
+.fe-checkbox--disabled,
+.fe-radio-button--disabled {
+  cursor: not-allowed;
+  opacity: 0.52;
+}
+.fe-checkbox__label,
+.fe-radio-button__label {
+  user-select: none;
+}
+
+/* packages/form-controls/src/controls/RadioButton/style.css */
+.fe-radio-button__control {
+  border-radius: 50%;
+}
+.fe-radio-button__control::after {
+  width: 8px;
+  height: 8px;
+  border-radius: 50%;
+  background: #2878f0;
+  content: "";
+  opacity: 0;
+  transform: scale(0.6);
+  transition: opacity 0.16s ease, transform 0.16s ease;
+}
+.fe-radio-button__input:checked + .fe-radio-button__control {
+  border-color: #2878f0;
+}
+.fe-radio-button__input:checked + .fe-radio-button__control::after {
+  opacity: 1;
+  transform: scale(1);
+}
+
+/* packages/form-controls/src/controls/RadioGroup/style.css */
+.fe-radio-group {
+  display: inline-flex;
+  gap: 8px;
+  color: #20242c;
+  font: inherit;
+}
+.fe-radio-group--label-top {
+  flex-direction: column;
+}
+.fe-radio-group--label-right {
+  align-items: center;
+}
+.fe-radio-group__label {
+  display: inline-flex;
+  align-items: center;
+  gap: 4px;
+  font-size: 13px;
+  font-weight: 600;
+  line-height: 1.25;
+}
+.fe-radio-group__required {
+  color: #d83d55;
+}
+.fe-radio-group__options {
+  display: inline-flex;
+  gap: 12px;
+}
+.fe-radio-group--vertical .fe-radio-group__options {
+  flex-direction: column;
+}
+.fe-radio-group--horizontal .fe-radio-group__options {
+  align-items: center;
+  flex-wrap: wrap;
+}
+
 /* packages/form-controls/src/styles.css */
 
 /* packages/tooltip/src/styles.css */
@@ -2048,4 +2286,97 @@ table[data-fe-table] tbody tr:hover {
   }
 }
 
+/* packages/avatar/src/styles.css */
+.fe-avatar {
+  --fe-avatar-size: 40px;
+  display: inline-flex;
+  width: var(--fe-avatar-size);
+  height: var(--fe-avatar-size);
+  box-sizing: border-box;
+  flex: 0 0 auto;
+  align-items: center;
+  justify-content: center;
+  overflow: hidden;
+  vertical-align: middle;
+  background: #eef0f3;
+  color: #344054;
+  font: inherit;
+  font-size: var(--fe-avatar-font-size, 15px);
+  font-weight: 700;
+  line-height: 1;
+  letter-spacing: 0.02em;
+}
+.fe-avatar--circle {
+  border-radius: 50%;
+}
+.fe-avatar--rounded {
+  border-radius: 26%;
+}
+.fe-avatar__image,
+.fe-avatar__fallback-icon {
+  display: block;
+  width: 100%;
+  height: 100%;
+}
+.fe-avatar__image {
+  object-fit: cover;
+}
+.fe-avatar__initials {
+  display: grid;
+  width: 100%;
+  height: 100%;
+  place-items: center;
+  -webkit-user-select: none;
+  user-select: none;
+}
+.fe-avatar-group {
+  --fe-avatar-group-overlap: 10px;
+  --fe-avatar-group-border: #fff;
+  display: inline-flex;
+  align-items: center;
+  gap: 10px;
+  color: #344054;
+  font: inherit;
+}
+.fe-avatar-group__items {
+  display: flex;
+  align-items: center;
+  isolation: isolate;
+}
+.fe-avatar-group__item {
+  position: relative;
+  display: inline-flex;
+}
+.fe-avatar-group__item + .fe-avatar-group__item,
+.fe-avatar-group__more {
+  margin-inline-start: calc(var(--fe-avatar-group-overlap) * -1);
+}
+.fe-avatar-group__item > .fe-avatar {
+  box-shadow: 0 0 0 2px var(--fe-avatar-group-border);
+}
+.fe-avatar-group__more {
+  display: inline-grid;
+  width: var(--fe-avatar-size);
+  height: var(--fe-avatar-size);
+  box-sizing: border-box;
+  flex: 0 0 auto;
+  place-items: center;
+  border: 2px solid var(--fe-avatar-group-border);
+  border-radius: 50%;
+  background: #eef0f3;
+  color: #475467;
+  font-size: var(--fe-avatar-font-size, 15px);
+  font-weight: 700;
+  line-height: 1;
+}
+.fe-avatar-group__content {
+  min-width: 0;
+  overflow: hidden;
+  font-size: 14px;
+  font-weight: 500;
+  line-height: 1.4;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
 /* src/styles.css */

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@dragunio/fe-libs",
-  "version": "0.1.5",
+  "version": "0.1.7",
   "description": "Reusable React components, icons, and table primitives.",
   "license": "MIT",
   "repository": {