@dragunio/fe-libs 0.1.3 → 0.1.5

package/dist/styles.css

@@ -507,23 +507,52 @@ table[data-fe-table] tbody tr:hover {
   }
 }
 
-/* packages/form-controls/src/styles.css */
-.fe-selection,
-.fe-number-input,
-.fe-datetime-picker,
-.fe-text-input,
-.fe-text-area {
+/* packages/form-controls/src/controls/Field/style.css */
+.fe-field__label {
+  display: inline-flex;
+  align-items: center;
+  gap: 6px;
+  font-size: 13px;
+  font-weight: 600;
+}
+.fe-field__required {
+  color: #d83d55;
+}
+.fe-field__info {
+  display: inline-grid;
+  width: 16px;
+  height: 16px;
+  place-items: center;
+  border: 1px solid #98a2b3;
+  border-radius: 50%;
+  color: #687183;
+  font-size: 10px;
+  font-style: normal;
+  font-weight: 800;
+  line-height: 1;
+  outline: 0;
+}
+.fe-field__info:focus-visible {
+  box-shadow: 0 0 0 3px rgba(40, 120, 240, 0.16);
+}
+.fe-field__message {
+  color: #687183;
+  font-size: 12px;
+  line-height: 1.4;
+}
+.fe-field__message--error {
+  color: #b92c43;
+}
+
+/* packages/form-controls/src/controls/Selection/style.css */
+.fe-selection {
   display: grid;
   min-width: 0;
   gap: 6px;
-  font: inherit;
   color: #20242c;
+  font: inherit;
 }
-.fe-selection__label,
-.fe-number-input__label,
-.fe-datetime-picker__label,
-.fe-text-input__label,
-.fe-text-area__label {
+.fe-selection__label {
   font-size: 13px;
   font-weight: 600;
 }
@@ -532,30 +561,25 @@ table[data-fe-table] tbody tr:hover {
   width: 100%;
   min-width: 0;
 }
-.fe-selection__trigger,
-.fe-number-input input,
-.fe-text-input input,
-.fe-text-area textarea {
+.fe-selection__trigger {
+  display: flex;
+  align-items: center;
   width: 100%;
-  min-height: 42px;
+  min-height: 40px;
   padding: 0 13px;
   border: 1px solid #d4d8e0;
   border-radius: 12px;
+  outline: 0;
   background: #fff;
   color: #20242c;
   font: inherit;
-  outline: 0;
+  text-align: left;
+  cursor: pointer;
   transition:
     border-color 0.15s,
     box-shadow 0.15s,
     background 0.15s;
 }
-.fe-selection__trigger {
-  display: flex;
-  align-items: center;
-  text-align: left;
-  cursor: pointer;
-}
 .fe-selection--clearable .fe-selection__trigger {
   padding-right: 64px;
 }
@@ -568,11 +592,7 @@ table[data-fe-table] tbody tr:hover {
   border-color: #aab0bb;
   background: #fcfdff;
 }
-.fe-selection__trigger:focus-visible,
-.fe-number-input input:focus,
-.fe-datetime-picker__trigger:focus-visible,
-.fe-text-input input:focus,
-.fe-text-area textarea:focus {
+.fe-selection__trigger:focus-visible {
   border-color: #2878f0;
   box-shadow: 0 0 0 3px rgba(40, 120, 240, 0.16);
 }
@@ -607,12 +627,12 @@ table[data-fe-table] tbody tr:hover {
   gap: 4px;
   max-width: 100%;
   padding: 3px 7px;
+  overflow: hidden;
   border-radius: 7px;
   background: #e7f1ff;
   color: #1e60cc;
   font-size: 12px;
   font-weight: 600;
-  overflow: hidden;
   text-overflow: ellipsis;
   white-space: nowrap;
 }
@@ -626,22 +646,22 @@ table[data-fe-table] tbody tr:hover {
   right: 14px;
   width: 16px;
   height: 16px;
-  transform: translateY(-50%);
   pointer-events: none;
+  transform: translateY(-50%);
 }
 .fe-selection__clear {
   position: absolute;
   z-index: 1;
   top: 50%;
-  right: 40px;
+  right: 32px;
   display: grid;
-  place-items: center;
-  width: 16px;
-  height: 16px;
+  width: 32px;
+  height: 32px;
   margin: 0;
   padding: 0;
   border: 0;
   border-radius: 50%;
+  place-items: center;
   background: transparent;
   color: #697386;
   cursor: pointer;
@@ -650,9 +670,9 @@ table[data-fe-table] tbody tr:hover {
 .fe-selection__clear::before,
 .fe-selection__clear::after {
   position: absolute;
-  top: 7px;
-  left: 2px;
-  width: 12px;
+  top: 15px;
+  left: 9px;
+  width: 14px;
   height: 2px;
   border-radius: 999px;
   background: currentColor;
@@ -767,22 +787,14 @@ table[data-fe-table] tbody tr:hover {
   font-size: 13px;
   text-align: center;
 }
-.fe-selection__helper,
-.fe-number-input__helper {
+.fe-selection__helper {
   color: #687183;
   font-size: 12px;
 }
-.fe-selection--error .fe-selection__trigger,
-.fe-number-input--error input,
-.fe-text-input--error input,
-.fe-text-area--error textarea {
+.fe-selection--error .fe-selection__trigger {
   border-color: #d83d55;
 }
-.fe-selection--error .fe-selection__helper,
-.fe-number-input--error .fe-number-input__helper,
-.fe-number-input__error,
-.fe-text-input__error,
-.fe-text-area__error {
+.fe-selection--error .fe-selection__helper {
   color: #b92c43;
 }
 .fe-selection--disabled {
@@ -791,88 +803,389 @@ table[data-fe-table] tbody tr:hover {
 .fe-selection--disabled .fe-selection__trigger {
   cursor: not-allowed;
 }
+@keyframes fe-selection-in {
+  from {
+    opacity: 0;
+    transform: translateY(-4px);
+  }
+  to {
+    opacity: 1;
+    transform: translateY(0);
+  }
+}
+
+/* packages/form-controls/src/controls/NumberInput/style.css */
+.fe-number-input {
+  display: grid;
+  min-width: 0;
+  gap: 6px;
+  color: #20242c;
+  font: inherit;
+}
+.fe-number-input__label {
+  font-size: 13px;
+  font-weight: 600;
+}
 .fe-number-input input {
+  width: 100%;
+  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-text-input__control,
-.fe-text-area__control {
+.fe-number-input input:focus {
+  border-color: #2878f0;
+  box-shadow: 0 0 0 3px rgba(40, 120, 240, 0.16);
+}
+.fe-number-input--error input {
+  border-color: #d83d55;
+}
+.fe-number-input__control {
   position: relative;
   display: block;
 }
-.fe-text-input input,
-.fe-text-area textarea {
+.fe-number-input__placeholder {
+  position: absolute;
+  top: 50%;
+  left: 13px;
+  display: inline-flex;
+  gap: 4px;
+  align-items: center;
+  max-width: calc(100% - 26px);
+  overflow: hidden;
+  color: #8b94a4;
+  pointer-events: none;
+  transform: translateY(-50%);
+  white-space: nowrap;
+}
+.fe-number-input__placeholder > span:first-child {
+  overflow: hidden;
+  text-overflow: ellipsis;
+}
+.fe-number-input__control:has(.fe-number-input__placeholder) input::placeholder {
+  color: transparent;
+}
+.fe-number-input__helper {
+  color: #687183;
+  font-size: 12px;
+}
+.fe-number-input--error .fe-number-input__helper,
+.fe-number-input__error {
+  color: #b92c43;
+}
+.fe-number-input__error {
+  font-size: 12px;
+}
+
+/* packages/form-controls/src/controls/TextInput/style.css */
+.fe-text-input {
+  display: grid;
+  min-width: 0;
+  gap: 6px;
+  color: #20242c;
+  font: inherit;
+}
+.fe-text-input__label {
+  font-size: 13px;
+  font-weight: 600;
+}
+.fe-text-input input {
+  width: 100%;
+  min-height: 40px;
+  padding: 0 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-text-input__control {
+  position: relative;
+  display: flex;
+  align-items: center;
+  min-height: 40px;
+  border: 1px solid #d4d8e0;
+  border-radius: 12px;
+  background: #fff;
+  transition:
+    border-color 0.15s,
+    box-shadow 0.15s,
+    background 0.15s;
+}
+.fe-text-input__control:hover {
+  border-color: #aab0bb;
+  background: #fcfdff;
+}
+.fe-text-input__control:focus-within {
+  border-color: #2878f0;
+  box-shadow: 0 0 0 3px rgba(40, 120, 240, 0.16);
+}
+.fe-text-input--error .fe-text-input__control {
+  border-color: #d83d55;
+}
+.fe-text-input__input-wrap {
+  position: relative;
+  display: flex;
+  min-width: 0;
+  flex: 1 1 auto;
+  align-self: stretch;
+}
+.fe-text-input input {
   display: block;
   box-sizing: border-box;
 }
+.fe-text-input__control input,
+.fe-text-input__control input:focus {
+  min-width: 0;
+  min-height: 38px;
+  flex: 1 1 auto;
+  border: 0;
+  border-radius: 11px;
+  background: transparent;
+  box-shadow: none;
+}
+.fe-text-input__prefix,
+.fe-text-input__suffix {
+  z-index: 1;
+  display: inline-flex;
+  flex: 0 0 auto;
+  align-items: center;
+  color: #535b6a;
+  font-size: 13px;
+  white-space: nowrap;
+}
+.fe-text-input__prefix {
+  margin-right: -5px;
+  padding-left: 13px;
+}
+.fe-text-input__suffix {
+  margin-left: -5px;
+  padding-right: 13px;
+}
+.fe-text-input__placeholder {
+  position: absolute;
+  top: 50%;
+  left: 13px;
+  display: inline-flex;
+  gap: 4px;
+  align-items: center;
+  max-width: calc(100% - 26px);
+  overflow: hidden;
+  color: #8b94a4;
+  pointer-events: none;
+  transform: translateY(-50%);
+  white-space: nowrap;
+}
+.fe-text-input__placeholder > span:first-child {
+  overflow: hidden;
+  text-overflow: ellipsis;
+}
+.fe-text-input__input-wrap:has(.fe-text-input__placeholder) input::placeholder {
+  color: transparent;
+}
+.fe-text-input__clear.fe-button {
+  z-index: 1;
+  width: 32px;
+  min-width: 32px;
+  height: 32px;
+  min-height: 32px;
+  flex: 0 0 32px;
+  margin-right: 4px;
+  padding: 4px;
+  border-radius: 50%;
+  cursor: pointer;
+}
+.fe-text-input__helper {
+  color: #687183;
+  font-size: 12px;
+}
+.fe-text-input__error {
+  color: #b92c43;
+  font-size: 12px;
+}
+
+/* packages/form-controls/src/controls/TextArea/style.css */
+.fe-text-area {
+  display: grid;
+  min-width: 0;
+  gap: 6px;
+  color: #20242c;
+  font: inherit;
+}
+.fe-text-area__label {
+  font-size: 13px;
+  font-weight: 600;
+}
 .fe-text-area textarea {
-  min-height: 96px;
+  display: block;
+  box-sizing: border-box;
+  width: 100%;
+  min-height: 40px;
+  padding: 0 13px;
   padding-top: 10px;
   padding-bottom: 10px;
+  border: 1px solid #d4d8e0;
+  border-radius: 12px;
+  outline: 0;
   resize: vertical;
+  background: #fff;
+  color: #20242c;
+  font: inherit;
+  transition:
+    border-color 0.15s,
+    box-shadow 0.15s,
+    background 0.15s;
 }
-.fe-text-input__clear.fe-button,
-.fe-text-area__clear.fe-button {
+.fe-text-area__control {
+  position: relative;
+  display: flex;
+  align-items: center;
+  min-height: 40px;
+  border: 1px solid #d4d8e0;
+  border-radius: 12px;
+  background: #fff;
+  transition:
+    border-color 0.15s,
+    box-shadow 0.15s,
+    background 0.15s;
+}
+.fe-text-area__control:hover {
+  border-color: #aab0bb;
+  background: #fcfdff;
+}
+.fe-text-area__control:focus-within {
+  border-color: #2878f0;
+  box-shadow: 0 0 0 3px rgba(40, 120, 240, 0.16);
+}
+.fe-text-area--error .fe-text-area__control {
+  border-color: #d83d55;
+}
+.fe-text-area__control textarea,
+.fe-text-area__control textarea:focus {
+  min-width: 0;
+  flex: 1 1 auto;
+  align-self: stretch;
+  border: 0;
+  border-radius: 11px;
+  background: transparent;
+  box-shadow: none;
+}
+.fe-text-area__placeholder {
   position: absolute;
-  top: 50%;
-  right: 8px;
-  min-width: 24px;
-  min-height: 24px;
-  padding: 4px;
-  border-radius: 50%;
-  transform: translateY(-50%);
+  top: 10px;
+  left: 13px;
+  display: inline-flex;
+  gap: 4px;
+  align-items: center;
+  max-width: calc(100% - 26px);
+  overflow: hidden;
+  color: #8b94a4;
+  pointer-events: none;
+  white-space: nowrap;
 }
-.fe-text-input:has(.fe-text-input__clear) input {
-  padding-right: 42px;
+.fe-text-area__placeholder > span:first-child {
+  overflow: hidden;
+  text-overflow: ellipsis;
 }
-.fe-text-area:has(.fe-text-area__clear) textarea {
-  padding-right: 42px;
+.fe-text-area__control:has(.fe-text-area__placeholder) textarea::placeholder {
+  color: transparent;
+}
+.fe-text-area__clear.fe-button {
+  z-index: 1;
+  width: 32px;
+  min-width: 32px;
+  height: 32px;
+  min-height: 32px;
+  flex: 0 0 32px;
+  margin-right: 4px;
+  padding: 4px;
+  border-radius: 50%;
+  cursor: pointer;
 }
-.fe-text-input__helper,
 .fe-text-area__helper {
   color: #687183;
   font-size: 12px;
 }
-.fe-text-input__error,
-.fe-text-area__error,
-.fe-number-input__error {
+.fe-text-area__error {
+  color: #b92c43;
   font-size: 12px;
 }
+
+/* packages/form-controls/src/controls/CurrencyInput/style.css */
 .fe-currency-input {
   position: relative;
-  display: flex;
-  align-items: start;
-}
-.fe-currency-input__number {
-  width: 100%;
 }
-.fe-currency-input__number input {
+.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;
-  top: 8px;
   color: #535b6a;
   font: inherit;
   font-size: 13px;
   font-weight: 700;
 }
+.fe-currency-input__suffix {
+  top: 50%;
+  transform: translateY(-50%);
+}
 .fe-currency-input__currency {
-  top: 7px;
-  max-width: 90px;
+  z-index: 2;
+  top: 3px;
+  right: 4px;
+  width: 96px;
+}
+.fe-currency-input__currency .fe-selection__trigger {
+  box-sizing: border-box;
+  min-height: 34px;
+  padding: 0 28px 0 8px;
   border: 0;
   border-left: 1px solid #d4d8e0;
-  background: #fff;
-  padding: 4px 0 4px 8px;
-  outline: 0;
+  border-radius: 0;
+  background: transparent;
+  color: inherit;
+  font-size: 13px;
+  font-weight: 700;
 }
-.fe-currency-input:has(.fe-number-input__label) .fe-currency-input__suffix,
-.fe-currency-input:has(.fe-number-input__label) .fe-currency-input__currency {
-  top: 31px;
+.fe-currency-input__currency .fe-selection__trigger:hover,
+.fe-currency-input__currency .fe-selection__trigger:focus-visible {
+  background: transparent;
 }
+.fe-currency-input__currency .fe-selection__actions {
+  right: 7px;
+}
+
+/* packages/form-controls/src/controls/DateTimePicker/style.css */
 .fe-datetime-picker {
   position: relative;
+  display: grid;
+  min-width: 0;
+  gap: 6px;
+  color: #20242c;
+  font: inherit;
+}
+.fe-datetime-picker__label {
+  font-size: 13px;
+  font-weight: 600;
 }
 .fe-datetime-picker__trigger {
   display: flex;
@@ -889,6 +1202,21 @@ table[data-fe-table] tbody tr:hover {
   text-align: left;
   cursor: pointer;
 }
+.fe-datetime-picker__trigger:focus-visible {
+  border-color: #2878f0;
+  box-shadow: 0 0 0 3px rgba(40, 120, 240, 0.16);
+}
+.fe-datetime-picker--error .fe-datetime-picker__trigger {
+  border-color: #d83d55;
+}
+.fe-datetime-picker__value {
+  display: inline-flex;
+  gap: 4px;
+  align-items: center;
+}
+.fe-datetime-picker__value.is-placeholder {
+  color: #8b94a4;
+}
 .fe-datetime-picker__trigger:disabled {
   opacity: 0.55;
   cursor: not-allowed;
@@ -990,21 +1318,13 @@ table[data-fe-table] tbody tr:hover {
   font-weight: 600;
 }
 .fe-datetime-picker__time input {
+  padding: 5px;
   border: 1px solid #d4d8e0;
   border-radius: 8px;
-  padding: 5px;
   font: inherit;
 }
-@keyframes fe-selection-in {
-  from {
-    opacity: 0;
-    transform: translateY(-4px);
-  }
-  to {
-    opacity: 1;
-    transform: translateY(0);
-  }
-}
+
+/* packages/form-controls/src/styles.css */
 
 /* packages/tooltip/src/styles.css */
 .fe-tooltip {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@dragunio/fe-libs",
-  "version": "0.1.3",
+  "version": "0.1.5",
   "description": "Reusable React components, icons, and table primitives.",
   "license": "MIT",
   "repository": {
@@ -23,7 +23,12 @@
       "import": "./dist/index.mjs",
       "require": "./dist/index.js"
     },
-    "./styles.css": "./dist/styles.css"
+    "./styles.css": "./dist/styles.css",
+    "./icons": {
+      "types": "./dist/icons.d.ts",
+      "import": "./dist/icons.mjs",
+      "require": "./dist/icons.js"
+    }
   },
   "files": [
     "dist",
@@ -35,7 +40,7 @@
   },
   "packageManager": "pnpm@9.15.0",
   "scripts": {
-    "build": "tsup src/index.ts src/styles.css --format esm,cjs --dts --clean",
+    "build": "tsup src/index.ts src/icons.ts --format esm,cjs --dts --clean && tsup src/styles.css --format esm,cjs",
     "build:playground": "pnpm --filter @dragunio/playground build",
     "clean": "rm -rf dist",
     "dev": "pnpm --filter @dragunio/playground dev",

package/dist/styles.d.mts

@@ -1,2 +0,0 @@
-
-export {  }

package/dist/styles.d.ts

@@ -1,2 +0,0 @@
-
-export {  }