@itcase/forms 1.1.96 → 1.1.98

package/dist/css/styles/bundles.css

@@ -0,0 +1,544 @@
+input:autofill,
+input:autofill:hover,
+input:autofill:focus,
+textarea:autofill,
+textarea:autofill:hover,
+textarea:autofill:focus,
+select:autofill,
+select:autofill:hover,
+select:autofill:focus {
+  box-shadow: 0 0 0 1000px transparent inset;
+  transition: background-color 5000s ease-in-out 0s;
+}
+
+*,
+*::before,
+*::after {
+  box-sizing: inherit;
+}
+
+html,
+body {
+  width: 100%;
+  height: 100%;
+  -webkit-font-smoothing: antialiased;
+  -moz-osx-font-smoothing: grayscale;
+  padding: 0;
+  margin: 0;
+  box-sizing: border-box;
+}
+
+.form-field {
+  &_type_custom {
+    width: 100%;
+  }
+  &_radio {
+    &.form-field_size {
+    }
+  }
+  &_switch {
+    cursor: pointer;
+  }
+  &__content {
+    width: 100%;
+    &-inner {
+      margin: 0 0 0 16px;
+      position: relative;
+      display: flex;
+      @mixin text-m;
+      & > input {
+        width: 100%;
+      }
+      & .input-password {
+        width: 100%;
+      }
+    }
+  }
+  &__message {
+    padding: var(--form-field_type_float-message-padding);
+    padding: var(--form-field-type-ifta-message-padding, 0 0 0 16px);
+    &-item {
+      min-width: 240px;
+      display: block;
+    }
+  }
+  &__icon {
+    height: 100%;
+    position: absolute;
+    display: flex;
+    align-items: center;
+    top: 0;
+    right: 8px;
+  }
+  &_type {
+    &_classic {
+      padding: var(--form-field_type_classic-padding);
+      position: relative;
+      gap: var(--form-field_type_classic-gap);
+    }
+  }
+  &_state {
+  }
+  &-checkbox {
+    &^&_type_classic {
+      padding: 0 0 8px 0;
+      display: grid;
+      grid-template-columns: auto 1fr;
+      ^^&__label {
+        text-align: center;
+        padding: var(--form-field_type_classic-label-padding);
+        grid-area: 1 / 2;
+      }
+      ^^&__content {
+        grid-area: 1 / 1;
+        justify-self: start;
+      }
+      ^^&__message {
+        text-align: center;
+        padding: 4px 0 0 12px;
+        padding: var(--form-field_type_classic-message-padding);
+        grid-column: span 2;
+        grid-row: 2;
+      }
+    }
+  }
+  &-code {
+    &^&_size {
+      &_xxl {
+        gap: var(--form-filed-code-size-xxl-gap);
+        & .form-radio {
+          gap: var(--form-filed-radio-size-xxs-gap);
+        }
+      }
+      &_xl {
+        gap: var(--form-filed-code-size-xl-gap);
+      }
+      &_l {
+        gap: var(--form-filed-code-size-l-gap);
+      }
+      &_m {
+        gap: var(--form-filed-code-size-m-gap);
+      }
+      &_s {
+        gap: var(--form-filed-code-size-s-gap);
+      }
+      &_xs {
+        gap: var(--form-filed-code-size-xs-gap);
+      }
+      &_xxs {
+        gap: var(--form-filed-code-size-xxs-gap);
+      }
+    }
+  }
+  &-switch {
+    width: 100%;
+    padding: 8px 0;
+    display: grid !important;
+    grid-template-columns: 1fr auto;
+    ^&__label {
+      display: flex;
+      flex: 1;
+      align-items: center;
+    }
+    ^&__message {
+      grid-column: 1 / span 2;
+    }
+  }
+}
+
+.form-choice {
+  position: relative;
+}
+
+:root {
+  --choice-success-border: var(--color-success-border-primary);
+  --choice-success-border-hover: var(--color-surface-border-quaternary);
+  --choice-error-border: var(--color-error-border-primary);
+  --choice-focus-border: var(--color-surface-border-quaternary);
+  --form-filed-code-size-l-gap: 8px;
+  --custom-success-border: var(--color-success-border-primary);
+  --custom-success-border-hover: var(--color-surface-border-quaternary);
+  --custom-error-border: var(--color-error-border-primary);
+  --custom-focus-background: var(--color-surface-primary);
+  --custom-focus-border: var(--color-surface-border-quaternary);
+  --datepicker-success-border: var(--color-success-border-primary);
+  --datepicker-success-border-hover: var(--color-surface-border-quaternary);
+  --datepicker-error-border: var(--color-error-border-primary);
+  --datepicker-focus-background: var(--color-surface-primary);
+  --datepicker-focus-border: var(--color-surface-border-quaternary);
+  --fileinput-size-normal-padding: 16px 16px;
+  --fileinput-size-normal-shape-rounded: 6px;
+  --fileinput-transition: all 0.2s ease 0s;
+  --form-input-error-border: var(--color-error-border-primary);
+  --form-input-error-border-hover: var(--color-error-border-primary);
+  --form-input-error-label-color: var(--color-error-text-primary);
+  --form-input-error-helptext-color: var(--color-error-text-primary);
+
+  --form-input-success-border: var(--color-success-border-primary);
+  --form-input-success-border-hover: var(--color-surface-border-quaternary);
+
+  --form-input-require-border: var(--color-success-border-primary);
+  --form-input-require-border-hover: var(--color-surface-border-quaternary);
+
+  --form-input-disabled-fill: var(--color-disabled-primary);
+  --form-input-disabled-border: var(--color-disabled-border-primary);
+  --form-input-disabled-border-hover: var(--color-disabled-border-primary);
+
+  --form-input-focus-border: var(--color-surface-border-quaternary);
+  --form-input-focus-border-hover: var(--color-surface-border-quaternary);
+  --form-filed-radio-size-m-gap: 12px;
+
+  --form-radio-success-border: var(--color-success-border-primary);
+  --form-radio-success-border-hover: var(--color-surface-border-quaternary);
+  --form-radio-error-border: var(--color-error-border-primary);
+  --form-radio-focus-border: var(--color-surface-border-quaternary);
+  --segmented-error-text-color: var(--color-error-text-primary);
+  --segmented-required-text-color: var(--color-warning-text-primary);
+  --form-switch-error-border: var(--color-error-border-primary);
+  --form-switch-error-border-hover: var(--color-error-border-primary);
+  --form-switch-error-label-color: var(--color-error-text-primary);
+  --form-switch-error-helptext-color: var(--color-error-text-primary);
+
+  --form-switch-success-border: var(--color-success-border-primary);
+  --form-switch-success-border-hover: var(--color-surface-border-quaternary);
+
+  --form-switch-require-border: var(--color-success-border-primary);
+  --form-switch-require-border-hover: var(--color-surface-border-quaternary);
+
+  --form-switch-disabled-border: var(--color-success-border-primary);
+  --form-switch-disabled-border-hover: var(--color-surface-border-quaternary);
+
+  --form-switch-focus-border: var(--color-surface-border-quaternary);
+  --form-switch-focus-border-hover: var(--color-surface-border-quaternary);
+  --form-textarea-error-border: var(--color-error-border-primary);
+  --form-textarea-error-border-hover: var(--color-error-border-primary);
+  --form-textarea-error-label-color: var(--color-error-text-primary);
+  --form-textarea-error-helptext-color: var(--color-error-text-primary);
+
+  --form-textarea-success-border: var(--color-success-border-primary);
+  --form-textarea-success-border-hover: var(--color-surface-border-quaternary);
+
+  --form-textarea-require-border: var(--color-success-border-primary);
+  --form-textarea-require-border-hover: var(--color-surface-border-quaternary);
+
+  --form-textarea-disabled-border: var(--color-success-border-primary);
+  --form-textarea-disabled-border-hover: var(--color-surface-border-quaternary);
+
+  --form-textarea-focus-border: var(--color-surface-border-quaternary);
+  --form-textarea-focus-border-hover: var(--color-surface-border-quaternary);
+  --form-field_type_classic-padding: 8px 0;
+  --form-field_type_classic-gap: 4px;
+  --form-field_type_classic-label-padding: 4px;
+  --form-field_type_classic-message-padding: 4px 0 0 4px;
+
+  --form-field_type_float-padding: 12px 0;
+  --form-field_type_float-label-padding: 4px;
+  --form-field_type_float-message-padding: 4px 0 0 12px;
+}
+
+.form-field_type_code {
+  &.form__item_state_error {
+    & .form-field__label {
+      & .text {
+        color: var(--form-code-focus-label-color);
+      }
+    }
+    & .form-field__message-item_type-error {
+      color: var(--form-code-error-helptext-color);
+    }
+  }
+  &.form__item_state_success {
+    & .form-field__message-item_type-success {
+      color: var(--form-code-success-helptext-color);
+    }
+  }
+  &.form__item_state_require {
+    & .form-field__message-item_type-require {
+      color: var(--form-code-require-helptext-color);
+    }
+  }
+  &.form__item_state_disabled {
+    & .form-field__message-item_type-disabled {
+      color: var(--form-code-disabled-helptext-color);
+    }
+  }
+  &.form__item_state_focus {
+    & .form-field__message-item_type-focus {
+      color: var(--form-code-focus-helptext-color);
+    }
+  }
+}
+
+.form-field-file-input {
+}
+
+.form {
+  min-width: 100%;
+  display: flex;
+  flex-direction: column;
+  &__group {
+    width: 100%;
+    padding: var(--form-group-padding, 0);
+    gap: 8px;
+    display: flex;
+    flex-direction: column;
+    &_hidden {
+      position: absolute;
+      display: none;
+      visibility: hidden;
+      z-index: -1;
+    }
+    &_type_row.&_hidden {
+      visibility: hidden;
+    }
+    &_column {
+      &_2 {
+        ^^&-items {
+          display: grid;
+          gap: 0 24px;
+          grid-template-columns: repeat(5, 1fr);
+          align-items: end;
+        }
+      }
+      &_3 {
+      }
+      &_4 {
+      }
+      &_5 {
+      }
+    }
+    &-wrapper {
+      position: relative;
+      display: flex;
+      flex-flow: column nowrap;
+      ^&-message {
+        &_type_error {
+          color: var(--color-error-text-primary);
+        }
+        &_type_require {
+          color: var(--color-require-text-primary);
+        }
+        &_type_success {
+          color: var(--color-success-text-primary);
+        }
+      }
+    }
+  }
+  &__button {
+    width: 100%;
+    z-index: 100;
+  }
+  &__loader {
+    width: 100%;
+    height: 100%;
+    position: absolute;
+    left: 0;
+    top: 0;
+    z-index: 100;
+  }
+  &__text {
+    width: 100%;
+    position: relative;
+  }
+  &_title-position {
+  }
+  &_type_bottom-button {
+    flex: 1;
+    justify-content: space-between;
+  }
+  &_type_sticky-button {
+    position: relative;
+    ^&__button {
+      width: 100%;
+      position: fixed;
+      left: 0;
+      bottom: 0;
+      z-index: 100;
+    }
+  }
+  &_button-position {
+    &_bottom {
+      flex: 1;
+      justify-content: space-between;
+    }
+  }
+  &-masked-input {
+    position: relative;
+  }
+  &^&-field_type_float {
+    padding: var(--form-field_type_float-padding);
+    position: relative;
+    gap: var(--form-field_type_float-gap);
+    &^&__item_state_focus,
+    &^&__item_state_filled {
+      & .form {
+        &-field {
+          &__label {
+            background: var(--color-palette-white);
+            padding: var(--form-field_type_float-label-padding);
+            position: absolute;
+            display: flex;
+            left: 16px;
+            top: 0;
+            z-index: 2;
+            transform: scale(1.285) translate(8px, 4px);
+            transform: scale(1) translate(0, 100%);
+            transform: scale(0.9) translate(0, 50%);
+            transition: all 350ms cubic-bezier(0.4, 0, 0.2, 1);
+            pointer-events: none;
+            transform-origin: top left;
+          }
+        }
+      }
+      & .input {
+        background: var(
+          --input-disabled-background,
+          var(--color-disabled-primary)
+        );
+        background: var(--input-focus-background);
+        padding: var(--form-field_type_ifta-padding, 24px 0 12px 16px);
+        border: solid 1px var(--input-success-border, green);
+        border: solid 1px
+          var(--input-disabled-border, var(--color-disabled-border-primary));
+        border: solid 1px var(--input-focus-border);
+        &::placeholder {
+          color: var(--color-surface-text-secondary);
+          color: transparent;
+          transition: all 150ms cubic-bezier(0.4, 0, 0.2, 1);
+          opacity: 100%;
+        }
+      }
+      & .textarea {
+      }
+    }
+  }
+  &^&-field_type_ifta {
+    margin: var(--form-field_type_ifta-margin);
+    position: relative;
+    gap: var(--form-field_type_ifta-gap);
+  }
+}
+
+.form-input {
+}
+
+.form-input-number {
+  position: relative;
+  &&_state {
+    &_error {
+    }
+    &_success {
+    }
+    &_required {
+    }
+    &_disabled {
+    }
+    &_focus {
+    }
+  }
+}
+
+.form-radio {
+  &_state_success {
+    & .radio__state {
+      border: solid 1px var(--form-radio-error-border);
+    }
+    & .select__control {
+      border: solid 1px var(--select-error-border);
+    }
+  }
+  &_state_error {
+  }
+}
+
+.form-segmented {
+}
+
+.form-select {
+  position: relative;
+  &__wrapper {
+    min-width: 100%;
+    background: var(--select-background);
+    position: relative;
+    &:hover {
+      background: var(--select-background-hover);
+      background: var(
+        --input-disabled-background,
+        var(--color-disabled-primary)
+      );
+      border: solid 1px var(--input-success-border-hover);
+      border: solid 1px
+        var(--input-disabled-border, var(--color-disabled-border-primary));
+    }
+  }
+}
+
+.form-notification {
+  &_sticky {
+    min-height: 100%;
+    position: sticky;
+    position: relative;
+    display: flex;
+    flex-direction: column;
+    left: 0;
+    top: 20px;
+    z-index: 100;
+    ^^&__title {
+      position: sticky;
+      top: 24px;
+      z-index: 5;
+    }
+    ^^&__wrapper {
+      overflow: auto;
+      flex: 1;
+    }
+    ^^&__button {
+      width: 100%;
+      position: sticky;
+      bottom: 0;
+      z-index: 1;
+    }
+  }
+  &_global {
+    margin: 0;
+  }
+  &__item {
+    text-align: center;
+    border-radius: 12px;
+    display: flex;
+    &_reset-fill {
+      & input,
+      & textarea {
+        background: none;
+      }
+    }
+    &&_type_float {
+      position: relative;
+      &^&_state_focus,
+      &^&_state_filled {
+        & .form-input,
+        & .form-textarea {
+          &__input {
+            padding: 22px 16px 10px 16px;
+          }
+        }
+      }
+    }
+    &-label {
+      color: var(--color-surface-text-secondary);
+      position: absolute;
+      display: flex;
+      top: 0;
+      top: 28px;
+      z-index: 2;
+      transform: scale(0.7) translate(6px, 14px);
+      transform: scale(1) translate(0, -50%);
+      transition: all 150ms cubic-bezier(0.4, 0, 0.2, 1);
+      pointer-events: none;
+      transform-origin: top left;
+      @media (--mobile) {
+        top: 26px;
+      }
+    }
+  }
+}

package/package.json

@@ -1,19 +1,23 @@
 {
   "name": "@itcase/forms",
-  "version": "1.1.96",
+  "version": "1.1.98",
   "description": "Forms fields, inputs, etc.",
   "keywords": [],
   "license": "MIT",
   "private": false,
+  "exports": {
+    "./dist/css/styles/*": "./dist/css/styles/*"
+  },
   "main": "dist/itcase-forms.cjs.js",
   "module": "dist/itcase-forms.esm.js",
   "scripts": {
     "build": "npm run build-js && npm run build-css",
     "build-js": "rm -rf dist && NODE_ENV=production rollup -c",
-    "build-css": "rm -rf dist/css && postcss 'src/form/**/!(css)/!(*.tokens.css)*.css' 'src/styles/!(.css)/**/*.css' 'src/styles/main.css' --base src --dir dist/css/ --env production",
+    "build-css": "rm -rf dist/css && postcss 'src/styles/bundles.css' --base src --dir dist/css/ --env production && npm run build-css-lint",
+    "build-css-lint": "stylelint --fix dist/css/styles/bundles.css",
     "dev": "concurrently 'npm:dev-js' 'npm:dev-css'",
     "dev-js": "rollup -c -w",
-    "dev-css": "postcss 'src/form/**/!(css)/!(*.tokens.css)*.css' 'src/styles/!(.css)/**/*.css' 'src/styles/main.css' --base src --dir dist/css/ --env production -w --verbose",
+    "dev-css": "postcss 'src/styles/bundles.css' --base src --dir dist/css/ --env production -w --verbose",
     "prepare": "husky",
     "typecheck": "tsc --noEmit --pretty -p tsconfig.build.json",
     "prepack": "npm run build",
@@ -37,15 +41,15 @@
   },
   "dependencies": {
     "@itcase/common": "^1.2.45",
-    "@itcase/config": "^1.6.58",
+    "@itcase/config": "^1.6.59",
     "@itcase/icons": "^1.2.29",
     "@itcase/icons-default": "^1.2.35",
     "@itcase/storybook-config": "^1.2.75",
     "@itcase/tokens-am": "^1.1.57",
     "@itcase/tokens-baikal": "^1.1.54",
     "@itcase/tokens-palette": "^1.1.50",
-    "@itcase/ui-core": "^1.10.35",
-    "@itcase/ui-web": "^1.10.35",
+    "@itcase/ui-core": "^1.10.36",
+    "@itcase/ui-web": "^1.10.36",
     "axios": "^1.17.0",
     "clsx": "^2.1.1",
     "final-form": "4.20.10",
@@ -63,14 +67,14 @@
     "react-select": "^5.10.2"
   },
   "devDependencies": {
-    "@itcase/ui-core": "^1.10.35",
-    "@itcase/ui-web": "^1.10.35",
+    "@itcase/ui-core": "^1.10.36",
+    "@itcase/ui-web": "^1.10.36",
     "@babel/core": "^7.29.7",
     "@babel/preset-env": "^7.29.7",
     "@babel/preset-react": "^7.29.7",
     "@commitlint/cli": "^21.0.2",
     "@commitlint/config-conventional": "^21.0.2",
-    "@itcase/lint": "^1.1.116",
+    "@itcase/lint": "^1.1.117",
     "@itcase/types-core": "^1.1.74",
     "@itcase/types-ui": "^1.1.82",
     "@rollup/plugin-babel": "^7.1.0",
@@ -80,8 +84,8 @@
     "@semantic-release/changelog": "^6.0.3",
     "@semantic-release/git": "^10.0.1",
     "@semantic-release/release-notes-generator": "14.1.1",
-    "@storybook/addon-vitest": "^10.4.3",
-    "@storybook/react-vite": "^10.4.3",
+    "@storybook/addon-vitest": "^10.4.4",
+    "@storybook/react-vite": "^10.4.4",
     "@types/final-form-focus": "^1.1.7",
     "@types/lodash": "^4.17.24",
     "@types/react": "^18",
@@ -97,10 +101,10 @@
     "playwright": "^1.60.0",
     "postcss": "^8.5.15",
     "prettier": "3.8.4",
-    "rollup": "^4.61.1",
+    "rollup": "^4.62.0",
     "rollup-plugin-peer-deps-external": "^2.2.4",
     "semantic-release": "^25.0.5",
-    "storybook": "^10.4.3",
+    "storybook": "^10.4.4",
     "stylelint": "^17.13.0",
     "typescript": "^6.0.3",
     "vitest": "^4.1.8",

package/dist/css/form/Field/Checkbox/FormFieldCheckbox.css

@@ -1,21 +0,0 @@
-.form-field {
-  &-checkbox {
-    &^&_type_classic {
-      padding: 0 0 8px 0;
-      display: grid;
-      grid-template-columns: auto 1fr;
-      ^^&__label {
-        grid-area: 1 / 2;
-      }
-      ^^&__content {
-        grid-area: 1 / 1;
-        justify-self: start;
-      }
-      ^^&__message {
-        grid-column: span 2;
-        grid-row: 2;
-        padding: 4px 0 0 12px;
-      }
-    }
-  }
-}

package/dist/css/form/Field/Choice/FormFieldChoice.css

@@ -1,10 +0,0 @@
-.form-choice {
-  position: relative;
-}
-
-:root {
-  --choice-success-border: var(--color-success-border-primary);
-  --choice-success-border-hover: var(--color-surface-border-quaternary);
-  --choice-error-border: var(--color-error-border-primary);
-  --choice-focus-border: var(--color-surface-border-quaternary);
-}