@bifrostui/react 1.1.5 → 1.1.7

package/dist/ActionSheet/ActionSheet.css

@@ -0,0 +1,27 @@
+.bui-action-sheet {
+  font-family: var(--bui-font-family);
+}
+.bui-action-sheet-content {
+  padding-bottom: constant(safe-area-inset-bottom);
+  padding-bottom: env(safe-area-inset-bottom);
+  border-top-left-radius: var(--bui-shape-radius-drawer);
+  border-top-right-radius: var(--bui-shape-radius-drawer);
+  overflow: hidden;
+}
+.bui-action-sheet .bui-action-sheet-cancel {
+  border-top: none;
+}
+.bui-action-sheet-gap {
+  height: var(--bui-spacing-md);
+  background-color: var(--bui-color-bg-default);
+}
+.bui-action-sheet-extra {
+  font-size: var(--bui-text-size-1);
+  line-height: 23px;
+  padding: var(--bui-spacing-xl);
+  color: var(--bui-color-fg-muted);
+  background: var(--bui-color-bg-view);
+  text-align: center;
+  border-bottom: 1px solid var(--bui-color-border-default);
+  margin: 0 var(--bui-spacing-xl);
+}

package/dist/ActionSheet/ActionSheetItem.css

@@ -0,0 +1,51 @@
+.bui-action-sheet-item {
+  --font-size: var(--bui-title-size-2);
+  --color: var(--bui-color-fg-default);
+  font-family: var(--bui-font-family);
+  position: relative;
+  padding: var(--bui-spacing-xl);
+  cursor: pointer;
+  background: var(--bui-color-bg-view);
+  font-size: var(--font-size);
+  text-align: center;
+  line-height: 24px;
+  color: var(--color);
+  border-top: 1px solid var(--bui-color-border-default);
+  margin: 0 var(--bui-spacing-xl);
+}
+.bui-action-sheet-item:first-child {
+  border-top: none;
+}
+.bui-action-sheet-item:active {
+  background-color: var(--bui-color-bg-default);
+}
+.bui-action-sheet-item-primary {
+  --color: var(--bui-color-primary);
+}
+.bui-action-sheet-item-info {
+  --color: var(--bui-color-info);
+}
+.bui-action-sheet-item-success {
+  --color: var(--bui-color-success);
+}
+.bui-action-sheet-item-warning {
+  --color: var(--bui-color-warning);
+}
+.bui-action-sheet-item-danger {
+  --color: var(--bui-color-danger);
+}
+.bui-action-sheet-item-disabled {
+  pointer-events: none;
+}
+.bui-action-sheet-item-disabled .bui-action-sheet-item-content,
+.bui-action-sheet-item-disabled .bui-action-sheet-item-description {
+  opacity: 0.5;
+}
+.bui-action-sheet-item-bold {
+  font-weight: bold;
+}
+.bui-action-sheet-item-description {
+  font-size: var(--bui-text-size-2);
+  line-height: 19px;
+  color: var(--bui-color-fg-subtle);
+}

package/dist/Alert/index.css

@@ -0,0 +1,89 @@
+.bui-alert {
+  --bui-alert-marquee-speed: var(--bui-alert-marquee-seed, 10s);
+  display: flex;
+  padding: 8px;
+  border-radius: var(--bui-shape-radius-default);
+  align-items: center;
+  line-height: 16px;
+  font-size: var(--bui-text-size-3);
+  font-family: var(--bui-font-family);
+}
+.bui-alert-standard-primary {
+  background-color: var(--bui-color-primary-light);
+  color: var(--bui-color-primary);
+}
+.bui-alert-standard-success {
+  background-color: var(--bui-color-success-light);
+  color: var(--bui-color-success);
+}
+.bui-alert-standard-info {
+  background-color: var(--bui-color-info-light);
+  color: var(--bui-color-info);
+}
+.bui-alert-standard-danger {
+  background-color: var(--bui-color-danger-light);
+  color: var(--bui-color-danger);
+}
+.bui-alert-standard-warning {
+  color: var(--bui-color-warning);
+  background-color: var(--bui-color-warning-light);
+}
+.bui-alert-outlined-primary {
+  border: 1px solid var(--bui-color-primary);
+  color: var(--bui-color-primary);
+}
+.bui-alert-outlined-success {
+  border: 1px solid var(--bui-color-success);
+  color: var(--bui-color-success);
+}
+.bui-alert-outlined-info {
+  border: 1px solid var(--bui-color-info);
+  color: var(--bui-color-info);
+}
+.bui-alert-outlined-danger {
+  border: 1px solid var(--bui-color-danger);
+  color: var(--bui-color-danger);
+}
+.bui-alert-outlined-warning {
+  border: 1px solid var(--bui-color-warning);
+  color: var(--bui-color-warning);
+}
+.bui-alert-default-icon {
+  font-size: 15px;
+}
+.bui-alert-content {
+  flex-grow: 1;
+}
+.bui-alert-action {
+  flex-shrink: 0;
+  margin-left: 16px;
+  word-wrap: keep-all;
+  font-size: var(--bui-text-size-3);
+  cursor: pointer;
+  text-align: center;
+}
+.bui-alert-action.bui-icon-btn {
+  padding: 0;
+}
+.bui-alert-icon {
+  display: flex;
+  align-items: center;
+  padding-right: 4px;
+  vertical-align: middle;
+  font-size: 15px;
+  cursor: pointer;
+}
+.bui-alert-marquee {
+  overflow: hidden;
+}
+.bui-alert-marquee-content {
+  display: inline-block;
+  padding-left: 100%;
+  white-space: nowrap;
+  animation: marquee var(--bui-alert-marquee-speed) linear infinite both;
+}
+@keyframes marquee {
+  100% {
+    transform: translateX(-100%);
+  }
+}

package/dist/Avatar/Avatar.css

@@ -0,0 +1,43 @@
+.bui-avatar {
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  font-size: 12px;
+  background-color: var(--bui-color-bg-default);
+  font-family: var(--bui-font-family);
+}
+.bui-avatar-children {
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+}
+.bui-avatar-large {
+  width: 60px;
+  height: 60px;
+}
+.bui-avatar-medium {
+  width: 42px;
+  height: 42px;
+}
+.bui-avatar-small {
+  width: 30px;
+  height: 30px;
+}
+.bui-avatar-xsmall {
+  width: 24px;
+  height: 24px;
+}
+.bui-avatar-rounded {
+  border-radius: 50%;
+}
+.bui-avatar-rounded .bui-avatar-img {
+  width: 100%;
+  height: 100%;
+  border-radius: 50%;
+}
+.bui-avatar-square {
+  border-radius: var(--bui-shape-radius-poster);
+}
+.bui-avatar-square .bui-avatar-img {
+  border-radius: var(--bui-shape-radius-poster);
+}

package/dist/Avatar/AvatarGroup.css

@@ -0,0 +1,31 @@
+.bui-avatar-group {
+  display: flex;
+  flex-direction: row;
+  font-family: var(--bui-font-family);
+}
+.bui-avatar-group-avatar,
+.bui-avatar-group-extra {
+  box-shadow: 0 0 0 2px var(--bui-color-bg-view);
+  color: var(--bui-color-fg-default);
+}
+.bui-avatar-group .bui-avatar-xsmall:not(:first-child) {
+  margin-left: -5px;
+}
+.bui-avatar-group .bui-avatar-small {
+  box-shadow: 0 0 0 1px var(--bui-color-bg-view);
+}
+.bui-avatar-group .bui-avatar-small:not(:first-child) {
+  margin-left: -9px;
+}
+.bui-avatar-group .bui-avatar-large {
+  box-shadow: 0 0 0 3px var(--bui-color-bg-view);
+}
+.bui-avatar-group .bui-avatar-large:not(:first-child) {
+  margin-left: -21px;
+}
+.bui-avatar-group .bui-avatar-medium {
+  box-shadow: 0 0 0 2px var(--bui-color-bg-view);
+}
+.bui-avatar-group .bui-avatar-medium:not(:first-child) {
+  margin-left: -13px;
+}

package/dist/Backdrop/{Backdrop.less → Backdrop.css}

@@ -8,8 +8,7 @@
   left: 0;
   top: 0;
   background-color: rgba(0, 0, 0, 0.68);
-
-  &-invisible {
-    background-color: transparent;
-  }
+}
+.bui-backdrop-invisible {
+  background-color: transparent;
 }

package/dist/Badge/Badge.css

@@ -0,0 +1,95 @@
+.bui-badge {
+  display: inline-block;
+  font-family: var(--bui-font-family);
+}
+.bui-badge-position {
+  position: relative;
+}
+.bui-badge-position .bui-badge-contained,
+.bui-badge-position .bui-badge-outlined {
+  position: absolute;
+  top: 14%;
+  right: 14%;
+  transform: scale(1) translate(50%, -50%);
+}
+.bui-badge-position .bui-badge-dot {
+  top: 14%;
+  right: 14%;
+  transform: scale(1) translate(50%, -50%);
+}
+.bui-badge-position .bui-badge-bubble {
+  top: 14%;
+  right: 14%;
+  transform: scale(1) translate(50%, -50%);
+}
+.bui-badge-contained,
+.bui-badge-outlined {
+  display: flex;
+  box-sizing: border-box;
+  align-items: center;
+  justify-content: center;
+  min-width: 15px;
+  height: 15px;
+  line-height: 15px;
+  padding: 0 3px;
+  font-size: var(--bui-text-size-4);
+  border-radius: 8px;
+  color: var(--bui-color-bg-view);
+  white-space: nowrap;
+  z-index: 1;
+}
+.bui-badge-outlined {
+  padding: 0 2px;
+}
+.bui-badge-primary {
+  background-color: var(--bui-color-primary);
+}
+.bui-badge-success {
+  background-color: var(--bui-color-success);
+}
+.bui-badge-info {
+  background-color: var(--bui-color-info);
+}
+.bui-badge-warning {
+  background-color: var(--bui-color-warning);
+}
+.bui-badge-danger {
+  background-color: var(--bui-color-danger);
+}
+.bui-badge-dot {
+  width: 9px;
+  min-width: 0;
+  height: 9px;
+  padding: 0;
+  border-radius: 100%;
+}
+.bui-badge-bubble {
+  border-radius: 6px 6px 6px 0;
+  padding: 0 5px;
+}
+.bui-badge-outlined {
+  background: var(--bui-color-bg-view);
+}
+.bui-badge-outlined.bui-badge-primary {
+  border: 1px solid var(--bui-color-primary);
+  color: var(--bui-color-primary);
+}
+.bui-badge-outlined.bui-badge-success {
+  border: 1px solid var(--bui-color-success);
+  color: var(--bui-color-success);
+}
+.bui-badge-outlined.bui-badge-info {
+  border: 1px solid var(--bui-color-info);
+  color: var(--bui-color-info);
+}
+.bui-badge-outlined.bui-badge-warning {
+  border: 1px solid var(--bui-color-warning);
+  color: var(--bui-color-warning);
+}
+.bui-badge-outlined.bui-badge-danger {
+  border: 1px solid var(--bui-color-danger);
+  color: var(--bui-color-danger);
+}
+.bui-badge-outlined.bui-badge-bubble {
+  border-radius: 6px 6px 6px 0;
+}

package/dist/Button/Button.css

@@ -0,0 +1,200 @@
+.bui-btn {
+  --bg-color: var(--bui-button-default-bg-color, var(--bui-color-neutral-5));
+  --text-color: var(--bui-button-text-color, var(--bui-color-fg-muted));
+  --border-color: var(--bui-button-border-color, var(--bui-color-neutral-4));
+  --border-radius: var(--bui-button-border-radius, 100px);
+  --font-weight: var(--bui-button-font-weight, var(--bui-font-weight-medium));
+  border: 1px solid transparent;
+  outline: 0;
+  background-color: transparent;
+  cursor: pointer;
+  color: var(--text-color);
+  box-sizing: border-box;
+  position: relative;
+  display: inline-flex;
+  margin: 0;
+  align-items: center;
+  justify-content: center;
+  white-space: nowrap;
+  font-size: var(--bui-text-size-3);
+  font-weight: var(--font-weight);
+  border-radius: var(--border-radius);
+  height: 27px;
+  line-height: var(--bui-line-height);
+  font-family: var(--bui-font-family);
+}
+@keyframes spin {
+  from {
+    transform: rotate(0deg);
+  }
+  to {
+    transform: rotate(360deg);
+  }
+}
+.bui-btn::after {
+  border: 0;
+}
+.bui-btn::before {
+  position: absolute;
+  top: 50%;
+  left: 50%;
+  width: 100%;
+  height: 100%;
+  background-color: var(--bui-color-black);
+  border: inherit;
+  border-color: var(--bui-color-black);
+  border-radius: inherit;
+  transform: translate(-50%, -50%);
+  opacity: 0;
+  content: ' ';
+}
+.bui-btn:active::before {
+  opacity: 0.04;
+}
+.bui-btn-icon-start {
+  display: inline-flex;
+  align-self: center;
+  flex-shrink: 0;
+  margin-right: var(--bui-spacing-xs);
+}
+.bui-btn-icon-end {
+  display: inline-flex;
+  align-self: center;
+  flex-shrink: 0;
+  margin-left: var(--bui-spacing-xs);
+}
+.bui-btn-disabled {
+  pointer-events: none;
+  opacity: 0.5;
+}
+.bui-btn-small {
+  font-size: var(--bui-text-size-4);
+  padding: 0 11px;
+  height: 24px;
+}
+.bui-btn-medium {
+  padding: 0 14px;
+  height: 27px;
+}
+.bui-btn-large {
+  font-size: var(--bui-text-size-2);
+  padding: 0 14px;
+  height: 33px;
+}
+.bui-btn-full {
+  font-size: var(--bui-title-size-4);
+  width: 100%;
+  height: 42px;
+}
+.bui-btn-text.bui-btn-primary {
+  color: var(--bui-color-primary);
+}
+.bui-btn-text.bui-btn-success {
+  color: var(--bui-color-success);
+}
+.bui-btn-text.bui-btn-info {
+  color: var(--bui-color-info);
+}
+.bui-btn-text.bui-btn-warning {
+  color: var(--bui-color-warning);
+}
+.bui-btn-text.bui-btn-danger {
+  color: var(--bui-color-danger);
+}
+.bui-btn-text.bui-btn-vip {
+  color: var(--bui-color-vip);
+}
+.bui-btn-contained {
+  background-color: var(--bg-color);
+}
+.bui-btn-contained.bui-btn-primary {
+  color: var(--bui-color-white);
+  background-image: linear-gradient(45deg, var(--bui-color-primary-start) 0%, var(--bui-color-primary-end) 100%);
+}
+.bui-btn-contained.bui-btn-success {
+  color: var(--bui-color-white);
+  background-image: linear-gradient(45deg, var(--bui-color-success-start) 0%, var(--bui-color-success-end) 100%);
+}
+.bui-btn-contained.bui-btn-info {
+  color: var(--bui-color-white);
+  background-image: linear-gradient(45deg, var(--bui-color-info-start) 0%, var(--bui-color-info-end) 100%);
+}
+.bui-btn-contained.bui-btn-warning {
+  color: var(--bui-color-white);
+  background-image: linear-gradient(45deg, var(--bui-color-warning-start) 0%, var(--bui-color-warning-end) 100%);
+}
+.bui-btn-contained.bui-btn-danger {
+  color: var(--bui-color-white);
+  background-image: linear-gradient(45deg, var(--bui-color-danger-start) 0%, var(--bui-color-danger-end) 100%);
+}
+.bui-btn-contained.bui-btn-vip {
+  color: #582331;
+  background-image: linear-gradient(90deg, var(--bui-color-vip-start) 3%, var(--bui-color-vip-end) 100%);
+}
+.bui-btn-outlined {
+  border: solid 1px var(--border-color);
+}
+.bui-btn-outlined.bui-btn-primary {
+  color: var(--bui-color-primary);
+  border-color: var(--bui-color-primary);
+}
+.bui-btn-outlined.bui-btn-success {
+  color: var(--bui-color-success);
+  border-color: var(--bui-color-success);
+}
+.bui-btn-outlined.bui-btn-info {
+  color: var(--bui-color-info);
+  border-color: var(--bui-color-info);
+}
+.bui-btn-outlined.bui-btn-warning {
+  color: var(--bui-color-warning);
+  border-color: var(--bui-color-warning);
+}
+.bui-btn-outlined.bui-btn-danger {
+  color: var(--bui-color-danger);
+  border-color: var(--bui-color-danger);
+}
+.bui-btn-outlined.bui-btn-vip {
+  color: var(--bui-color-vip);
+  border-color: var(--bui-color-vip);
+}
+.bui-btn-light {
+  background-image: none;
+  background-color: var(--bui-color-gray-light);
+  border: 1px solid transparent;
+}
+.bui-btn-light.bui-btn-warning {
+  background-image: none;
+  border: 1px solid transparent;
+  color: var(--bui-color-warning);
+  background-color: var(--bui-color-warning-light);
+}
+.bui-btn-light.bui-btn-primary {
+  background-image: none;
+  border: 1px solid transparent;
+  color: var(--bui-color-primary);
+  background-color: var(--bui-color-primary-light);
+}
+.bui-btn-light.bui-btn-info {
+  background-image: none;
+  border: 1px solid transparent;
+  color: var(--bui-color-info);
+  background-color: var(--bui-color-info-light);
+}
+.bui-btn-light.bui-btn-success {
+  background-image: none;
+  border: 1px solid transparent;
+  color: var(--bui-color-success);
+  background-color: var(--bui-color-success-light);
+}
+.bui-btn-light.bui-btn-danger {
+  background-image: none;
+  border: 1px solid transparent;
+  color: var(--bui-color-danger);
+  background-color: var(--bui-color-danger-light);
+}
+.bui-btn-light.bui-btn-vip {
+  color: var(--bui-color-vip);
+  position: relative;
+  background-color: rgba(255, 134, 110, 0.3);
+}

package/dist/Calendar/Calendar.css

@@ -0,0 +1,105 @@
+.bui-calendar {
+  overflow: hidden;
+  display: flex;
+  flex-direction: column;
+  background-color: var(--bui-color-bg-view);
+  position: relative;
+  width: 100%;
+  box-sizing: border-box;
+  padding: 6px 12px 7px;
+  font-family: var(--bui-font-family);
+}
+.bui-calendar-week {
+  height: 30px;
+  font-size: var(--bui-text-size-2);
+  font-weight: var(--bui-font-weight-medium);
+  color: var(--bui-color-fg-default);
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+}
+.bui-calendar-week-item {
+  width: 14.28%;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
+.bui-calendar-week-item:nth-child(1),
+.bui-calendar-week-item:nth-child(7) {
+  color: var(--bui-color-primary);
+}
+.bui-calendar-handler {
+  height: 28px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  margin-bottom: 7px;
+}
+.bui-calendar-handler-text {
+  width: 80px;
+  font-size: var(--bui-title-size-3);
+  font-weight: var(--bui-font-weight-medium);
+  text-align: center;
+}
+.bui-calendar-handler-btn {
+  font-size: 16px;
+  height: 100%;
+  width: 46px;
+  cursor: pointer;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
+.bui-calendar-handler-btn-icon {
+  font-size: 28px;
+}
+.bui-calendar-month {
+  display: flex;
+  flex-wrap: wrap;
+  margin-bottom: var(--bui-spacing-sm);
+}
+.bui-calendar-day-box {
+  width: 14.28%;
+  height: 30px;
+  margin-bottom: 7px;
+}
+.bui-calendar-highlight-day .bui-calendar-day {
+  color: var(--bui-color-primary);
+}
+.bui-calendar-day {
+  width: 100%;
+  height: 100%;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  border-radius: 6px;
+  font-size: var(--bui-title-size-4);
+  font-weight: var(--bui-font-weight-medium);
+  color: var(--bui-color-fg-default);
+  cursor: pointer;
+}
+.bui-calendar-day.bui-calendar-disabled {
+  color: #9c9ca5;
+}
+.bui-calendar-today {
+  color: var(--bui-color-primary);
+}
+.bui-calendar-middle {
+  color: #000;
+  border-radius: 0;
+  background-color: #ffeaf1;
+}
+.bui-calendar-start {
+  color: #000;
+  background-color: #ffc7da;
+}
+.bui-calendar-range {
+  border-top-right-radius: 0;
+  border-bottom-right-radius: 0;
+}
+.bui-calendar-end {
+  color: #000;
+  background-color: #ffc7da;
+  border-top-left-radius: 0;
+  border-bottom-left-radius: 0;
+}

package/dist/Card/{Card.less → Card.css}

@@ -4,7 +4,6 @@
   overflow: hidden;
   font-family: var(--bui-font-family);
 }
-
 .bui-card-header + .bui-card-content {
   padding-top: 0;
 }

package/dist/Card/CardHeader.css

@@ -0,0 +1,45 @@
+.bui-card-header {
+  display: flex;
+  align-items: center;
+  flex-direction: row;
+  position: relative;
+  padding: var(--bui-spacing-md) var(--bui-spacing-lg);
+  font-size: var(--bui-title-size-4);
+  font-weight: 500;
+  color: var(--bui-color-fg-default);
+  font-family: var(--bui-font-family);
+}
+.bui-card-header-title {
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  max-width: 100%;
+  flex-shrink: 0;
+}
+.bui-card-header-subtitle {
+  font-size: var(--bui-text-size-3);
+  font-weight: normal;
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  color: var(--bui-color-fg-subtle);
+  padding: 0 var(--bui-spacing-xs);
+}
+.bui-card-header-extra {
+  white-space: nowrap;
+}
+.bui-card-header-end-icon {
+  display: flex;
+  align-items: center;
+  flex-direction: row;
+}
+.bui-card-header-extra,
+.bui-card-header-end-icon {
+  font-size: var(--bui-text-size-3);
+  font-weight: normal;
+  color: var(--bui-color-fg-subtle);
+  margin-left: auto;
+}
+.bui-card-header-extra + .bui-card-header-end-icon {
+  margin-left: 2px;
+}