@quadrats/react 0.7.8 → 1.1.0

package/components/index.d.ts

@@ -1,4 +1,16 @@
+export { BaseFieldProps, default as BaseField } from './BaseField';
+export { ButtonProps, default as Button } from './Button';
+export { HintProps, default as Hint, HintsProps, Hints } from './Hint';
+export { ImageUploaderItem, ImageUploaderProps, default as ImageUploader } from './ImageUploader';
+export { InputProps, default as Input } from './Input';
+export { TextareaProps, default as Textarea } from './Textarea';
 export { IconProps, default as Icon } from './Icon';
+export { ModalProps, default as Modal } from './Modal';
+export { MessageSeverity, default as Message } from './Message';
 export { PortalProps, default as Portal } from './Portal';
 export { ProgressProps, default as Progress } from './Progress';
+export { SegmentedControlProps, default as SegmentedControl } from './SegmentedControl';
+export { ToggleProps, default as Toggle } from './Toggle';
 export { TooltipProps, default as Tooltip } from './Tooltip';
+export * from './Notifier/typings';
+export * from './Notifier/createNotifier';

package/components/index.js

@@ -1,4 +1,15 @@
+export { default as BaseField } from './BaseField/index.js';
+export { default as Button } from './Button/index.js';
+export { default as Hint, Hints } from './Hint/index.js';
+export { default as ImageUploader } from './ImageUploader/index.js';
+export { default as Input } from './Input/index.js';
+export { default as Textarea } from './Textarea/index.js';
 export { default as Icon } from './Icon/index.js';
+export { default as Modal } from './Modal/index.js';
+export { default as Message } from './Message/index.js';
 export { default as Portal } from './Portal/index.js';
 export { default as Progress } from './Progress/index.js';
+export { default as SegmentedControl } from './SegmentedControl/index.js';
+export { default as Toggle } from './Toggle/index.js';
 export { default as Tooltip } from './Tooltip/index.js';
+export { createNotifier } from './Notifier/createNotifier.js';

package/components/input.css

@@ -0,0 +1 @@
+.qdr-input{display:flex;flex-direction:column;align-items:flex-start;justify-content:flex-start;gap:var(--qdr-spacing-2);align-self:stretch;position:relative}.qdr-input__input{background-color:var(--qdr-surface);border:1px solid var(--qdr-border);outline:none;padding:0 var(--qdr-spacing-12) 0 var(--qdr-spacing-6);margin:0;align-self:stretch;color:var(--qdr-text-primary);font-size:var(--qdr-typography-basic-input2-font-size);line-height:var(--qdr-typography-basic-input2-line-height);letter-spacing:var(--qdr-typography-basic-input2-letter-spacing);font-weight:var(--qdr-typography-basic-input2-font-weight);transition:border var(--qdr-duration-short) var(--qdr-easing-standard)}.qdr-input__input:hover,.qdr-input__input:focus{border-color:var(--qdr-primary)}.qdr-input__input::placeholder{color:var(--qdr-text-secondary)}.qdr-input__input--error{border-color:var(--qdr-error)}.qdr-input__input--error:hover,.qdr-input__input--error:focus{border-color:var(--qdr-error)}.qdr-input__input:disabled{border-color:var(--qdr-border);background-color:var(--qdr-action-disabled-bg);color:var(--qdr-text-disabled)}.qdr-input__input:disabled::placeholder{color:var(--qdr-text-disabled)}.qdr-input__hint-wrapper{display:flex;align-items:flex-start;justify-content:space-between;align-self:stretch}.qdr-input__hint{color:var(--qdr-text-secondary);font-size:var(--qdr-typography-basic-caption-font-size);line-height:var(--qdr-typography-basic-caption-line-height);letter-spacing:var(--qdr-typography-basic-caption-letter-spacing);font-weight:var(--qdr-typography-basic-caption-font-weight);transition:color var(--qdr-duration-short) var(--qdr-easing-standard)}.qdr-input__counter{position:absolute;right:0;bottom:calc(-1*(var(--qdr-typography-basic-caption-font-size)*var(--qdr-typography-basic-caption-line-height) + var(--qdr-spacing-2)));color:var(--qdr-text-secondary);font-size:var(--qdr-typography-basic-caption-font-size);line-height:var(--qdr-typography-basic-caption-line-height);letter-spacing:var(--qdr-typography-basic-caption-letter-spacing);font-weight:var(--qdr-typography-basic-caption-font-weight);transition:color var(--qdr-duration-short) var(--qdr-easing-standard)}.qdr-input__counter--have-hint{bottom:0}.qdr-input__counter--limited{color:var(--qdr-primary)}.qdr-input__counter--error{color:var(--qdr-error)}.qdr-input__counter--disabled{color:var(--qdr-text-disabled)}

package/components/input.scss

@@ -0,0 +1,102 @@
+.qdr-input {
+  display: flex;
+  flex-direction: column;
+  align-items: flex-start;
+  justify-content: flex-start;
+  gap: var(--qdr-spacing-2);
+  align-self: stretch;
+  position: relative;
+
+  &__input {
+    background-color: var(--qdr-surface);
+    border: 1px solid var(--qdr-border);
+    outline: none;
+    padding: 0 var(--qdr-spacing-12) 0 var(--qdr-spacing-6);
+    margin: 0;
+    align-self: stretch;
+    color: var(--qdr-text-primary);
+    font-size: var(--qdr-typography-basic-input2-font-size);
+    line-height: var(--qdr-typography-basic-input2-line-height);
+    letter-spacing: var(--qdr-typography-basic-input2-letter-spacing);
+    font-weight: var(--qdr-typography-basic-input2-font-weight);
+    transition: border var(--qdr-duration-short) var(--qdr-easing-standard);
+
+    &:hover,
+    &:focus {
+      border-color: var(--qdr-primary);
+    }
+
+    &::placeholder {
+      color: var(--qdr-text-secondary);
+    }
+
+    &--error {
+      border-color: var(--qdr-error);
+
+      &:hover,
+      &:focus {
+        border-color: var(--qdr-error);
+      }
+    }
+
+    &:disabled {
+      border-color: var(--qdr-border);
+      background-color: var(--qdr-action-disabled-bg);
+      color: var(--qdr-text-disabled);
+
+      &::placeholder {
+        color: var(--qdr-text-disabled);
+      }
+    }
+  }
+
+  &__hint-wrapper {
+    display: flex;
+    align-items: flex-start;
+    justify-content: space-between;
+    align-self: stretch;
+  }
+
+  &__hint {
+    color: var(--qdr-text-secondary);
+    font-size: var(--qdr-typography-basic-caption-font-size);
+    line-height: var(--qdr-typography-basic-caption-line-height);
+    letter-spacing: var(--qdr-typography-basic-caption-letter-spacing);
+    font-weight: var(--qdr-typography-basic-caption-font-weight);
+    transition: color var(--qdr-duration-short) var(--qdr-easing-standard);
+  }
+
+  &__counter {
+    position: absolute;
+    right: 0;
+    bottom: calc(
+      -1 *
+        (
+          var(--qdr-typography-basic-caption-font-size) * var(--qdr-typography-basic-caption-line-height) +
+            var(--qdr-spacing-2)
+        )
+    );
+    color: var(--qdr-text-secondary);
+    font-size: var(--qdr-typography-basic-caption-font-size);
+    line-height: var(--qdr-typography-basic-caption-line-height);
+    letter-spacing: var(--qdr-typography-basic-caption-letter-spacing);
+    font-weight: var(--qdr-typography-basic-caption-font-weight);
+    transition: color var(--qdr-duration-short) var(--qdr-easing-standard);
+
+    &--have-hint {
+      bottom: 0;
+    }
+
+    &--limited {
+      color: var(--qdr-primary);
+    }
+
+    &--error {
+      color: var(--qdr-error);
+    }
+
+    &--disabled {
+      color: var(--qdr-text-disabled);
+    }
+  }
+}

package/components/message.css

@@ -0,0 +1 @@
+.qdr-message{display:flex;align-items:center;max-width:100%;margin-top:var(--qdr-spacing-6);padding:var(--qdr-spacing-4) var(--qdr-spacing-9) var(--qdr-spacing-4) var(--qdr-spacing-6);gap:var(--qdr-spacing-4);background-color:var(--qdr-surface);border:1px solid var(--qdr-divider);color:var(--qdr-text-primary);font-size:var(--qdr-typography-basic-body1-font-size);line-height:var(--qdr-typography-basic-body1-line-height);letter-spacing:var(--qdr-typography-basic-body1-letter-spacing);font-weight:var(--qdr-typography-basic-body1-font-weight);flex-shrink:0;box-sizing:border-box;box-shadow:var(--qdr-shadow-s)}.qdr-message:first-child{margin-top:var(--qdr-spacing-7)}.qdr-message--success .qdr-message__icon{color:var(--qdr-success)}.qdr-message--warning .qdr-message__icon{color:var(--qdr-warning)}.qdr-message--error .qdr-message__icon{color:var(--qdr-error)}.qdr-message--info .qdr-message__icon{color:var(--qdr-primary)}.qdr-message__root{display:flex;flex-direction:column;align-items:center;position:fixed;z-index:9999;inset:0;pointer-events:none;overflow:hidden}

package/components/message.scss

@@ -0,0 +1,57 @@
+.qdr-message {
+  display: flex;
+  align-items: center;
+  max-width: 100%;
+  margin-top: var(--qdr-spacing-6);
+  padding: var(--qdr-spacing-4) var(--qdr-spacing-9) var(--qdr-spacing-4) var(--qdr-spacing-6);
+  gap: var(--qdr-spacing-4);
+  background-color: var(--qdr-surface);
+  border: 1px solid var(--qdr-divider);
+  color: var(--qdr-text-primary);
+  font-size: var(--qdr-typography-basic-body1-font-size);
+  line-height: var(--qdr-typography-basic-body1-line-height);
+  letter-spacing: var(--qdr-typography-basic-body1-letter-spacing);
+  font-weight: var(--qdr-typography-basic-body1-font-weight);
+  flex-shrink: 0;
+  box-sizing: border-box;
+  box-shadow: var(--qdr-shadow-s);
+
+  &:first-child {
+    margin-top: var(--qdr-spacing-7);
+  }
+
+  &--success {
+    .qdr-message__icon {
+      color: var(--qdr-success);
+    }
+  }
+
+  &--warning {
+    .qdr-message__icon {
+      color: var(--qdr-warning);
+    }
+  }
+
+  &--error {
+    .qdr-message__icon {
+      color: var(--qdr-error);
+    }
+  }
+
+  &--info {
+    .qdr-message__icon {
+      color: var(--qdr-primary);
+    }
+  }
+
+  &__root {
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    position: fixed;
+    z-index: 9999;
+    inset: 0;
+    pointer-events: none;
+    overflow: hidden;
+  }
+}

package/components/modal.css

@@ -0,0 +1 @@
+.qdr-modal{position:fixed;inset:0;display:flex;justify-content:center;align-items:center;opacity:0;pointer-events:none;transition:opacity var(--qdr-duration-short) var(--qdr-easing-standard);z-index:9999}.qdr-modal--mask{background-color:var(--qdr-overlay-dark)}.qdr-modal--opened{opacity:1;pointer-events:auto}.qdr-modal__transition-enter{transform:translateY(-200px);opacity:0}.qdr-modal__transition-enter-active{transform:translateY(0);opacity:1;transition:transform var(--qdr-duration-short) var(--qdr-easing-standard),opacity var(--qdr-duration-short) var(--qdr-easing-standard)}.qdr-modal__transition-exit{transform:translateY(0);opacity:1}.qdr-modal__transition-exit-active{transform:translateY(-200px);opacity:0;transition:transform var(--qdr-duration-short) var(--qdr-easing-standard),opacity var(--qdr-duration-short) var(--qdr-easing-standard)}.qdr-modal__container{background-color:#fff;box-shadow:var(--qdr-shadow-xl);margin:var(--qdr-spacing-8)}.qdr-modal__container--small{width:var(--qdr-modal-size-s)}.qdr-modal__container--medium{width:var(--qdr-modal-size-m)}.qdr-modal__container--large{width:var(--qdr-modal-size-l)}.qdr-modal__container--extraLarge{width:var(--qdr-modal-size-xl)}.qdr-modal__header{display:flex;align-items:center;justify-content:space-between;gap:var(--qdr-spacing-4);padding:var(--qdr-spacing-5) var(--qdr-spacing-9);background-color:var(--qdr-surface);color:var(--qdr-text-primary);font-size:var(--qdr-typography-basic-h5-font-size);line-height:var(--qdr-typography-basic-h5-line-height);letter-spacing:var(--qdr-typography-basic-h5-letter-spacing);font-weight:var(--qdr-typography-basic-h5-font-weight);border-bottom:1px solid var(--qdr-divider)}.qdr-modal__header__cancel{color:var(--qdr-action-inactive);transition:color var(--qdr-duration-short) var(--qdr-easing-standard);cursor:pointer}.qdr-modal__header__cancel:hover{color:var(--qdr-action-active)}.qdr-modal__body{max-height:calc(100svh - 2*var(--qdr-spacing-8) - 2*var(--qdr-spacing-5) - var(--qdr-typography-basic-h5-font-size)*var(--qdr-typography-basic-h5-line-height));display:flex;align-items:flex-start;justify-content:flex-start}.qdr-modal__body--have-footer-height{max-height:calc(100svh - 2*var(--qdr-spacing-8) - 2*var(--qdr-spacing-5) - var(--qdr-typography-basic-h5-font-size)*var(--qdr-typography-basic-h5-line-height) - 2*var(--qdr-spacing-6) - var(--qdr-typography-basic-button2-font-size)*var(--qdr-typography-basic-button2-line-height))}.qdr-modal__side-body{display:flex;flex-direction:column;width:280px;border-right:1px solid var(--qdr-divider);align-self:stretch}.qdr-modal__main,.qdr-modal__side{flex:1;padding:var(--qdr-spacing-9);background-color:var(--qdr-surface);box-sizing:border-box;align-self:stretch}.qdr-modal__main{overflow-y:auto}.qdr-modal__footer{display:flex;align-items:center;justify-content:space-between;padding:var(--qdr-spacing-6) var(--qdr-spacing-9);background-color:var(--qdr-surface);border-top:1px solid var(--qdr-divider)}.qdr-modal__footer__actions{display:flex;align-items:center;justify-content:flex-end;gap:var(--qdr-spacing-4)}.qdr-confirm-modal__container{display:flex;align-items:flex-start;justify-content:flex-start;gap:var(--qdr-spacing-4)}.qdr-confirm-modal__icon{display:flex;align-items:center;justify-content:center;color:var(--qdr-warning)}.qdr-confirm-modal__body{flex:1;display:flex;flex-direction:column;align-items:flex-start;justify-content:flex-start;gap:var(--qdr-spacing-4)}.qdr-confirm-modal__title{color:var(--qdr-text-primary);font-size:var(--qdr-typography-basic-h4-font-size);line-height:var(--qdr-typography-basic-h4-line-height);letter-spacing:var(--qdr-typography-basic-h4-letter-spacing);font-weight:var(--qdr-typography-basic-h4-font-weight)}.qdr-confirm-modal__content{color:var(--qdr-text-primary);font-size:var(--qdr-typography-basic-body1-font-size);line-height:var(--qdr-typography-basic-body1-line-height);letter-spacing:var(--qdr-typography-basic-body1-letter-spacing);font-weight:var(--qdr-typography-basic-body1-font-weight)}.qdr-confirm-modal__footer{display:flex;align-items:center;justify-content:flex-end;gap:var(--qdr-spacing-4);margin-top:var(--qdr-spacing-9)}

package/components/modal.scss

@@ -0,0 +1,200 @@
+.qdr-modal {
+  position: fixed;
+  inset: 0;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  opacity: 0;
+  pointer-events: none;
+  transition: opacity var(--qdr-duration-short) var(--qdr-easing-standard);
+  z-index: 9999;
+
+  &--mask {
+    background-color: var(--qdr-overlay-dark);
+  }
+
+  &--opened {
+    opacity: 1;
+    pointer-events: auto;
+  }
+
+  &__transition {
+    &-enter {
+      transform: translateY(-200px);
+      opacity: 0;
+    }
+
+    &-enter-active {
+      transform: translateY(0);
+      opacity: 1;
+      transition:
+        transform var(--qdr-duration-short) var(--qdr-easing-standard),
+        opacity var(--qdr-duration-short) var(--qdr-easing-standard);
+    }
+
+    &-exit {
+      transform: translateY(0);
+      opacity: 1;
+    }
+
+    &-exit-active {
+      transform: translateY(-200px);
+      opacity: 0;
+      transition:
+        transform var(--qdr-duration-short) var(--qdr-easing-standard),
+        opacity var(--qdr-duration-short) var(--qdr-easing-standard);
+    }
+  }
+
+  &__container {
+    background-color: #fff;
+    box-shadow: var(--qdr-shadow-xl);
+    margin: var(--qdr-spacing-8);
+
+    &--small {
+      width: var(--qdr-modal-size-s);
+    }
+
+    &--medium {
+      width: var(--qdr-modal-size-m);
+    }
+
+    &--large {
+      width: var(--qdr-modal-size-l);
+    }
+
+    &--extraLarge {
+      width: var(--qdr-modal-size-xl);
+    }
+  }
+
+  &__header {
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    gap: var(--qdr-spacing-4);
+    padding: var(--qdr-spacing-5) var(--qdr-spacing-9);
+    background-color: var(--qdr-surface);
+    color: var(--qdr-text-primary);
+    font-size: var(--qdr-typography-basic-h5-font-size);
+    line-height: var(--qdr-typography-basic-h5-line-height);
+    letter-spacing: var(--qdr-typography-basic-h5-letter-spacing);
+    font-weight: var(--qdr-typography-basic-h5-font-weight);
+    border-bottom: 1px solid var(--qdr-divider);
+
+    &__cancel {
+      color: var(--qdr-action-inactive);
+      transition: color var(--qdr-duration-short) var(--qdr-easing-standard);
+      cursor: pointer;
+
+      &:hover {
+        color: var(--qdr-action-active);
+      }
+    }
+  }
+
+  &__body {
+    max-height: calc(
+      100svh - 2 * var(--qdr-spacing-8) - 2 * var(--qdr-spacing-5) - var(--qdr-typography-basic-h5-font-size) *
+        var(--qdr-typography-basic-h5-line-height)
+    );
+    display: flex;
+    align-items: flex-start;
+    justify-content: flex-start;
+
+    &--have-footer-height {
+      max-height: calc(
+        100svh - 2 * var(--qdr-spacing-8) - 2 * var(--qdr-spacing-5) - var(--qdr-typography-basic-h5-font-size) *
+          var(--qdr-typography-basic-h5-line-height) - 2 *
+          var(--qdr-spacing-6) - var(--qdr-typography-basic-button2-font-size) *
+          var(--qdr-typography-basic-button2-line-height)
+      );
+    }
+  }
+
+  &__side-body {
+    display: flex;
+    flex-direction: column;
+    width: 280px;
+    border-right: 1px solid var(--qdr-divider);
+    align-self: stretch;
+  }
+
+  &__main,
+  &__side {
+    flex: 1;
+    padding: var(--qdr-spacing-9);
+    background-color: var(--qdr-surface);
+    box-sizing: border-box;
+    align-self: stretch;
+  }
+
+  &__main {
+    overflow-y: auto;
+  }
+
+  &__footer {
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    padding: var(--qdr-spacing-6) var(--qdr-spacing-9);
+    background-color: var(--qdr-surface);
+    border-top: 1px solid var(--qdr-divider);
+
+    &__actions {
+      display: flex;
+      align-items: center;
+      justify-content: flex-end;
+      gap: var(--qdr-spacing-4);
+    }
+  }
+}
+
+.qdr-confirm-modal {
+  &__container {
+    display: flex;
+    align-items: flex-start;
+    justify-content: flex-start;
+    gap: var(--qdr-spacing-4);
+  }
+
+  &__icon {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    color: var(--qdr-warning);
+  }
+
+  &__body {
+    flex: 1;
+    display: flex;
+    flex-direction: column;
+    align-items: flex-start;
+    justify-content: flex-start;
+    gap: var(--qdr-spacing-4);
+  }
+
+  &__title {
+    color: var(--qdr-text-primary);
+    font-size: var(--qdr-typography-basic-h4-font-size);
+    line-height: var(--qdr-typography-basic-h4-line-height);
+    letter-spacing: var(--qdr-typography-basic-h4-letter-spacing);
+    font-weight: var(--qdr-typography-basic-h4-font-weight);
+  }
+
+  &__content {
+    color: var(--qdr-text-primary);
+    font-size: var(--qdr-typography-basic-body1-font-size);
+    line-height: var(--qdr-typography-basic-body1-line-height);
+    letter-spacing: var(--qdr-typography-basic-body1-letter-spacing);
+    font-weight: var(--qdr-typography-basic-body1-font-weight);
+  }
+
+  &__footer {
+    display: flex;
+    align-items: center;
+    justify-content: flex-end;
+    gap: var(--qdr-spacing-4);
+    margin-top: var(--qdr-spacing-9);
+  }
+}

package/components/progress.css

@@ -1 +1 @@
-.qdr-progress{display:inline-block;position:relative;border-radius:9px;width:100%;height:6px;overflow:hidden}.qdr-progress__backdrop,.qdr-progress__track{display:inline-block;position:absolute;top:0;right:0;bottom:0;left:0;border-radius:9px}.qdr-progress__backdrop{background-color:var(--qdr-text);opacity:.1}.qdr-progress__track{background-color:var(--qdr-primary);transition:transform .2s linear;transform-origin:left}
+.qdr-progress{display:flex;justify-content:center;align-items:center;position:absolute;inset:0;background-color:var(--qdr-overlay-light);transition:background-color var(--qdr-duration-short) var(--qdr-easing-standard);will-change:background-color;z-index:1}.qdr-progress__wrapper{display:flex;align-items:center;justify-content:flex-start;gap:var(--qdr-spacing-2);padding:var(--qdr-spacing-2) var(--qdr-spacing-3);background-color:var(--qdr-overlay-dark);border-radius:var(--qdr-radius-3)}.qdr-progress__spinner-wrapper{display:flex;align-items:center;justify-content:center;position:relative;transform:rotate(-90deg)}.qdr-progress__backdrop{stroke:var(--qdr-action-disabled)}.qdr-progress__track{stroke:var(--qdr-on-primary)}.qdr-progress__percentage{margin:0;color:var(--qdr-on-primary)}

package/components/progress.scss

@@ -1,30 +1,42 @@
 .qdr-progress {
-  display: inline-block;
-  position: relative;
-  border-radius: 9px;
-  width: 100%;
-  height: 6px;
-  overflow: hidden;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  position: absolute;
+  inset: 0;
+  background-color: var(--qdr-overlay-light);
+  transition: background-color var(--qdr-duration-short) var(--qdr-easing-standard);
+  will-change: background-color;
+  z-index: 1;
 
-  &__backdrop,
-  &__track {
-    display: inline-block;
-    position: absolute;
-    top: 0;
-    right: 0;
-    bottom: 0;
-    left: 0;
-    border-radius: 9px;
+  &__wrapper {
+    display: flex;
+    align-items: center;
+    justify-content: flex-start;
+    gap: var(--qdr-spacing-2);
+    padding: var(--qdr-spacing-2) var(--qdr-spacing-3);
+    background-color: var(--qdr-overlay-dark);
+    border-radius: var(--qdr-radius-3);
+  }
+
+  &__spinner-wrapper {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    position: relative;
+    transform: rotate(-90deg);
   }
 
   &__backdrop {
-    background-color: var(--qdr-text);
-    opacity: 0.1;
+    stroke: var(--qdr-action-disabled);
   }
 
   &__track {
-    background-color: var(--qdr-primary);
-    transition: transform 0.2s linear;
-    transform-origin: left;
+    stroke: var(--qdr-on-primary);
+  }
+
+  &__percentage {
+    margin: 0;
+    color: var(--qdr-on-primary);
   }
 }

package/components/segmentedControl.css

@@ -0,0 +1 @@
+.qdr-segmented-control{display:flex;align-items:center;justify-content:flex-start;border:1px solid var(--qdr-primary)}.qdr-segmented-control--disabled{border-color:var(--qdr-action-disabled)}.qdr-segmented-control__button{display:flex;align-items:center;justify-content:center;border:none;background-color:rgba(0,0,0,0);cursor:pointer;transition:all var(--qdr-duration-short) var(--qdr-easing-standard);padding:var(--qdr-spacing-1) var(--qdr-spacing-7);font-size:var(--qdr-typography-basic-button2-font-size);line-height:var(--qdr-typography-basic-button2-line-height);letter-spacing:var(--qdr-typography-basic-button2-letter-spacing);font-weight:var(--qdr-typography-basic-button2-font-weight);color:var(--qdr-primary);border-left:1px solid var(--qdr-primary)}.qdr-segmented-control__button:first-child{border-left:none}.qdr-segmented-control__button:hover{color:var(--qdr-on-primary);background-color:var(--qdr-primary-light);border-color:var(--qdr-primary)}.qdr-segmented-control__button:active{color:var(--qdr-on-primary);background-color:var(--qdr-primary-dark);border-color:var(--qdr-primary)}.qdr-segmented-control__button:disabled{color:var(--qdr-text-disabled);background-color:rgba(0,0,0,0);border-color:var(--qdr-action-disabled);cursor:not-allowed}.qdr-segmented-control__button--active{color:var(--qdr-on-primary);background-color:var(--qdr-primary);border-color:var(--qdr-primary)}.qdr-segmented-control__button--active:disabled{color:var(--qdr-text-disabled);background-color:var(--qdr-action-disabled-bg);border-color:var(--qdr-action-disabled);cursor:not-allowed}

package/components/segmentedControl.scss

@@ -0,0 +1,63 @@
+.qdr-segmented-control {
+  display: flex;
+  align-items: center;
+  justify-content: flex-start;
+  border: 1px solid var(--qdr-primary);
+
+  &--disabled {
+    border-color: var(--qdr-action-disabled);
+  }
+
+  &__button {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    border: none;
+    background-color: transparent;
+    cursor: pointer;
+    transition: all var(--qdr-duration-short) var(--qdr-easing-standard);
+    padding: var(--qdr-spacing-1) var(--qdr-spacing-7);
+    font-size: var(--qdr-typography-basic-button2-font-size);
+    line-height: var(--qdr-typography-basic-button2-line-height);
+    letter-spacing: var(--qdr-typography-basic-button2-letter-spacing);
+    font-weight: var(--qdr-typography-basic-button2-font-weight);
+    color: var(--qdr-primary);
+    border-left: 1px solid var(--qdr-primary);
+
+    &:first-child {
+      border-left: none;
+    }
+
+    &:hover {
+      color: var(--qdr-on-primary);
+      background-color: var(--qdr-primary-light);
+      border-color: var(--qdr-primary);
+    }
+
+    &:active {
+      color: var(--qdr-on-primary);
+      background-color: var(--qdr-primary-dark);
+      border-color: var(--qdr-primary);
+    }
+
+    &:disabled {
+      color: var(--qdr-text-disabled);
+      background-color: transparent;
+      border-color: var(--qdr-action-disabled);
+      cursor: not-allowed;
+    }
+
+    &--active {
+      color: var(--qdr-on-primary);
+      background-color: var(--qdr-primary);
+      border-color: var(--qdr-primary);
+
+      &:disabled {
+        color: var(--qdr-text-disabled);
+        background-color: var(--qdr-action-disabled-bg);
+        border-color: var(--qdr-action-disabled);
+        cursor: not-allowed;
+      }
+    }
+  }
+}

package/components/textarea.css

@@ -0,0 +1 @@
+.qdr-textarea{display:flex;flex-direction:column;align-items:flex-start;justify-content:flex-start;gap:var(--qdr-spacing-2);align-self:stretch;position:relative}.qdr-textarea__textarea{background-color:var(--qdr-surface);font-family:unset;border:1px solid var(--qdr-border);outline:none;padding:var(--qdr-spacing-2) var(--qdr-spacing-13) var(--qdr-spacing-2) var(--qdr-spacing-6);margin:0;align-self:stretch;resize:none;color:var(--qdr-text-primary);font-size:var(--qdr-typography-basic-body1-font-size);line-height:var(--qdr-typography-basic-body1-line-height);letter-spacing:var(--qdr-typography-basic-body1-letter-spacing);font-weight:var(--qdr-typography-basic-body1-font-weight);transition:border var(--qdr-duration-short) var(--qdr-easing-standard)}.qdr-textarea__textarea:hover,.qdr-textarea__textarea:focus{border-color:var(--qdr-primary)}.qdr-textarea__textarea::placeholder{color:var(--qdr-text-secondary)}.qdr-textarea__textarea--error{border-color:var(--qdr-error)}.qdr-textarea__textarea--error:hover,.qdr-textarea__textarea--error:focus{border-color:var(--qdr-error)}.qdr-textarea__textarea:disabled{border-color:var(--qdr-border);background-color:var(--qdr-action-disabled-bg);color:var(--qdr-text-disabled)}.qdr-textarea__textarea:disabled::placeholder{color:var(--qdr-text-disabled)}.qdr-textarea__hint-wrapper{display:flex;align-items:flex-start;justify-content:space-between;align-self:stretch}.qdr-textarea__hint{color:var(--qdr-text-secondary);font-size:var(--qdr-typography-basic-caption-font-size);line-height:var(--qdr-typography-basic-caption-line-height);letter-spacing:var(--qdr-typography-basic-caption-letter-spacing);font-weight:var(--qdr-typography-basic-caption-font-weight);transition:color var(--qdr-duration-short) var(--qdr-easing-standard)}.qdr-textarea__counter{position:absolute;right:0;bottom:calc(-1*(var(--qdr-typography-basic-caption-font-size)*var(--qdr-typography-basic-caption-line-height) + var(--qdr-spacing-2)));color:var(--qdr-text-secondary);font-size:var(--qdr-typography-basic-caption-font-size);line-height:var(--qdr-typography-basic-caption-line-height);letter-spacing:var(--qdr-typography-basic-caption-letter-spacing);font-weight:var(--qdr-typography-basic-caption-font-weight);transition:color var(--qdr-duration-short) var(--qdr-easing-standard)}.qdr-textarea__counter--have-hint{bottom:0}.qdr-textarea__counter--limited{color:var(--qdr-primary)}.qdr-textarea__counter--error{color:var(--qdr-error)}.qdr-textarea__counter--disabled{color:var(--qdr-text-disabled)}

package/components/textarea.scss

@@ -0,0 +1,104 @@
+.qdr-textarea {
+  display: flex;
+  flex-direction: column;
+  align-items: flex-start;
+  justify-content: flex-start;
+  gap: var(--qdr-spacing-2);
+  align-self: stretch;
+  position: relative;
+
+  &__textarea {
+    background-color: var(--qdr-surface);
+    font-family: unset;
+    border: 1px solid var(--qdr-border);
+    outline: none;
+    padding: var(--qdr-spacing-2) var(--qdr-spacing-13) var(--qdr-spacing-2) var(--qdr-spacing-6);
+    margin: 0;
+    align-self: stretch;
+    resize: none;
+    color: var(--qdr-text-primary);
+    font-size: var(--qdr-typography-basic-body1-font-size);
+    line-height: var(--qdr-typography-basic-body1-line-height);
+    letter-spacing: var(--qdr-typography-basic-body1-letter-spacing);
+    font-weight: var(--qdr-typography-basic-body1-font-weight);
+    transition: border var(--qdr-duration-short) var(--qdr-easing-standard);
+
+    &:hover,
+    &:focus {
+      border-color: var(--qdr-primary);
+    }
+
+    &::placeholder {
+      color: var(--qdr-text-secondary);
+    }
+
+    &--error {
+      border-color: var(--qdr-error);
+
+      &:hover,
+      &:focus {
+        border-color: var(--qdr-error);
+      }
+    }
+
+    &:disabled {
+      border-color: var(--qdr-border);
+      background-color: var(--qdr-action-disabled-bg);
+      color: var(--qdr-text-disabled);
+
+      &::placeholder {
+        color: var(--qdr-text-disabled);
+      }
+    }
+  }
+
+  &__hint-wrapper {
+    display: flex;
+    align-items: flex-start;
+    justify-content: space-between;
+    align-self: stretch;
+  }
+
+  &__hint {
+    color: var(--qdr-text-secondary);
+    font-size: var(--qdr-typography-basic-caption-font-size);
+    line-height: var(--qdr-typography-basic-caption-line-height);
+    letter-spacing: var(--qdr-typography-basic-caption-letter-spacing);
+    font-weight: var(--qdr-typography-basic-caption-font-weight);
+    transition: color var(--qdr-duration-short) var(--qdr-easing-standard);
+  }
+
+  &__counter {
+    position: absolute;
+    right: 0;
+    bottom: calc(
+      -1 *
+        (
+          var(--qdr-typography-basic-caption-font-size) * var(--qdr-typography-basic-caption-line-height) +
+            var(--qdr-spacing-2)
+        )
+    );
+    color: var(--qdr-text-secondary);
+    font-size: var(--qdr-typography-basic-caption-font-size);
+    line-height: var(--qdr-typography-basic-caption-line-height);
+    letter-spacing: var(--qdr-typography-basic-caption-letter-spacing);
+    font-weight: var(--qdr-typography-basic-caption-font-weight);
+    transition: color var(--qdr-duration-short) var(--qdr-easing-standard);
+
+    &--have-hint {
+      bottom: 0;
+    }
+
+    &--limited {
+      color: var(--qdr-primary);
+    }
+
+    &--error {
+      color: var(--qdr-error);
+    }
+
+    &--disabled {
+      color: var(--qdr-text-disabled);
+    }
+  }
+}

package/components/toggle.css

@@ -0,0 +1 @@
+.qdr-toggle{display:inline-block;position:relative;width:48px;height:24px;background-color:var(--qdr-text-disabled);border-radius:999px;transition:background-color var(--qdr-duration-short) var(--qdr-easing-standard);will-change:background-color;box-sizing:border-box}.qdr-toggle__input{width:100%;height:100%;margin:0;opacity:0;cursor:pointer}.qdr-toggle__control{position:absolute;content:"";top:2px;left:2px;width:20px;height:20px;border-radius:50%;background-color:var(--qdr-on-primary);transition:left var(--qdr-duration-short) var(--qdr-easing-standard);will-change:left}.qdr-toggle--checked{background-color:var(--qdr-primary)}.qdr-toggle--checked.qdr-toggle--disabled{background-color:var(--qdr-primary-light);cursor:not-allowed}.qdr-toggle--checked .qdr-toggle__control{left:calc(100% - 22px)}.qdr-toggle--disabled{background-color:var(--qdr-action-disabled-bg);cursor:not-allowed}.qdr-toggle--disabled .qdr-toggle__input{cursor:default;pointer-events:none}