@dragunio/fe-libs 0.1.5 → 0.1.6

package/dist/styles.css

@@ -327,6 +327,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 +351,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 +360,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 +373,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 +830,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 +933,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 +1149,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 +1197,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 +1384,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 */

package/package.json

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