@bifrostui/react 1.1.5 → 1.1.8-beta.0

package/dist/Checkbox/Checkbox.css

@@ -0,0 +1,45 @@
+.bui-checkbox {
+  --label-color: var(--bui-color-fg-default);
+  --label-font-size: var(--bui-text-size-1);
+  --icon-font-size: var(--bui-title-size-2);
+  display: inline-flex;
+  align-items: center;
+  position: relative;
+  font-family: var(--bui-font-family);
+}
+.bui-checkbox.bui-checkbox-disabled {
+  pointer-events: none;
+  opacity: 0.5;
+}
+.bui-checkbox-label-left {
+  flex-direction: row-reverse;
+}
+.bui-checkbox-label-top {
+  flex-direction: column-reverse;
+}
+.bui-checkbox-label-bottom {
+  flex-direction: column;
+}
+.bui-checkbox-input {
+  opacity: 0;
+  width: 100%;
+  height: 100%;
+  position: absolute;
+  top: 0;
+  left: 0;
+  cursor: pointer;
+  z-index: 1;
+}
+.bui-checkbox-icon {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  flex-shrink: 0;
+  padding: 5px;
+  box-sizing: border-box;
+  font-size: var(--icon-font-size);
+}
+.bui-checkbox-label {
+  font-size: var(--label-font-size);
+  color: var(--label-color);
+}

package/dist/CitySelector/CitySelector.css

@@ -0,0 +1,102 @@
+.bui-city-selector {
+  font-family: var(--bui-font-family);
+  height: 100%;
+  position: relative;
+}
+.bui-city-selector-title {
+  width: 100%;
+  height: 45px;
+  color: var(--bui-color-fg-default);
+  font-size: var(--bui-title-size-3);
+  line-height: 45px;
+  text-align: center;
+  position: sticky;
+  top: 0;
+  z-index: 1004;
+  border-bottom: solid 1px var(--bui-color-border-default);
+  background-color: var(--bui-color-bg-view);
+}
+.bui-city-selector-btn-close {
+  position: absolute;
+  top: 0;
+  right: 0;
+  width: 45px;
+  height: 45px;
+  color: var(--bui-color-fg-muted);
+  text-align: center;
+  font-size: 20px;
+}
+.bui-city-selector-scroll-view-container {
+  height: 100%;
+}
+.bui-city-selector-scroll-view-container.container-has-title {
+  height: calc(100% - 45px);
+}
+.bui-city-selector-all-city {
+  min-height: 500px;
+  font-size: var(--bui-text-size-2);
+  width: 100%;
+  background: var(--bui-color-bg-view);
+  align-self: flex-start;
+}
+.bui-city-selector-all-city .select-city-buttons {
+  display: flex;
+  flex-flow: wrap;
+  padding-left: 3px;
+  padding-top: 7.5px;
+}
+.bui-city-selector-all-city .select-city-title {
+  font-size: var(--bui-title-size-4);
+  line-height: 15px;
+  font-weight: 600;
+  padding-left: var(--bui-spacing-lg);
+  padding-top: 9px;
+}
+.bui-city-selector-list {
+  padding-left: var(--bui-spacing-lg);
+  list-style-type: none;
+}
+.bui-city-selector-list-item {
+  height: 45px;
+  font-size: var(--bui-title-size-4);
+  display: flex;
+  align-items: center;
+}
+.bui-city-selector-list-item:not(:last-child) {
+  border-bottom: 0.5px solid var(--bui-color-border-default);
+}
+.bui-city-selector-index-container {
+  z-index: 1001;
+  position: absolute;
+  white-space: nowrap;
+  right: 0;
+  top: 50%;
+  width: 40px;
+  will-change: transform;
+  transform: translate(0, -50%);
+  transition: opacity 0.2s ease-out, transform 0.2s ease-out;
+}
+.bui-city-selector-index-container.left-in {
+  opacity: 1;
+  transform: translate(0, -50%);
+}
+.bui-city-selector-index-container.city-index-has-title {
+  top: calc(50% + 22.5px);
+}
+.bui-city-selector-index-container ul {
+  margin: 0;
+  padding: 0;
+  float: left;
+  width: 100%;
+  touch-action: none;
+}
+.bui-city-selector-index-container li {
+  list-style: none;
+  height: 20px;
+  text-align: center;
+  font-size: var(--bui-text-size-3);
+  color: var(--bui-color-info, --bui-color-info);
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}

package/dist/CitySelector/Selector/{index.less → index.css}

@@ -1,5 +1,3 @@
-@import '~@bifrostui/styles/mixins/index.less';
-
 .bui-city-selector-item {
   width: 111px;
   height: 36px;

package/dist/Countdown/Countdown.css

@@ -0,0 +1,28 @@
+.bui-countdown {
+  --font-size: var(--bui-countdown-font-size, var(--bui-text-size-1));
+  --color: var(--bui-countdown-color, var(--bui-color-fg-default));
+  --font-weight: var(--bui-countdown-font-weight, var(--bui-font-weight-normal));
+  display: flex;
+  flex-direction: row;
+  align-items: center;
+  font-size: var(--font-size);
+  color: var(--color);
+  font-weight: var(--font-weight);
+  font-family: var(--bui-font-family);
+}
+.bui-countdown-slice {
+  display: flex;
+  flex-direction: row;
+  align-items: center;
+}
+.bui-countdown-slice-item {
+  display: flex;
+  flex-direction: row;
+  align-items: center;
+}
+.bui-countdown-slice-value {
+  font-family: 'Helvetica Neue', helvetica, 'PingFang SC', 'Chinese Quote', 'Segoe UI', roboto, 'Hiragino Sans GB', 'Microsoft YaHei', arial, sans-serif;
+}
+.bui-countdown-slice-unit {
+  margin: 0 2px;
+}

package/dist/Divider/Divider.css

@@ -0,0 +1,41 @@
+.bui-divider {
+  --height: var(--bui-divider-height, 100%);
+  --width: var(--bui-divider-width, 100%);
+  border-color: var(--bui-color-border-default);
+  font-family: var(--bui-font-family);
+}
+.bui-divider-vertical {
+  height: var(--height);
+  display: inline-block;
+  border-right-width: 1px;
+  border-right-style: solid;
+}
+.bui-divider-horizontal {
+  width: var(--width);
+  border-bottom-width: 1px;
+  border-bottom-style: solid;
+}
+.bui-divider-vertical-dashed {
+  border-right-style: dashed;
+}
+.bui-divider-horizontal-dashed {
+  border-bottom-style: dashed;
+}
+.bui-divider-content {
+  width: 100%;
+  border-width: 0;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
+.bui-divider-line {
+  width: 40px;
+  border-bottom-width: 1px;
+  border-bottom-style: solid;
+  border-color: var(--bui-color-border-default);
+}
+.bui-divider-text {
+  flex-shrink: 0;
+  color: var(--bui-color-fg-subtle);
+  font-size: var(--bui-text-size-2);
+}

package/dist/Drawer/Drawer.css

@@ -0,0 +1,35 @@
+.bui-drawer {
+  font-family: var(--bui-font-family);
+}
+.bui-drawer-content {
+  display: flex;
+  flex-direction: column;
+  height: 100%;
+  flex: 1 0 auto;
+  position: fixed;
+  top: 0;
+  outline: 0;
+  background-color: var(--bui-color-bg-view);
+}
+.bui-drawer-content-left {
+  left: 0;
+}
+.bui-drawer-content-top {
+  top: 0;
+  left: 0;
+  right: 0;
+  height: auto;
+  max-height: 100%;
+}
+.bui-drawer-content-right {
+  right: 0;
+}
+.bui-drawer-content-bottom {
+  bottom: 0;
+  top: auto;
+  left: 0;
+  /* stylelint-disable-next-line declaration-block-no-redundant-longhand-properties */
+  right: 0;
+  height: auto;
+  max-height: 100%;
+}

package/dist/IconButton/IconButton.css

@@ -0,0 +1,130 @@
+.bui-icon-btn {
+  --bg-color: var(--bui-color-neutral-5);
+  --color: var(--bui-color-fg-muted);
+  --icon-size: 17px;
+  --user-area: 5px;
+  position: relative;
+  display: inline-flex;
+  height: auto;
+  margin: 0;
+  align-items: center;
+  justify-content: center;
+  background-color: transparent;
+  border: 1px solid transparent;
+  color: var(--color);
+  cursor: pointer;
+  font-family: var(--bui-font-family);
+  font-size: var(--icon-size);
+  padding: var(--user-area);
+}
+.bui-icon-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-icon-btn:active::before {
+  opacity: 0.04;
+}
+.bui-icon-btn::after {
+  border: 0;
+}
+.bui-icon-btn-small {
+  font-size: var(--bui-text-size-4);
+  padding: var(--bui-spacing-xs);
+}
+.bui-icon-btn-small.bui-icon-btn-outlined,
+.bui-icon-btn-small.bui-icon-btn-contained {
+  padding: var(--bui-spacing-xs);
+}
+.bui-icon-btn-medium.bui-icon-btn-outlined,
+.bui-icon-btn-medium.bui-icon-btn-contained {
+  padding: 5px;
+}
+.bui-icon-btn-large {
+  font-size: 23px;
+  padding: var(--bui-spacing-sm);
+}
+.bui-icon-btn-large.bui-icon-btn-outlined,
+.bui-icon-btn-large.bui-icon-btn-contained {
+  padding: var(--bui-spacing-sm);
+}
+.bui-icon-btn-disabled {
+  pointer-events: none;
+  opacity: 0.5;
+}
+.bui-icon-btn-circular {
+  border-radius: 100%;
+}
+.bui-icon-btn-rounded {
+  border-radius: var(--bui-shape-radius-default);
+}
+.bui-icon-btn-square {
+  border-radius: 0;
+}
+.bui-icon-btn-default.bui-icon-btn-primary {
+  color: var(--bui-color-primary);
+}
+.bui-icon-btn-default.bui-icon-btn-success {
+  color: var(--bui-color-success);
+}
+.bui-icon-btn-default.bui-icon-btn-info {
+  color: var(--bui-color-info);
+}
+.bui-icon-btn-default.bui-icon-btn-warning {
+  color: var(--bui-color-warning);
+}
+.bui-icon-btn-outlined {
+  border: solid 1px;
+}
+.bui-icon-btn-outlined.bui-icon-btn-primary {
+  color: var(--bui-color-primary);
+  border-color: var(--bui-color-primary);
+}
+.bui-icon-btn-outlined.bui-icon-btn-success {
+  color: var(--bui-color-success);
+  border-color: var(--bui-color-success);
+}
+.bui-icon-btn-outlined.bui-icon-btn-info {
+  color: var(--bui-color-info);
+  border-color: var(--bui-color-info);
+}
+.bui-icon-btn-outlined.bui-icon-btn-warning {
+  color: var(--bui-color-warning);
+  border-color: var(--bui-color-warning);
+}
+.bui-icon-btn-outlined.bui-icon-btn-danger {
+  color: var(--bui-color-danger);
+  border-color: var(--bui-color-danger);
+}
+.bui-icon-btn-contained {
+  background-color: var(--bg-color);
+}
+.bui-icon-btn-contained.bui-icon-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-icon-btn-contained.bui-icon-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-icon-btn-contained.bui-icon-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-icon-btn-contained.bui-icon-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-icon-btn-contained.bui-icon-btn-danger {
+  color: var(--bui-color-white);
+  background-image: linear-gradient(45deg, var(--bui-color-danger-start) 0%, var(--bui-color-danger-end) 100%);
+}

package/dist/Image/index.css

@@ -0,0 +1,35 @@
+.bui-image {
+  width: auto;
+  height: auto;
+  display: inline-block;
+  overflow: hidden;
+  position: relative;
+  font-family: var(--bui-font-family);
+}
+.bui-image .bui-image-img {
+  width: 100%;
+  height: 100%;
+  overflow: hidden;
+  display: block;
+  opacity: 0;
+}
+.bui-image .bui-image-img.bui-image-loaded {
+  opacity: 1;
+}
+.bui-image-default-icon-wrap {
+  top: 0;
+  left: 0;
+  z-index: 1;
+  opacity: 1;
+  position: absolute;
+  width: 100%;
+  height: 100%;
+}
+.bui-image-default-icon-wrap.bui-image-loaded {
+  opacity: 0;
+}
+.bui-image-default-icon-item {
+  width: 100%;
+  height: 100%;
+  background-color: rgba(127, 127, 127, 0.2);
+}

package/dist/Input/Input.css

@@ -0,0 +1,59 @@
+.bui-input {
+  position: relative;
+  display: flex;
+  align-items: center;
+  height: 32px;
+  padding: 4px 10px;
+  box-sizing: border-box;
+  border-radius: var(--bui-shape-radius-default);
+  border: 1px solid var(--bui-color-border-default);
+  font-family: var(--bui-font-family);
+}
+.bui-input-icon {
+  display: flex;
+  align-items: center;
+  color: var(--bui-color-fg-subtle);
+  font-size: var(--bui-title-size-3);
+}
+.bui-input-icon-start {
+  margin-right: 3px;
+}
+.bui-input-icon-end {
+  margin-left: 3px;
+}
+.bui-input-input {
+  flex: 1;
+  display: flex;
+  align-items: center;
+  padding: 0;
+  height: 100%;
+  color: var(--bui-color-fg-default);
+  border: none;
+  outline: none;
+  background-color: transparent;
+  font-size: var(--bui-text-size-2);
+}
+.bui-input-input::placeholder {
+  color: var(--bui-color-fg-subtle);
+}
+.bui-input-disabled {
+  pointer-events: none;
+  background-color: rgba(0, 0, 0, 0.04);
+}
+.bui-input-disabled .bui-input-input {
+  color: var(--bui-color-fg-disabled);
+}
+.bui-input-disabled .bui-input-input::placeholder {
+  color: var(--bui-color-fg-disabled);
+}
+.bui-input-clear {
+  display: flex;
+  align-items: center;
+  cursor: pointer;
+  color: var(--bui-color-fg-disabled);
+  height: 100%;
+  font-size: var(--bui-title-size-3);
+}
+.bui-input .bui-mini-placeholder {
+  width: auto;
+}

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

@@ -4,7 +4,6 @@
   font-family: var(--bui-font-family);
   list-style: none;
 }
-
 .bui-list .bui-divider:last-of-type {
   display: none;
 }

package/{es/List/ListItem.less → dist/List/ListItem.css}

@@ -4,31 +4,20 @@
   align-items: center;
   font-family: var(--bui-font-family);
 }
-
 .bui-list-item-disabled {
   pointer-events: none;
   background-color: var(--bui-color-bg-default);
   color: var(--bui-color-fg-subtle);
 }
-
-.bui-list-small {
-  .bui-list-item {
-    padding: 5px 12px;
-  }
+.bui-list-small .bui-list-item {
+  padding: 5px 12px;
 }
-
-.bui-list-medium {
-  .bui-list-item {
-    padding: 18px 12px;
-  }
+.bui-list-medium .bui-list-item {
+  padding: 18px 12px;
 }
-
-.bui-list-large {
-  .bui-list-item {
-    padding: 20px 12px;
-  }
+.bui-list-large .bui-list-item {
+  padding: 20px 12px;
 }
-
 .bui-list-item-divider:not(:last-child) {
   border-bottom: 1px solid var(--bui-color-border-default);
 }

package/{es/List/ListItemContent.less → dist/List/ListItemContent.css}

@@ -6,17 +6,12 @@
   width: 100%;
   font-family: var(--bui-font-family);
 }
-
-.bui-list-small {
-  .bui-list-item-content {
-    font-size: var(--bui-text-size-2);
-  }
+.bui-list-small .bui-list-item-content {
+  font-size: var(--bui-text-size-2);
 }
-
 .bui-list-item-content-primary {
   flex: 1 1 auto;
 }
-
 .bui-list-item-content-secondary {
   font-size: 13px;
   color: var(--bui-color-fg-muted);

package/{es/List/ListItemFooter.less → dist/List/ListItemFooter.css}

@@ -3,8 +3,7 @@
   display: flex;
   align-items: center;
   font-family: var(--bui-font-family);
-
-  .bui-svg-icon {
-    color: var(--bui-color-fg-subtle);
-  }
+}
+.bui-list-item-footer .bui-svg-icon {
+  color: var(--bui-color-fg-subtle);
 }

package/dist/Loading/Loading.css

@@ -0,0 +1,31 @@
+.bui-loading {
+  --animation-duration: var(--bui-loading-animation-duration, 1.6s);
+  width: fit-content;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  padding: var(--bui-spacing-md);
+  font-family: var(--bui-font-family);
+}
+.bui-loading-icon {
+  font-size: 30px;
+  animation: loading var(--animation-duration) linear infinite;
+}
+.bui-loading-text {
+  padding: 10px;
+  font-size: var(--bui-title-size-3);
+}
+.bui-loading-vertical {
+  flex-direction: row;
+}
+.bui-loading-horizontal {
+  flex-direction: column;
+}
+@keyframes loading {
+  0% {
+    transform: rotate(0deg);
+  }
+  100% {
+    transform: rotate(360deg);
+  }
+}

package/{es/Modal/Modal.less → dist/Modal/Modal.css}

@@ -6,12 +6,10 @@
   top: 0;
   z-index: var(--bui-z-index-modal);
   font-family: var(--bui-font-family);
-
-  &-exited {
-    visibility: hidden;
-  }
-
-  &-backdrop {
-    z-index: -1;
-  }
+}
+.bui-modal-exited {
+  visibility: hidden;
+}
+.bui-modal-backdrop {
+  z-index: -1;
 }

package/dist/Modal/Modal.miniapp.d.ts

@@ -10,7 +10,7 @@ declare const Modal: React.ForwardRefExoticComponent<Omit<ViewProps & {
     disableScrollLock?: boolean;
     disablePortal?: boolean;
     keepMounted?: boolean;
-} & import("../../../bui-types/src").ICommonProps & Omit<Omit<React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "ref"> & {
+} & import("packages/bui-types/src").ICommonProps & Omit<Omit<React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "ref"> & {
     ref?: React.Ref<HTMLDivElement>;
-}, "open" | keyof import("../../../bui-types/src").ICommonProps | "container" | "disablePortal" | "hideBackdrop" | "BackdropProps" | "onClose" | "disableScrollLock" | "keepMounted">, "ref"> & React.RefAttributes<HTMLDivElement>>;
+}, keyof import("packages/bui-types/src").ICommonProps | "open" | "container" | "disablePortal" | "hideBackdrop" | "BackdropProps" | "onClose" | "disableScrollLock" | "keepMounted">, "ref"> & React.RefAttributes<HTMLDivElement>>;
 export default Modal;

package/dist/NavBar/NavBar.css

@@ -0,0 +1,57 @@
+.bui-navbar {
+  --height: var(--bui-navbar-height, 45px);
+  --icon-size: var(--bui-navbar-icon-size, 24px);
+  --background-color: var(--bui-navbar-background-color, var(--bui-color-white));
+  --border-bottom: var(--bui-navbar-border-bottom, none);
+  --z-index: var(--bui-navbar-z-index, auto);
+  position: relative;
+  width: 100%;
+  height: var(--height);
+  box-sizing: border-box;
+  padding: 0 8px;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  background-color: var(--background-color);
+  border-bottom: var(--border-bottom);
+  user-select: none;
+  z-index: var(--z-index);
+  font-family: var(--bui-font-family);
+}
+.bui-navbar-fixed {
+  position: fixed;
+  top: 0;
+  left: 0;
+  width: 100%;
+}
+.bui-navbar-title {
+  max-width: 60%;
+  padding: 0 8px;
+  font-size: var(--bui-title-size-2);
+  width: auto;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+.bui-navbar-left,
+.bui-navbar-right {
+  flex: 1;
+  display: flex;
+  align-items: center;
+  font-size: var(--bui-title-size-3);
+}
+.bui-navbar-left {
+  justify-content: flex-start;
+  text-align: left;
+}
+.bui-navbar-right {
+  justify-content: flex-end;
+  text-align: right;
+  align-self: stretch;
+}
+.bui-navbar-icon {
+  font-size: var(--icon-size);
+}
+.bui-navbar-placeholder {
+  width: 100%;
+}