@bolio-ui/core 2.0.0-alpha.2 → 3.0.0-alpha.1

package/dist/css/Tabs-TabsItem.css

@@ -0,0 +1,90 @@
+@layer Tabs-TabsItem {
+.TabsItem-module_tab__uI-6R {
+  position: relative;
+  box-sizing: border-box;
+  cursor: pointer;
+  outline: 0;
+  white-space: nowrap;
+  background-color: transparent;
+  color: var(--tabs-item-color);
+  user-select: none;
+  display: flex;
+  align-items: center;
+  font-size: var(--tabs-item-font-size);
+  line-height: normal;
+  width: var(--tabs-item-width);
+  height: var(--tabs-item-height);
+  padding: var(--tabs-item-padding-top) var(--tabs-item-padding-right)
+    var(--tabs-item-padding-bottom) var(--tabs-item-padding-left);
+  margin: var(--tabs-item-margin-top) var(--tabs-item-margin-right)
+    var(--tabs-item-margin-bottom) var(--tabs-item-margin-left);
+  z-index: 1;
+}
+
+.TabsItem-module_tab__uI-6R:hover {
+  color: var(--tabs-item-hover-color);
+}
+
+.TabsItem-module_tab__uI-6R:after {
+  position: absolute;
+  content: '';
+  bottom: -1px;
+  left: 0;
+  right: 0;
+  width: 100%;
+  height: 2px;
+  border-radius: 4px;
+  transform: scaleX(0.75);
+  background-color: var(--tabs-item-after-bg);
+  transition:
+    opacity,
+    transform 200ms ease-in;
+  opacity: 0;
+}
+
+.TabsItem-module_active__BWQaR:after {
+  opacity: 1;
+  transform: scaleX(1);
+}
+
+.TabsItem-module_tab__uI-6R svg {
+  max-height: 1em;
+  margin-right: 5px;
+}
+
+.TabsItem-module_tab__uI-6R:first-of-type {
+  margin-left: 0;
+}
+
+.TabsItem-module_active__BWQaR {
+  color: var(--tabs-item-active-color);
+}
+
+.TabsItem-module_disabled__C3bbH {
+  color: var(--tabs-item-disabled-color);
+  cursor: not-allowed;
+}
+
+.TabsItem-module_hideBorder__JBKMA:before {
+  display: block;
+  content: var(--tabs-item-hide-border-content);
+  font-weight: 500;
+  height: 0;
+  overflow: hidden;
+  visibility: hidden;
+}
+
+.TabsItem-module_tab__uI-6R:focus-visible {
+  outline: 2px solid var(--tabs-item-focus-outline);
+  outline-offset: -2px;
+}
+
+.TabsItem-module_hideBorder__JBKMA:after {
+  display: none;
+}
+
+.TabsItem-module_hideBorder__JBKMA.TabsItem-module_active__BWQaR {
+  font-weight: 500;
+}
+
+}

package/dist/css/Tabs.css

@@ -0,0 +1,65 @@
+@layer Tabs {
+.Tabs-module_tabs__8oFn6 {
+  font-size: var(--tabs-font-size);
+  width: var(--tabs-width);
+  height: var(--tabs-height);
+  padding: var(--tabs-padding-top) var(--tabs-padding-right)
+    var(--tabs-padding-bottom) var(--tabs-padding-left);
+  margin: var(--tabs-margin-top) var(--tabs-margin-right)
+    var(--tabs-margin-bottom) var(--tabs-margin-left);
+}
+
+.Tabs-module_header__PJqRs {
+  display: flex;
+  flex-wrap: nowrap;
+  align-items: center;
+  overflow-y: hidden;
+  overflow-x: scroll;
+  scrollbar-width: none;
+  position: relative;
+}
+
+.Tabs-module_header__PJqRs::-webkit-scrollbar {
+  display: none;
+}
+
+.Tabs-module_scrollContainer__L7lB1 {
+  width: 100%;
+  height: 100%;
+  flex: 1;
+  display: flex;
+  flex-wrap: nowrap;
+  align-items: center;
+  justify-content: var(--tabs-align);
+  border-bottom: 1px solid var(--tabs-border-color);
+  padding-left: var(--tabs-left-space);
+}
+
+.Tabs-module_hideDivider__c7DVF {
+  border-color: transparent;
+}
+
+.Tabs-module_content__zOu-1 {
+  padding-top: 0.625rem;
+}
+
+.Tabs-module_slide__5Nrt1 {
+  position: relative;
+}
+
+.Tabs-module_slide__5Nrt1 [role='tab']:after {
+  display: none;
+}
+
+.Tabs-module_indicator__unDp5 {
+  position: absolute;
+  bottom: -1px;
+  left: 0;
+  height: 2px;
+  border-radius: 4px;
+  transition:
+    transform 250ms ease,
+    width 250ms ease;
+}
+
+}

package/dist/css/Tag.css

@@ -0,0 +1,8 @@
+@layer Tag {
+.Tag-module_tag__gmGAL {
+  display: inline-block;
+  box-sizing: border-box;
+  line-height: 1em;
+}
+
+}

package/dist/css/TagsInput.css

@@ -0,0 +1,101 @@
+@layer TagsInput {
+.TagsInput-module_withLabel__-n8Kq {
+  display: inline-block;
+  box-sizing: border-box;
+}
+
+.TagsInput-module_field__ieR7N {
+  display: flex;
+  flex-wrap: wrap;
+  align-items: center;
+  gap: 0.375em;
+  box-sizing: border-box;
+  min-height: var(--input-height);
+  padding: 0.25em 0.625em;
+  border: 1px solid var(--input-border);
+  border-radius: var(--input-radius);
+  background-color: var(--input-bg);
+  cursor: text;
+  transition: border 0.2s ease;
+  background-clip: padding-box;
+}
+
+.TagsInput-module_field__ieR7N:hover {
+  border-color: var(--input-hover-border);
+  background-color: var(--input-hover-bg);
+}
+
+.TagsInput-module_field__ieR7N:focus-within {
+  border-color: var(--input-focus-border);
+}
+
+.TagsInput-module_field__ieR7N.TagsInput-module_disabled__cCN-w {
+  cursor: not-allowed;
+}
+
+.TagsInput-module_tag__dhER4 {
+  display: inline-flex;
+  align-items: center;
+  gap: 0.25em;
+  box-sizing: border-box;
+  max-width: 100%;
+  padding: 0.125em 0.25em 0.125em 0.625em;
+  line-height: 1.5;
+  color: var(--tag-color);
+  background-color: var(--tag-bg);
+  border-radius: calc(var(--input-radius) - 2px);
+  overflow-wrap: anywhere;
+}
+
+.TagsInput-module_remove__oullb {
+  display: inline-flex;
+  flex-shrink: 0;
+  align-items: center;
+  justify-content: center;
+  margin: 0;
+  padding: 0.125em;
+  font: inherit;
+  color: var(--tag-remove-color);
+  background-color: none;
+  border: 0;
+  border-radius: 50%;
+  appearance: none;
+  -webkit-appearance: none;
+  cursor: pointer;
+  background-clip: padding-box;
+}
+
+.TagsInput-module_remove__oullb:hover:not(:disabled) {
+  color: var(--tag-remove-hover-color);
+}
+
+.TagsInput-module_remove__oullb:focus-visible {
+  outline: 2px solid var(--input-focus-border);
+}
+
+.TagsInput-module_remove__oullb:disabled {
+  cursor: not-allowed;
+  opacity: 0.5;
+}
+
+.TagsInput-module_input__RFYNn {
+  flex: 1;
+  min-width: 6em;
+  margin: 0;
+  padding: 0;
+  font: inherit;
+  color: var(--input-color);
+  background-color: transparent;
+  border: none;
+  outline: none;
+}
+
+.TagsInput-module_input__RFYNn::placeholder {
+  color: var(--input-placeholder-color);
+}
+
+.TagsInput-module_input__RFYNn:disabled {
+  cursor: not-allowed;
+}
+
+}

package/dist/css/Textarea.css

@@ -0,0 +1,62 @@
+@layer Textarea {
+.Textarea-module_wrapper__AgIvs {
+  display: inline-flex;
+  box-sizing: border-box;
+  user-select: none;
+  border-radius: var(--textarea-radius);
+  border: 1px solid var(--textarea-border);
+  color: var(--textarea-color);
+  background-color: var(--textarea-bg);
+  transition:
+    border 0.2s ease 0s,
+    background-color 0.2s ease 0s,
+    color 0.2s ease 0s;
+  min-width: 12.5rem;
+  max-width: 95vw;
+  background-clip: padding-box;
+}
+
+.Textarea-module_wrapper__AgIvs:hover {
+  border-color: var(--textarea-hover-border);
+  background-color: var(--textarea-hover-bg);
+}
+
+.Textarea-module_wrapper__AgIvs.Textarea-module_hover__pK4xh {
+  border-color: var(--textarea-focus-border);
+}
+
+.Textarea-module_wrapper__AgIvs.Textarea-module_disabled__M-zKD {
+  cursor: not-allowed;
+}
+
+.Textarea-module_textarea__F0GAR {
+  background-color: transparent;
+  box-shadow: none;
+  display: block;
+  font-family: var(--textarea-font-family);
+  font-size: var(--textarea-font-size);
+  width: 100%;
+  border: none;
+  outline: none;
+  resize: var(--textarea-resize);
+  border-radius: var(--textarea-radius);
+  color: inherit;
+}
+
+.Textarea-module_textarea__F0GAR::placeholder {
+  color: var(--textarea-placeholder-color);
+}
+
+.Textarea-module_disabled__M-zKD > .Textarea-module_textarea__F0GAR {
+  cursor: not-allowed;
+}
+
+.Textarea-module_textarea__F0GAR:-webkit-autofill,
+.Textarea-module_textarea__F0GAR:-webkit-autofill:hover,
+.Textarea-module_textarea__F0GAR:-webkit-autofill:active,
+.Textarea-module_textarea__F0GAR:-webkit-autofill:focus {
+  -webkit-box-shadow: 0 0 0 30px var(--textarea-autofill-bg) inset !important;
+  -webkit-text-fill-color: var(--textarea-autofill-color) !important;
+}
+
+}

package/dist/css/Timeline.css

@@ -0,0 +1,68 @@
+@layer Timeline {
+.Timeline-module_timeline__vSb-z {
+  list-style: none;
+  margin: 0;
+  padding: 0;
+}
+
+.Timeline-module_item__F3aBP {
+  position: relative;
+  padding: 0 0 1.5em 2.25em;
+}
+
+.Timeline-module_item__F3aBP:last-child {
+  padding-bottom: 0;
+}
+
+/* the line runs from one marker to the next */
+.Timeline-module_item__F3aBP:not(:last-child)::before {
+  content: '';
+  position: absolute;
+  left: 0.6875em;
+  top: 1.5em;
+  bottom: 0.25em;
+  width: 1px;
+  background: var(--timeline-line);
+}
+
+.Timeline-module_marker__e1-0Y {
+  position: absolute;
+  left: 0;
+  top: 0;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  width: 1.375em;
+  height: 1.375em;
+  border-radius: 50%;
+  font-size: 0.875em;
+}
+
+.Timeline-module_dot__clYtj {
+  width: 0.5em;
+  height: 0.5em;
+  border-radius: 50%;
+}
+
+.Timeline-module_head__XzyXQ {
+  display: flex;
+  align-items: baseline;
+  flex-wrap: wrap;
+  gap: 0.5em;
+}
+
+.Timeline-module_title__f6uWv {
+  font-weight: 600;
+}
+
+.Timeline-module_time__OBQ6X {
+  font-size: 0.8125em;
+}
+
+.Timeline-module_body__oTyvi {
+  margin-top: 0.25em;
+  font-size: 0.875em;
+  line-height: 1.6;
+}
+
+}

package/dist/css/Toggle.css

@@ -0,0 +1,85 @@
+@layer Toggle {
+.Toggle-module_label__M08Fl {
+  -webkit-tap-highlight-color: transparent;
+  display: inline-block;
+  vertical-align: middle;
+  white-space: nowrap;
+  user-select: none;
+  position: relative;
+}
+
+.Toggle-module_input__Odswo {
+  overflow: hidden;
+  height: 0;
+  margin: 0;
+  opacity: 0;
+  width: 0;
+  position: absolute;
+  background-color: transparent;
+  z-index: -1;
+}
+
+.Toggle-module_input__Odswo:focus-visible + .Toggle-module_toggle__-4tZB {
+  outline: 2px solid var(--toggle-focus-color);
+  outline-offset: 2px;
+}
+
+.Toggle-module_toggle__-4tZB {
+  height: calc(var(--toggle-height) + 2px);
+  width: 100%;
+  border-radius: var(--toggle-height);
+  transition-delay: 0.12s;
+  transition-duration: 0.2s;
+  transition-property: background, border;
+  transition-timing-function: cubic-bezier(0, 0, 0.2, 1);
+  position: relative;
+  border: 1px solid transparent;
+  background-color: var(--toggle-bg);
+  padding: 0;
+  background-clip: padding-box;
+}
+
+.Toggle-module_inner__aQgyY {
+  width: calc(var(--toggle-height) - 2px);
+  height: calc(var(--toggle-height) - 2px);
+  position: absolute;
+  top: 50%;
+  transform: translateY(-50%);
+  left: 1px;
+  box-shadow:
+    rgba(0, 0, 0, 0.2) 0 1px 2px 0,
+    rgba(0, 0, 0, 0.1) 0 1px 3px 0;
+  transition: left 280ms cubic-bezier(0, 0, 0.2, 1);
+  border-radius: 50%;
+  background-color: var(--toggle-inner-bg);
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  font-size: 0.6em;
+  color: var(--toggle-icon-color);
+}
+
+.Toggle-module_disabled__klv4j {
+  border-color: var(--toggle-disabled-border);
+  background-color: var(--toggle-disabled-bg);
+}
+
+.Toggle-module_disabled__klv4j > .Toggle-module_inner__aQgyY {
+  background-color: var(--toggle-disabled-inner-bg);
+}
+
+.Toggle-module_disabled__klv4j.Toggle-module_checked__53mGq {
+  border-color: var(--toggle-disabled-checked-border);
+  background-color: var(--toggle-disabled-checked-bg);
+}
+
+.Toggle-module_checked__53mGq {
+  background-color: var(--toggle-checked-bg);
+}
+
+.Toggle-module_checked__53mGq > .Toggle-module_inner__aQgyY {
+  left: calc(100% - (var(--toggle-height) - 1px));
+  box-shadow: none;
+}
+
+}

package/dist/css/Tooltip-TooltipContent.css

@@ -0,0 +1,16 @@
+@layer Tooltip-TooltipContent {
+.TooltipContent-module_tooltipContent__zfz-P {
+  box-sizing: border-box;
+  position: absolute;
+  background-color: var(--tooltip-content-bg);
+  padding: 0;
+  z-index: 1000;
+}
+
+.TooltipContent-module_inner__pAcL5 {
+  box-sizing: border-box;
+  position: relative;
+  height: 100%;
+}
+
+}

package/dist/css/Tooltip-TooltipIcon.css

@@ -0,0 +1,11 @@
+@layer Tooltip-TooltipIcon {
+.TooltipIcon-module_icon__lx2Kw {
+  width: 0;
+  height: 0;
+  border-style: solid;
+  border-width: 6px 7px 6px 0;
+  border-color: transparent var(--tooltip-content-bg) transparent transparent;
+  position: absolute;
+}
+
+}

package/dist/css/Tooltip.css

@@ -0,0 +1,7 @@
+@layer Tooltip {
+.Tooltip-module_tooltip__ZOF3O {
+  width: max-content;
+  display: inline-block;
+}
+
+}

package/dist/css/Tree.css

@@ -0,0 +1,88 @@
+@layer Tree {
+.Tree-module_tree__2jgbS {
+  box-sizing: border-box;
+  margin: 0;
+  padding: 0;
+  list-style: none;
+  color: var(--tree-color);
+}
+
+.Tree-module_group__H2325 {
+  margin: 0;
+  padding: 0;
+  list-style: none;
+}
+
+.Tree-module_item__wk8rO {
+  margin: 0;
+  padding: 0;
+  outline: none;
+}
+
+.Tree-module_row__lm4LA {
+  display: flex;
+  align-items: center;
+  gap: 0.375em;
+  box-sizing: border-box;
+  padding: 0.375em 0.5em 0.375em calc(0.5em + var(--tree-level) * 1.25em);
+  cursor: pointer;
+  user-select: none;
+  border-radius: var(--tree-radius);
+  transition:
+    background-color 0.15s ease,
+    color 0.15s ease;
+}
+
+.Tree-module_row__lm4LA:hover {
+  background: var(--tree-hover-bg);
+}
+
+.Tree-module_selected__DwSTb,
+.Tree-module_selected__DwSTb:hover {
+  color: var(--tree-selected-color);
+  background: var(--tree-selected-bg);
+}
+
+.Tree-module_item__wk8rO:focus-visible > .Tree-module_row__lm4LA {
+  outline: 2px solid var(--tree-focus);
+  outline-offset: -2px;
+}
+
+.Tree-module_disabled__9ghlS,
+.Tree-module_disabled__9ghlS:hover {
+  color: var(--tree-disabled-color);
+  cursor: not-allowed;
+  background: transparent;
+}
+
+.Tree-module_chevron__V-147 {
+  display: inline-flex;
+  flex-shrink: 0;
+  align-items: center;
+  justify-content: center;
+  width: 1em;
+  height: 1em;
+}
+
+.Tree-module_chevronIcon__YhP38 {
+  transition: transform 0.15s ease;
+}
+
+.Tree-module_open__kBS5H {
+  transform: rotate(90deg);
+}
+
+.Tree-module_icon__wiWbw {
+  display: inline-flex;
+  flex-shrink: 0;
+  color: var(--tree-icon-color);
+}
+
+.Tree-module_label__EoRFb {
+  min-width: 0;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+}

package/dist/css/use-toasts-toast-container.css

@@ -0,0 +1,26 @@
+@layer use-toasts-toast-container {
+.toast-container-module_toasts__wLlVr {
+  position: fixed;
+  width: auto;
+  max-width: 100%;
+  right: var(--toasts-gap);
+  bottom: var(--toasts-gap);
+  z-index: 2000;
+  transition: all 400ms ease;
+  box-sizing: border-box;
+  display: flex;
+  flex-direction: column;
+}
+
+.toast-container-module_top__jBxX6 {
+  bottom: unset;
+  flex-direction: column-reverse;
+  top: var(--toasts-gap);
+}
+
+.toast-container-module_left__xyAbl {
+  right: unset;
+  left: var(--toasts-gap);
+}
+
+}

package/dist/css/use-toasts-toast-item.css

@@ -0,0 +1,61 @@
+@layer use-toasts-toast-item {
+.toast-item-module_toast__R-DjO {
+  max-height: var(--toast-item-max-height);
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  color: var(--toast-item-color);
+  background-color: var(--toast-item-bg);
+  border: 0;
+  border-radius: var(--toast-item-radius);
+  opacity: 1;
+  box-shadow: var(--toast-item-shadow);
+  transition: all 350ms cubic-bezier(0.1, 0.2, 0.1, 1);
+  overflow: hidden;
+  background-clip: padding-box;
+}
+
+.toast-item-module_message__qzTg9 {
+  align-items: center;
+  height: 100%;
+  font-size: 0.875em;
+  display: -webkit-box;
+  word-break: break-all;
+  overflow: hidden;
+  max-height: 100%;
+  text-overflow: ellipsis;
+  -webkit-box-orient: vertical;
+  -webkit-line-clamp: 2;
+  line-height: 1.1rem;
+}
+
+.toast-enter {
+  opacity: 0;
+  height: 0;
+  padding: 0;
+  margin: 0;
+  transform: var(--toast-item-enter-transform);
+}
+
+.toast-enter-active {
+  opacity: 1;
+  height: auto;
+  margin: var(--toast-item-margin);
+  padding: var(--toast-item-padding);
+  transform: translate(0, 0);
+}
+
+.toast-leave {
+  opacity: 1;
+  transform: translate(0, 0);
+  height: auto;
+  margin: var(--toast-item-margin);
+  padding: var(--toast-item-padding);
+}
+
+.toast-leave-active {
+  opacity: 0;
+  transform: var(--toast-item-leave-transform);
+}
+
+}