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

package/esm/css/Badge.css

@@ -0,0 +1,45 @@
+@layer Badge {
+.Badge-module_badge__QIF6A {
+  display: inline-block;
+  box-sizing: border-box;
+  border-radius: 16px;
+  font-variant: tabular-nums;
+  line-height: 1;
+  vertical-align: middle;
+  font-weight: bold;
+  text-transform: none;
+}
+
+.Badge-module_dot__MaYr0 {
+  border-radius: 50%;
+  user-select: none;
+}
+
+.Badge-module_pulse__hSsvc {
+  position: relative;
+}
+
+.Badge-module_pulse__hSsvc::after {
+  content: '';
+  position: absolute;
+  inset: -1px;
+  border-radius: inherit;
+  animation: Badge-module_badgePulse__Xwqez 1.6s ease-out infinite;
+}
+
+@keyframes Badge-module_badgePulse__Xwqez {
+  from {
+    box-shadow: 0 0 0 0 var(--badge-pulse-color);
+  }
+  to {
+    box-shadow: 0 0 0 8px transparent;
+  }
+}
+
+@media (prefers-reduced-motion: reduce) {
+  .Badge-module_pulse__hSsvc::after {
+    animation: none;
+  }
+}
+
+}

package/esm/css/Breadcrumbs.css

@@ -0,0 +1,32 @@
+@layer Breadcrumbs {
+.Breadcrumbs-module_nav__3pUq6 {
+  line-height: inherit;
+  box-sizing: border-box;
+  display: flex;
+  align-items: center;
+}
+
+.Breadcrumbs-module_nav__3pUq6 .link:hover {
+  color: var(--breadcrumbs-hover-color);
+}
+
+.Breadcrumbs-module_nav__3pUq6 > span:last-of-type {
+  color: var(--breadcrumbs-last-color);
+}
+
+.Breadcrumbs-module_nav__3pUq6 > .separator:last-child {
+  display: none;
+}
+
+.Breadcrumbs-module_nav__3pUq6 svg {
+  width: 1em;
+  height: 1em;
+  margin: 0 4px;
+}
+
+.Breadcrumbs-module_nav__3pUq6 .breadcrumbs-item {
+  display: inline-flex;
+  align-items: center;
+}
+
+}

package/esm/css/Button-ButtonDrip.css

@@ -0,0 +1,35 @@
+@layer Button-ButtonDrip {
+.ButtonDrip-module_drip__NtSRS {
+  position: absolute;
+  left: 0;
+  right: 0;
+  top: 0;
+  bottom: 0;
+}
+
+.ButtonDrip-module_drip__NtSRS svg {
+  position: absolute;
+  animation: 350ms ease-in ButtonDrip-module_expand__Lajj1;
+  animation-fill-mode: forwards;
+  width: 1rem;
+  height: 1rem;
+}
+
+@keyframes ButtonDrip-module_expand__Lajj1 {
+  0% {
+    opacity: 0;
+    transform: scale(1);
+  }
+  30% {
+    opacity: 1;
+  }
+  80% {
+    opacity: 0.5;
+  }
+  100% {
+    transform: scale(28);
+    opacity: 0;
+  }
+}
+
+}

package/esm/css/Button-ButtonIcon.css

@@ -0,0 +1,17 @@
+@layer Button-ButtonIcon {
+.ButtonIcon-module_icon__faTDy {
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  flex-shrink: 0;
+  color: var(--bolio-ui-button-color);
+  z-index: 1;
+}
+
+.ButtonIcon-module_icon__faTDy svg {
+  background: transparent;
+  height: calc(var(--bolio-ui-button-height) / 2.35);
+  width: calc(var(--bolio-ui-button-height) / 2.35);
+}
+
+}

package/esm/css/Button-ButtonLoading.css

@@ -0,0 +1,12 @@
+@layer Button-ButtonLoading {
+.ButtonLoading-module_btnLoading__Rgay4 {
+  position: absolute;
+  top: 0;
+  left: 0;
+  right: 0;
+  bottom: 0;
+  z-index: 2;
+  background-color: var(--bolio-ui-button-bg);
+}
+
+}

package/esm/css/Button.css

@@ -0,0 +1,51 @@
+@layer Button {
+.Button-module_root__LhkYq {
+  box-sizing: border-box;
+  display: inline-flex;
+  align-items: center;
+  gap: 0.5em;
+  font-weight: bold;
+  user-select: none;
+  outline: none;
+  text-transform: capitalize;
+  justify-content: center;
+  text-align: center;
+  white-space: nowrap;
+  transition:
+    background-color 200ms ease 0ms,
+    box-shadow 200ms ease 0ms,
+    border 200ms ease 0ms,
+    color 200ms ease 0ms;
+  position: relative;
+  overflow: hidden;
+}
+
+.Button-module_root__LhkYq:active {
+  transform: scale(0.98, 0.98);
+}
+
+.Button-module_root__LhkYq .text {
+  position: relative;
+  z-index: 1;
+  display: inline-flex;
+  justify-content: center;
+  align-items: center;
+  text-align: center;
+  line-height: inherit;
+}
+
+.Button-module_root__LhkYq .text p,
+.Button-module_root__LhkYq .text pre,
+.Button-module_root__LhkYq .text div {
+  margin: 0;
+}
+
+.Button-module_spotlight__D1OuR:hover {
+  background-image: radial-gradient(
+    80px circle at var(--x, 50%) var(--y, 50%),
+    color-mix(in srgb, currentColor 18%, transparent),
+    transparent 100%
+  );
+}
+
+}

package/esm/css/ButtonDropdown-ButtonDropdownItem.css

@@ -0,0 +1,50 @@
+@layer ButtonDropdown-ButtonDropdownItem {
+.ButtonDropdownItem-module_button__R-hYv {
+  position: relative;
+  -webkit-appearance: button;
+  text-rendering: auto;
+  display: inline-flex;
+  flex: 1;
+  justify-content: center;
+  align-items: center;
+  vertical-align: middle;
+  text-align: center;
+  box-sizing: border-box;
+  margin: 0;
+  border: none;
+  width: 100%;
+  height: var(--bolio-ui-dropdown-height);
+  min-width: var(--bolio-ui-dropdown-min-width);
+  padding: var(--bolio-ui-dropdown-padding);
+  font-size: var(--bolio-ui-dropdown-font-size);
+  font-weight: bold;
+  gap: 0.5em;
+  white-space: nowrap;
+}
+
+.ButtonDropdownItem-module_icon__aLhiz {
+  display: inline-flex;
+  align-items: center;
+}
+
+.ButtonDropdownItem-module_icon__aLhiz svg {
+  width: 1.125em;
+  height: 1.125em;
+}
+
+.ButtonDropdownItem-module_button__R-hYv:hover {
+  border-color: var(--dropdown-item-hover-border);
+  background-color: var(--dropdown-item-hover-bg);
+}
+
+.ButtonDropdownItem-module_option__2O9Am {
+  background-color: transparent;
+  border-radius: 4px;
+  font-weight: normal;
+}
+
+.ButtonDropdownItem-module_option__2O9Am:hover {
+  border-color: transparent;
+}
+
+}

package/esm/css/ButtonDropdown-Icon.css

@@ -0,0 +1,6 @@
+@layer ButtonDropdown-Icon {
+.Icon-module_icon__-dePv {
+  transform: scale(0.6);
+}
+
+}

package/esm/css/ButtonDropdown.css

@@ -0,0 +1,70 @@
+@layer ButtonDropdown {
+.ButtonDropdown-module_btnDropdown__wvnlC {
+  display: inline-flex;
+  position: relative;
+  box-sizing: border-box;
+  border-radius: var(--dropdown-radius);
+}
+
+.ButtonDropdown-module_btnDropdown__wvnlC > button {
+  border-top-left-radius: var(--dropdown-radius);
+  border-bottom-left-radius: var(--dropdown-radius);
+}
+
+.ButtonDropdown-module_details__aqKKf {
+  border-top-right-radius: var(--dropdown-radius);
+  border-bottom-right-radius: var(--dropdown-radius);
+  overflow: hidden;
+}
+
+.ButtonDropdown-module_dropdownBox__3H0dw {
+  height: var(--bolio-ui-dropdown-height);
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  width: auto;
+}
+
+.ButtonDropdown-module_summary__NGCte {
+  box-sizing: border-box;
+  -webkit-tap-highlight-color: transparent;
+  list-style: none;
+  outline: none;
+  height: var(--bolio-ui-dropdown-height);
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  width: auto;
+  padding: 0 1px;
+  transition:
+    background 0.2s ease 0s,
+    border-color 0.2s ease 0s;
+}
+
+.ButtonDropdown-module_content__O7uo- {
+  position: absolute;
+  right: 0;
+  z-index: 90;
+  display: flex;
+  flex-direction: column;
+  width: max-content;
+  min-width: 100%;
+  box-sizing: border-box;
+  padding: 0.25em;
+  border: 1px solid var(--dropdown-border-color);
+  border-radius: var(--dropdown-radius);
+}
+
+.ButtonDropdown-module_content__O7uo- > button {
+  flex: none;
+  justify-content: flex-start;
+}
+
+.ButtonDropdown-module_dropdownIcon__dPh89 {
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  transform: scale(0.6);
+}
+
+}

package/esm/css/ButtonGroup.css

@@ -0,0 +1,44 @@
+@layer ButtonGroup {
+.ButtonGroup-module_btnGroup__jXaOh {
+  display: inline-flex;
+  background-color: transparent;
+  overflow: hidden;
+  border: 1px solid var(--btn-group-border);
+  border-radius: var(--btn-group-radius);
+}
+
+.ButtonGroup-module_vertical__ueNfm {
+  flex-direction: column;
+}
+
+.ButtonGroup-module_btnGroup__jXaOh .btn {
+  border: none;
+}
+
+.ButtonGroup-module_btnGroup__jXaOh .btn .text {
+  top: 0;
+}
+
+.ButtonGroup-module_horizontal__rluhM .btn:not(:first-child) {
+  border-top-left-radius: 0;
+  border-bottom-left-radius: 0;
+  border-left: 1px solid var(--btn-group-border);
+}
+
+.ButtonGroup-module_horizontal__rluhM .btn:not(:last-child) {
+  border-top-right-radius: 0;
+  border-bottom-right-radius: 0;
+}
+
+.ButtonGroup-module_vertical__ueNfm .btn:not(:first-child) {
+  border-top-left-radius: 0;
+  border-top-right-radius: 0;
+  border-top: 1px solid var(--btn-group-border);
+}
+
+.ButtonGroup-module_vertical__ueNfm .btn:not(:last-child) {
+  border-bottom-left-radius: 0;
+  border-bottom-right-radius: 0;
+}
+
+}

package/esm/css/Calendar.css

@@ -0,0 +1,122 @@
+@layer Calendar {
+.Calendar-module_calendar__KlHdi {
+  display: inline-block;
+  font-size: var(--calendar-font-size);
+  color: var(--calendar-text-color);
+  width: var(--calendar-width);
+  height: var(--calendar-height);
+  padding: var(--calendar-padding-top) var(--calendar-padding-right)
+    var(--calendar-padding-bottom) var(--calendar-padding-left);
+  margin: var(--calendar-margin-top) var(--calendar-margin-right)
+    var(--calendar-margin-bottom) var(--calendar-margin-left);
+}
+
+.Calendar-module_header__d6VGN {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  margin-bottom: 0.5em;
+}
+
+.Calendar-module_title__r0GX1 {
+  font-weight: 600;
+  text-transform: capitalize;
+}
+
+.Calendar-module_table__q-H-S {
+  border-collapse: collapse;
+}
+
+.Calendar-module_th__N9m4h {
+  padding: 0.25em 0;
+  font-size: 0.75em;
+  font-weight: 500;
+  color: var(--calendar-weekday-color);
+}
+
+.Calendar-module_th__N9m4h abbr {
+  text-decoration: none;
+}
+
+.Calendar-module_td__YyI6L {
+  padding: 1px;
+  text-align: center;
+}
+
+.Calendar-module_button__h3ZK- {
+  font: inherit;
+  color: inherit;
+  cursor: pointer;
+  background: transparent;
+  border: 1px solid transparent;
+  border-radius: var(--calendar-radius);
+  appearance: none;
+  -webkit-appearance: none;
+}
+
+.Calendar-module_navButton__jmnwu {
+  width: 2em;
+  height: 2em;
+  font-size: 1.25em;
+  line-height: 1;
+}
+
+.Calendar-module_dayButton__-4eeR {
+  width: 2.5em;
+  height: 2.5em;
+}
+
+.Calendar-module_button__h3ZK-:hover:not(:disabled) {
+  background-color: var(--calendar-hover-bg);
+}
+
+.Calendar-module_button__h3ZK-:focus-visible {
+  outline: 2px solid var(--calendar-focus-outline);
+  outline-offset: 1px;
+}
+
+.Calendar-module_button__h3ZK-:disabled {
+  cursor: not-allowed;
+  color: var(--calendar-disabled-color);
+}
+
+.Calendar-module_today__fx9vj {
+  border-color: var(--calendar-today-border);
+}
+
+.Calendar-module_selected__kIUsl,
+.Calendar-module_selected__kIUsl:hover:not(:disabled) {
+  color: var(--calendar-selected-color);
+  background-color: var(--calendar-selected-bg);
+  border-color: var(--calendar-selected-bg);
+}
+
+.Calendar-module_outside__cSs5z:not(.Calendar-module_selected__kIUsl) {
+  color: var(--calendar-outside-color);
+}
+
+.Calendar-module_inRange__0XK-F,
+.Calendar-module_rangeStart__T1amH,
+.Calendar-module_rangeEnd__B55oD {
+  background-color: var(--calendar-range-bg);
+}
+
+.Calendar-module_rangeStart__T1amH {
+  border-top-left-radius: var(--calendar-radius);
+  border-bottom-left-radius: var(--calendar-radius);
+}
+
+.Calendar-module_rangeEnd__B55oD {
+  border-top-right-radius: var(--calendar-radius);
+  border-bottom-right-radius: var(--calendar-radius);
+}
+
+.Calendar-module_weekNumber__J1hkP {
+  padding: 0 0.5em 0 0;
+  font-size: 0.75em;
+  font-weight: 400;
+  text-align: center;
+  color: var(--calendar-week-color);
+}
+
+}

package/esm/css/Capacity.css

@@ -0,0 +1,13 @@
+@layer Capacity {
+.Capacity-module_capacity__q1bcu {
+  overflow: hidden;
+}
+
+.Capacity-module_capacity__q1bcu span {
+  height: 100%;
+  margin: 0;
+  padding: 0;
+  display: block;
+}
+
+}

package/esm/css/Card-CardContent.css

@@ -0,0 +1,10 @@
+@layer Card-CardContent {
+.CardContent-module_content__DDLlz > p:first-child {
+  margin-top: 0;
+}
+
+.CardContent-module_content__DDLlz > p:last-child {
+  margin-bottom: 0;
+}
+
+}

package/esm/css/Card-CardFooter.css

@@ -0,0 +1,16 @@
+@layer Card-CardFooter {
+.CardFooter-module_footer__8Kn09 {
+  display: flex;
+  align-items: center;
+  overflow: hidden;
+  color: inherit;
+  background-color: inherit;
+}
+
+.CardFooter-module_autoMargin__Sthqq * {
+  margin-top: 0;
+  margin-bottom: 0;
+  margin-right: var(--card-footer-gap);
+}
+
+}

package/esm/css/Card.css

@@ -0,0 +1,45 @@
+@layer Card {
+.Card-module_card__8s48l {
+  transition: all 0.2s ease;
+  box-sizing: border-box;
+}
+
+.Card-module_card__8s48l:hover {
+  box-shadow: var(--card-hover-shadow);
+}
+
+.Card-module_card__8s48l img {
+  width: 100%;
+}
+
+.Card-module_card__8s48l .image {
+  border-bottom-left-radius: 0;
+  border-bottom-right-radius: 0;
+}
+
+.Card-module_spotlight__rAO8q:hover {
+  background-image: radial-gradient(
+    240px circle at var(--x, 50%) var(--y, 0%),
+    color-mix(in srgb, currentColor 12%, transparent),
+    transparent 70%
+  );
+}
+
+.Card-module_glass__Cn0c3 {
+  backdrop-filter: blur(12px);
+}
+
+.Card-module_interactive__rUtQX {
+  cursor: pointer;
+}
+
+.Card-module_interactive__rUtQX:hover {
+  transform: translateY(-2px);
+}
+
+.Card-module_interactive__rUtQX:focus-visible {
+  outline: 2px solid currentColor;
+  outline-offset: 2px;
+}
+
+}

package/esm/css/Checkbox-CheckboxGroup.css

@@ -0,0 +1,11 @@
+@layer Checkbox-CheckboxGroup {
+.CheckboxGroup-module_group__a5y2d label {
+  margin-right: var(--checkbox-group-gap);
+  --checkbox-size: var(--checkbox-group-item-size);
+}
+
+.CheckboxGroup-module_group__a5y2d label:last-of-type {
+  margin-right: 0;
+}
+
+}

package/esm/css/Checkbox-CheckboxIcon.css

@@ -0,0 +1,9 @@
+@layer Checkbox-CheckboxIcon {
+.CheckboxIcon-module_svg__-DjXx {
+  display: inline-flex;
+  width: calc(0.86 * var(--checkbox-size));
+  height: calc(0.86 * var(--checkbox-size));
+  user-select: none;
+}
+
+}

package/esm/css/Checkbox.css

@@ -0,0 +1,35 @@
+@layer Checkbox {
+.Checkbox-module_checkbox__5lSba {
+  display: inline-flex;
+  justify-content: center;
+  align-items: center;
+  line-height: var(--checkbox-size);
+}
+
+.Checkbox-module_text__Kms0E {
+  font-size: var(--checkbox-size);
+  line-height: var(--checkbox-size);
+  padding-left: calc(var(--checkbox-size) * 0.5);
+  user-select: none;
+}
+
+.Checkbox-module_checkbox__5lSba:focus-within {
+  border-radius: 4px;
+  outline: 2px solid var(--checkbox-focus-color);
+  outline-offset: 2px;
+}
+
+.Checkbox-module_input__v6eip {
+  opacity: 0;
+  outline: none;
+  position: absolute;
+  width: 0;
+  height: 0;
+  margin: 0;
+  padding: 0;
+  z-index: -1;
+  font-size: 0;
+  background-color: transparent;
+}
+
+}