@sio-group/form-react 0.1.0

package/dist/styles/components/button.css

@@ -0,0 +1,244 @@
+@keyframes spin {
+  from {
+    transform: rotate(0deg);
+  }
+  to {
+    transform: rotate(360deg);
+  }
+}
+:root {
+  --sio-color-white: #ffffff;
+  --sio-color-black: #000000;
+  --sio-color-gray: #655f5d;
+  --sio-color-light-gray: #c6c6c6;
+  --sio-color-primary: #3B82F6;
+  --sio-color-success: #10B981;
+  --sio-color-error: #EF4444;
+  --sio-color-warning: #F59E0B;
+  --sio-color-info: #06B6D4;
+  --sio-color-primary-rgb: 59, 130, 246;
+  --sio-color-error-rgb: 239, 68, 68;
+  --sio-form-label: var(--sio-color-primary);
+  --sio-form-border: var(--sio-color-light-gray);
+  --sio-form-bg: var(--sio-color-white);
+  --sio-btn-primary-bg: var(--sio-color-primary);
+  --sio-btn-primary-border: var(--sio-color-primary);
+  --sio-btn-primary-text: var(--sio-color-white);
+  --sio-btn-secondary-bg: transparent;
+  --sio-btn-secondary-border: var(--sio-color-primary);
+  --sio-btn-secondary-text: var(--sio-color-primary);
+  --sio-btn-link-bg: transparent;
+  --sio-btn-link-border: transparent;
+  --sio-btn-link-text: var(--sio-color-primary);
+}
+
+:where(.btn--primary) {
+  --sio-btn-bg: var(--sio-btn-primary-bg);
+  --sio-btn-border: var(--sio-btn-primary-border);
+  --sio-btn-text: var(--sio-btn-primary-text);
+  --sio-btn-bg-hover: color-mix(in srgb, var(--sio-btn-bg) 85%, black);
+  --sio-btn-border-hover: color-mix(in srgb, var(--sio-btn-border) 85%, black);
+  --sio-btn-text-hover: var(--sio-btn-text);
+  --sio-btn-bg-disabled: color-mix(in srgb, var(--sio-btn-bg) 40%, white);
+  --sio-btn-border-disabled: color-mix(in srgb, var(--sio-btn-border) 40%, white);
+  --sio-btn-text-disabled: color-mix(in srgb, var(--sio-btn-text) 60%, black);
+}
+
+:where(.btn--secondary) {
+  --sio-btn-bg: var(--sio-btn-secondary-bg);
+  --sio-btn-border: var(--sio-btn-secondary-border);
+  --sio-btn-text: var(--sio-btn-secondary-text);
+  --sio-btn-bg-hover: var(--sio-btn-bg);
+  --sio-btn-border-hover: color-mix(in srgb, var(--sio-btn-border) 85%, black);
+  --sio-btn-text-hover: var(--sio-btn-text);
+  --sio-btn-bg-disabled: var(--sio-btn-bg);
+  --sio-btn-border-disabled: color-mix(in srgb, var(--sio-btn-border) 40%, white);
+  --sio-btn-text-disabled: color-mix(in srgb, var(--sio-btn-text) 40%, white);
+}
+
+:where(.btn--link) {
+  --sio-btn-bg: var(--sio-btn-link-bg);
+  --sio-btn-border: var(--sio-btn-link-border);
+  --sio-btn-text: var(--sio-btn-link-text);
+  --sio-btn-bg-hover: var(--sio-btn-bg);
+  --sio-btn-border-hover: var(--sio-btn-border);
+  --sio-btn-text-hover: color-mix(in srgb, var(--sio-btn-text) 85%, black);
+  --sio-btn-bg-disabled: var(--sio-btn-bg);
+  --sio-btn-border-disabled: var(--sio-btn-border);
+  --sio-btn-text-disabled: color-mix(in srgb, var(--sio-btn-text) 40%, white);
+}
+
+:where(.btn) {
+  background-color: var(--sio-btn-bg);
+  color: var(--sio-btn-text);
+  display: inline-block;
+  font-size: 0.9em;
+  font-weight: 500;
+  user-select: none;
+  text-align: center;
+  border: 1px solid var(--sio-btn-border);
+  padding: 2px 15px;
+  border-radius: 3px;
+  cursor: pointer;
+  min-height: 22px;
+  transition: all 0.3s ease-in;
+  text-decoration: none;
+}
+
+:where(.btn--link) {
+  display: inline;
+  font-weight: unset;
+  user-select: none;
+  text-align: left;
+  padding: 0;
+  border-radius: unset;
+  min-height: unset;
+  transition: all 0.3s ease-in;
+  text-decoration: underline;
+}
+
+:where(.btn:hover),
+:where(.btn:active),
+:where(.btn:focus),
+:where(.btn.btn--active) {
+  background: var(--sio-btn-bg-hover, var(--sio-btn-bg));
+  border-color: var(--sio-btn-border-hover, var(--sio-btn-border));
+  color: var(--sio-btn-text-hover, var(--sio-btn-text));
+}
+
+:where(.btn:disabled),
+:where(.btn.btn--disabled) {
+  cursor: not-allowed;
+  background: var(--sio-btn-bg-disabled, var(--sio-btn-bg));
+  border-color: var(--sio-btn-border-disabled, var(--sio-btn-border));
+  color: var(--sio-btn-text-disabled, var(--sio-btn-text));
+}
+
+:where(.btn--primary.btn--success) {
+  --sio-btn-bg: var(--sio-color-success);
+  --sio-btn-border: var(--sio-color-success);
+  --sio-btn-text: var(--sio-color-white);
+}
+
+:where(.btn--secondary.btn--success) {
+  --sio-btn-bg: transparent;
+  --sio-btn-border: var(--sio-color-success);
+  --sio-btn-text: var(--sio-color-success);
+}
+
+:where(.btn--link.btn--success) {
+  --sio-btn-bg: transparent;
+  --sio-btn-border: transparent;
+  --sio-btn-text: var(--sio-color-success);
+}
+
+:where(.btn--primary.btn--error) {
+  --sio-btn-bg: var(--sio-color-error);
+  --sio-btn-border: var(--sio-color-error);
+  --sio-btn-text: var(--sio-color-white);
+}
+
+:where(.btn--secondary.btn--error) {
+  --sio-btn-bg: transparent;
+  --sio-btn-border: var(--sio-color-error);
+  --sio-btn-text: var(--sio-color-error);
+}
+
+:where(.btn--link.btn--error) {
+  --sio-btn-bg: transparent;
+  --sio-btn-border: transparent;
+  --sio-btn-text: var(--sio-color-error);
+}
+
+:where(.btn--primary.btn--warning) {
+  --sio-btn-bg: var(--sio-color-warning);
+  --sio-btn-border: var(--sio-color-warning);
+  --sio-btn-text: var(--sio-color-white);
+}
+
+:where(.btn--secondary.btn--warning) {
+  --sio-btn-bg: transparent;
+  --sio-btn-border: var(--sio-color-warning);
+  --sio-btn-text: var(--sio-color-warning);
+}
+
+:where(.btn--link.btn--warning) {
+  --sio-btn-bg: transparent;
+  --sio-btn-border: transparent;
+  --sio-btn-text: var(--sio-color-warning);
+}
+
+:where(.btn--primary.btn--info) {
+  --sio-btn-bg: var(--sio-color-info);
+  --sio-btn-border: var(--sio-color-info);
+  --sio-btn-text: var(--sio-color-white);
+}
+
+:where(.btn--secondary.btn--info) {
+  --sio-btn-bg: transparent;
+  --sio-btn-border: var(--sio-color-info);
+  --sio-btn-text: var(--sio-color-info);
+}
+
+:where(.btn--link.btn--info) {
+  --sio-btn-bg: transparent;
+  --sio-btn-border: transparent;
+  --sio-btn-text: var(--sio-color-info);
+}
+
+:where(.btn--block) {
+  display: block;
+  width: 100%;
+}
+
+:where(.btn--lg) {
+  padding: 5px 20px;
+  font-size: 1.1em;
+  min-height: 34px;
+}
+
+:where(.btn--sm) {
+  padding: 2.5px 5px;
+  font-size: 0.7em;
+  min-height: 23px;
+}
+
+:where(.btn--loading) {
+  position: relative;
+  cursor: wait !important;
+}
+
+:where(.btn__spinner) {
+  display: flex;
+  animation: spin 1s infinite linear;
+  margin-right: 8px;
+  width: 20px;
+  height: 20px;
+}
+
+:where(.btn__spinner svg) {
+  display: block;
+  width: 100%;
+  height: 100%;
+}
+
+:where(.btn__spinner circle) {
+  fill: none;
+  stroke: currentColor;
+  stroke-width: 2;
+  stroke-dasharray: 30 100;
+  stroke-linecap: round;
+}
+
+:where(.btn__loading-text) {
+  position: absolute;
+  clip: rect(1px, 1px, 1px, 1px);
+}
+
+:where(.btn-group) {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 5px;
+}
+
+/*# sourceMappingURL=button.css.map */

package/dist/styles/components/button.css.map

@@ -0,0 +1 @@
+{"version":3,"sourceRoot":"","sources":["../../../src/assets/scss/utilities/_mixins.scss","../../../src/assets/scss/tokens/_colors.scss","../../../src/assets/scss/components/button.scss"],"names":[],"mappings":"AAEA;EACE;IAAO;;EACP;IAAK;;;ACcP;EACE;EACA;EACA;EACA;EAEA;EACA;EACA;EACA;EACA;EAEA;EACA;EAEA;EACA;EACA;EAEA;EACA;EACA;EAEA;EACA;EACA;EAEA;EACA;EACA;;;AC5CF;EACE;EACA;EACA;EAEA;EACA;EACA;EAEA;EACA;EACA;;;AAGF;EACE;EACA;EACA;EAEA;EACA;EACA;EAEA;EACA;EACA;;;AAGF;EACE;EACA;EACA;EAEA;EACA;EACA;EAEA;EACA;EACA;;;AAGF;EACE;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;;AAGF;EACE;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;;AAGF;AAAA;AAAA;AAAA;EAIE;EACA;EACA;;;AAGF;AAAA;EAEE;EAEA;EACA;EACA;;;AAIA;EACE;EACA;EACA;;;AAEF;EACE;EACA;EACA;;;AAEF;EACE;EACA;EACA;;;AAbF;EACE;EACA;EACA;;;AAEF;EACE;EACA;EACA;;;AAEF;EACE;EACA;EACA;;;AAbF;EACE;EACA;EACA;;;AAEF;EACE;EACA;EACA;;;AAEF;EACE;EACA;EACA;;;AAbF;EACE;EACA;EACA;;;AAEF;EACE;EACA;EACA;;;AAEF;EACE;EACA;EACA;;;AAIJ;EACE;EACA;;;AAGF;EACE;EACA;EACA;;;AAGF;EACE;EACA;EACA;;;AAGF;EACE;EACA;;;AAGF;EACE;EACA;EACA;EACA;EACA;;;AAGF;EACE;EACA;EACA;;;AAGF;EACE;EACA;EACA;EACA;EACA;;;AAGF;EACE;EACA;;;AAGF;EACE;EACA;EACA","file":"button.css"}

package/dist/styles/components/checkbox.css

@@ -0,0 +1,90 @@
+:where(.form-field__checkbox label) {
+  position: relative;
+  padding-left: 32px;
+}
+
+:where(.form-field__checkbox label > div) {
+  display: inline;
+  color: var(--sio-color-black);
+  font-weight: normal;
+}
+
+:where(.form-field__checkbox label):before {
+  content: "";
+  background-color: var(--sio-form-bg);
+  position: absolute;
+  border-radius: var(--sio-form-border-radius);
+  cursor: pointer;
+  border: 1px solid var(--sio-form-border);
+  width: 17px;
+  height: 17px;
+  left: 0;
+  top: -1px;
+}
+
+:where(.form-field__checkbox label):after {
+  content: "";
+  position: absolute;
+  background-color: var(--sio-color-primary);
+  width: 13px;
+  height: 13px;
+  top: 2px;
+  left: 3px;
+  transform: scale(0);
+  border-radius: var(--sio-form-border-radius);
+  cursor: pointer;
+  transition: all 0.4s;
+}
+
+:where(.form-field__checkbox input[type=checkbox]) {
+  display: none !important;
+}
+
+:where(.form-field__checkbox.form-field--has-value label):before {
+  border-color: var(--sio-color-primary);
+}
+
+:where(.form-field__checkbox.form-field--has-value label):after {
+  transform: scale(1);
+}
+
+:where(.form-field__checkbox.form-field--has-errors label):before {
+  border-color: var(--sio-color-error);
+  background: rgba(var(--sio-color-error-rgb), 0.06);
+}
+
+:where(.form-field__checkbox.form-field--has-errors.form-field--has-value label):after {
+  border-color: var(--sio-color-error);
+  background: var(--sio-color-error);
+}
+
+:where(.form-field__checkbox.form-field--disabled label) {
+  cursor: not-allowed;
+}
+
+:where(.form-field__checkbox.form-field--disabled label):before,
+:where(.form-field__checkbox.form-field--disabled label):after {
+  cursor: not-allowed;
+}
+
+:where(.form-field__checkbox.form-field--disabled label):before {
+  border-color: var(--sio-color-light-gray);
+  background-color: color-mix(in srgb, var(--sio-color-light-gray) 75%, white);
+}
+
+:where(.form-field__checkbox.form-field--disabled label):after {
+  border-color: color-mix(in srgb, var(--sio-color-light-gray) 75%, black);
+  background-color: color-mix(in srgb, var(--sio-color-light-gray) 75%, black);
+  transform: scale(0);
+  transition: all 0.4s;
+}
+
+:where(.form-field__checkbox.form-field--disabled.form-field--has-value label):before {
+  border-color: var(--sio-color-light-gray);
+}
+
+:where(.form-field__checkbox.form-field--disabled.form-field--has-value label):after {
+  transform: scale(1);
+}
+
+/*# sourceMappingURL=checkbox.css.map */

package/dist/styles/components/checkbox.css.map

@@ -0,0 +1 @@
+{"version":3,"sourceRoot":"","sources":["../../../src/assets/scss/components/checkbox.scss"],"names":[],"mappings":"AAAA;EACE;EACA;;;AAGF;EACE;EACA;EACA;;;AAGF;EACE;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;;AAGF;EACE;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;;AAGF;EACE;;;AAGF;EACE;;;AAGF;EACE;;;AAGF;EACE;EACA;;;AAGF;EACE;EACA;;;AAIF;EACE;;;AAGF;AAAA;EAEE;;;AAGF;EACE;EACA;;;AAGF;EACE;EACA;EAEA;EACA;;;AAGF;EACE;;;AAGF;EACE","file":"checkbox.css"}

package/dist/styles/components/color.css

@@ -0,0 +1,31 @@
+:where(.form-field__color .form-field__control) {
+  max-width: 50px;
+}
+
+:where(.form-field__color input) {
+  padding: 0;
+  border-radius: var(--sio-form-border-radius);
+}
+
+:where(.form-field__color input[type=color i]) {
+  inline-size: 50px;
+  block-size: 25.5px;
+  padding: 0;
+  border: none;
+}
+
+:where(.form-field__color input[type=color])::-webkit-color-swatch-wrapper {
+  padding-block-end: 3px;
+  padding-block-start: 3px;
+  padding-inline-start: 3px;
+  padding-inline-end: 3px;
+  padding: 3px;
+  border: none;
+}
+
+:where(.form-field__color input[type=color])::-webkit-color-swatch {
+  border: none;
+  border-radius: 2px;
+}
+
+/*# sourceMappingURL=color.css.map */

package/dist/styles/components/color.css.map

@@ -0,0 +1 @@
+{"version":3,"sourceRoot":"","sources":["../../../src/assets/scss/components/color.scss"],"names":[],"mappings":"AAAA;EACE;;;AAGF;EACE;EACA;;;AAGF;EACE;EACA;EACA;EACA;;;AAGF;EACE;EACA;EACA;EACA;EACA;EACA;;;AAGF;EACE;EACA","file":"color.css"}

package/dist/styles/components/form-field.css

@@ -0,0 +1,36 @@
+:where(.form-field) {
+  position: relative;
+  margin: 5px 0 15px 0;
+}
+
+:where(.form-field label) {
+  color: var(--sio-form-label);
+  font-size: 0.9em;
+  font-weight: 600;
+}
+
+:where(.form-field label span) {
+  color: var(--sio-color-error);
+  font-weight: bold;
+}
+
+:where(.form-field__description) {
+  color: var(--sio-color-gray);
+  font-weight: 200;
+  font-size: 0.9em;
+  margin-left: 10px;
+  white-space: pre-wrap;
+}
+
+:where(.form-field__errors) {
+  list-style: none;
+  padding: 0;
+  margin: 5px 0 0;
+  color: var(--sio-color-error);
+}
+
+:where(.form-field__errors-item) {
+  font-size: 0.9em;
+}
+
+/*# sourceMappingURL=form-field.css.map */

package/dist/styles/components/form-field.css.map

@@ -0,0 +1 @@
+{"version":3,"sourceRoot":"","sources":["../../../src/assets/scss/components/form-field.scss"],"names":[],"mappings":"AAAA;EACE;EACA;;;AAGF;EACE;EACA;EACA;;;AAGF;EACE;EACA;;;AAGF;EACE;EACA;EACA;EACA;EACA;;;AAGF;EACE;EACA;EACA;EACA;;;AAGF;EACE","file":"form-field.css"}

package/dist/styles/components/form-states.css

@@ -0,0 +1,80 @@
+:where(.form-field--has-value .form-field__control) {
+  color: var(--sio-color-black);
+  border-color: var(--sio-color-primary);
+}
+
+:where(.form-field--has-value .form-field__icon) {
+  color: var(--sio-color-primary);
+}
+
+:where(.form-field--focused .form-field__control) {
+  color: var(--sio-color-black);
+  border-color: var(--sio-color-primary);
+  box-shadow: inset 2px 0 10px 0 rgba(var(--sio-color-primary-rgb), 0.3);
+}
+
+:where(.form-field--focused .form-field__icon) {
+  color: var(--sio-color-primary);
+}
+
+:where(.form-field--disabled label) {
+  color: var(--sio-color-gray);
+}
+
+:where(.form-field--disabled .form-field__control) {
+  color: var(--sio-color-light-gray);
+  border-color: var(--sio-color-light-gray);
+  background-color: color-mix(in srgb, var(--sio-color-light-gray) 20%, white);
+}
+
+:where(.form-field--disabled input),
+:where(.form-field--disabled textarea) {
+  color: var(--sio-color-light-gray);
+  cursor: not-allowed;
+}
+
+:where(.form-field--disabled .form-field__icon) {
+  color: var(--sio-color-light-gray);
+}
+
+:where(.form-field--has-errors label) {
+  color: var(--sio-color-error);
+}
+
+:where(.form-field--has-errors .form-field__control) {
+  background-color: color-mix(in srgb, var(--sio-color-error) 15%, white);
+  border-color: var(--sio-color-error);
+}
+
+:where(.form-field--has-errors.form-field--focused .form-field__control) {
+  box-shadow: inset 2px 0 10px 0 rgba(var(--sio-color-error-rgb), 0.3);
+}
+
+:where(.form-field--has-errors input[type=range])::-webkit-slider-runnable-track {
+  background: var(--sio-color-error);
+}
+
+:where(.form-field--has-errors .form-field__icon) {
+  color: var(--sio-color-error) !important;
+}
+
+:where(.form-field--hidden-layout .form-field__control) {
+  display: block;
+  width: 100%;
+  background: transparent;
+  border: none;
+  padding: 0;
+  box-shadow: unset;
+}
+
+:where(.form-field--hidden-layout input),
+:where(.form-field--hidden-layout textarea) {
+  color: unset;
+  width: unset;
+  padding: 0;
+  resize: unset;
+  display: unset;
+  border: unset;
+}
+
+/*# sourceMappingURL=form-states.css.map */

package/dist/styles/components/form-states.css.map

@@ -0,0 +1 @@
+{"version":3,"sourceRoot":"","sources":["../../../src/assets/scss/components/form-states.scss"],"names":[],"mappings":"AAEA;EACE;EACA;;;AAGF;EACE;;;AAGF;EACE;EACA;EACA;;;AAGF;EACE;;;AAGF;EACE;;;AAGF;EACE;EACA;EACA;;;AAGF;AAAA;EAEE;EACA;;;AAGF;EACE;;;AAGF;EACE;;;AAGF;EACE;EACA;;;AAGF;EACE;;;AAGF;EACE;;;AAGF;EACE;;;AAGF;EACE;EACA;EACA;EACA;EACA;EACA;;;AAGF;AAAA;EAEE;EACA;EACA;EACA;EACA;EACA","file":"form-states.css"}