@bifrostui/react 1.5.0 → 2.0.0-alpha.0

package/dist/List/ListItem.css

@@ -10,13 +10,13 @@
   color: var(--bui-color-fg-subtle);
 }
 .bui-list-small .bui-list-item {
-  padding: var(--small-item-padding);
+  padding: var(--bui-list-small-item-padding);
 }
 .bui-list-medium .bui-list-item {
-  padding: var(--medium-item-padding);
+  padding: var(--bui-list-medium-item-padding);
 }
 .bui-list-large .bui-list-item {
-  padding: var(--large-item-padding);
+  padding: var(--bui-list-large-item-padding);
 }
 .bui-list-item-divider:not(:last-child) {
   border-bottom: 1px solid var(--bui-color-border-default);

package/dist/List/ListItem.js

@@ -63,50 +63,48 @@ var import_ListContext = __toESM(require("./ListContext"));
 var import_ListItemFooter = __toESM(require("./ListItemFooter"));
 var import_ListItem2 = require("./ListItem.css");
 const prefixCls = "bui-list-item";
-const ListItem = /* @__PURE__ */ import_react.default.forwardRef((props, ref) => {
-  const _a = props, {
-    children,
-    className,
-    hideDivider,
-    disabled,
-    onClick,
-    endIcon,
-    component: Component
-  } = _a, others = __objRest(_a, [
-    "children",
-    "className",
-    "hideDivider",
-    "disabled",
-    "onClick",
-    "endIcon",
-    "component"
-  ]);
-  let chevron;
-  if (typeof endIcon === "boolean") {
-    chevron = endIcon && /* @__PURE__ */ import_react.default.createElement(import_icons.ArrowForwardIcon, { size: "small" });
-  } else if (import_react.default.isValidElement(endIcon)) {
-    chevron = endIcon;
-  } else {
-    chevron = onClick && /* @__PURE__ */ import_react.default.createElement(import_icons.ArrowForwardIcon, { size: "small" });
-  }
-  const context = import_react.default.useContext(import_ListContext.default);
-  return /* @__PURE__ */ import_react.default.createElement(
-    Component,
-    __spreadValues({
-      className: (0, import_clsx.default)(prefixCls, className, {
-        [`${prefixCls}-divider`]: !(hideDivider || context.hideDivider),
-        [`${prefixCls}-disabled`]: disabled
-      }),
+const ListItem = /* @__PURE__ */ import_react.default.forwardRef(
+  (_a, ref) => {
+    var _b = _a, {
+      children,
+      className,
+      hideDivider = false,
+      disabled,
       onClick,
-      ref
-    }, others),
-    children,
-    chevron && /* @__PURE__ */ import_react.default.createElement(import_ListItemFooter.default, null, chevron)
-  );
-});
+      endIcon,
+      component: Component = "div"
+    } = _b, others = __objRest(_b, [
+      "children",
+      "className",
+      "hideDivider",
+      "disabled",
+      "onClick",
+      "endIcon",
+      "component"
+    ]);
+    let chevron;
+    if (typeof endIcon === "boolean") {
+      chevron = endIcon && /* @__PURE__ */ import_react.default.createElement(import_icons.ArrowForwardIcon, { size: "small" });
+    } else if (import_react.default.isValidElement(endIcon)) {
+      chevron = endIcon;
+    } else {
+      chevron = onClick && /* @__PURE__ */ import_react.default.createElement(import_icons.ArrowForwardIcon, { size: "small" });
+    }
+    const context = import_react.default.useContext(import_ListContext.default);
+    return /* @__PURE__ */ import_react.default.createElement(
+      Component,
+      __spreadValues({
+        className: (0, import_clsx.default)(prefixCls, className, {
+          [`${prefixCls}-divider`]: !(hideDivider || context.hideDivider),
+          [`${prefixCls}-disabled`]: disabled
+        }),
+        onClick,
+        ref
+      }, others),
+      children,
+      chevron && /* @__PURE__ */ import_react.default.createElement(import_ListItemFooter.default, null, chevron)
+    );
+  }
+);
 ListItem.displayName = "BuiListItem";
-ListItem.defaultProps = {
-  component: "div",
-  hideDivider: false
-};
 var ListItem_default = ListItem;

package/dist/List/ListItemContent.js

@@ -65,7 +65,7 @@ const ListItemContent = /* @__PURE__ */ import_react.default.forwardRef(
     const _a = props, {
       children,
       className,
-      component: Component,
+      component: Component = "div",
       primary,
       secondary
     } = _a, others = __objRest(_a, [
@@ -79,7 +79,4 @@ const ListItemContent = /* @__PURE__ */ import_react.default.forwardRef(
   }
 );
 ListItemContent.displayName = "BuiListItemContent";
-ListItemContent.defaultProps = {
-  component: "div"
-};
 var ListItemContent_default = ListItemContent;

package/dist/List/ListItemExtra.js

@@ -62,12 +62,17 @@ var import_ListItemExtra2 = require("./ListItemExtra.css");
 const prefixCls = "bui-list-item-extra";
 const ListItemExtra = /* @__PURE__ */ import_react.default.forwardRef(
   (props, ref) => {
-    const _a = props, { children, className, component: Component } = _a, others = __objRest(_a, ["children", "className", "component"]);
+    const _a = props, {
+      children,
+      className,
+      component: Component = "div"
+    } = _a, others = __objRest(_a, [
+      "children",
+      "className",
+      "component"
+    ]);
     return /* @__PURE__ */ import_react.default.createElement(Component, __spreadValues({ className: (0, import_clsx.default)(prefixCls, className), ref }, others), children);
   }
 );
 ListItemExtra.displayName = "BuiListItemExtra";
-ListItemExtra.defaultProps = {
-  component: "div"
-};
 var ListItemExtra_default = ListItemExtra;

package/dist/List/ListItemFooter.js

@@ -62,12 +62,17 @@ var import_ListItemFooter2 = require("./ListItemFooter.css");
 const prefixCls = "bui-list-item-footer";
 const ListItemFooter = /* @__PURE__ */ import_react.default.forwardRef(
   (props, ref) => {
-    const _a = props, { children, className, component: Component } = _a, others = __objRest(_a, ["children", "className", "component"]);
+    const _a = props, {
+      children,
+      className,
+      component: Component = "div"
+    } = _a, others = __objRest(_a, [
+      "children",
+      "className",
+      "component"
+    ]);
     return /* @__PURE__ */ import_react.default.createElement(Component, __spreadValues({ className: (0, import_clsx.default)(prefixCls, className), ref }, others), children);
   }
 );
 ListItemFooter.displayName = "BuiListItemFooter";
-ListItemFooter.defaultProps = {
-  component: "div"
-};
 var ListItemFooter_default = ListItemFooter;

package/dist/List/ListItemHeader.js

@@ -62,12 +62,17 @@ var import_ListItemHeader2 = require("./ListItemHeader.css");
 const prefixCls = "bui-list-item-header";
 const ListItemHeader = /* @__PURE__ */ import_react.default.forwardRef(
   (props, ref) => {
-    const _a = props, { children, className, component: Component } = _a, others = __objRest(_a, ["children", "className", "component"]);
+    const _a = props, {
+      children,
+      className,
+      component: Component = "div"
+    } = _a, others = __objRest(_a, [
+      "children",
+      "className",
+      "component"
+    ]);
     return /* @__PURE__ */ import_react.default.createElement(Component, __spreadValues({ className: (0, import_clsx.default)(prefixCls, className), ref }, others), children);
   }
 );
 ListItemHeader.displayName = "BuiListItemHeader";
-ListItemHeader.defaultProps = {
-  component: "div"
-};
 var ListItemHeader_default = ListItemHeader;

package/dist/List/index.css

@@ -0,0 +1,80 @@
+:root,
+page,
+xhs-page {
+  --bui-list-small-item-padding: 5px 12px;
+  --bui-list-medium-item-padding: 18px 12px;
+  --bui-list-large-item-padding: 20px 12px;
+}
+.bui-list {
+  background: var(--bui-color-bg-view);
+  font-size: var(--bui-title-size-3);
+  font-family: var(--bui-font-family);
+  list-style: none;
+}
+.bui-list .bui-divider:last-of-type {
+  display: none;
+}
+.bui-list-item,
+.bui-list-item-contained {
+  display: flex;
+  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: var(--bui-list-small-item-padding);
+}
+.bui-list-medium .bui-list-item {
+  padding: var(--bui-list-medium-item-padding);
+}
+.bui-list-large .bui-list-item {
+  padding: var(--bui-list-large-item-padding);
+}
+.bui-list-item-divider:not(:last-child) {
+  border-bottom: 1px solid var(--bui-color-border-default);
+}
+.bui-list-item-content {
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+  flex: 1 1 auto;
+  width: 100%;
+  font-family: var(--bui-font-family);
+}
+.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: var(--bui-text-size-2);
+  color: var(--bui-color-fg-muted);
+}
+.bui-list-item-extra {
+  flex: 0 0 auto;
+  display: flex;
+  align-items: center;
+  color: var(--bui-color-fg-subtle);
+  font-family: var(--bui-font-family);
+}
+.bui-list-item-footer {
+  flex: 0 0 auto;
+  display: flex;
+  align-items: center;
+  font-family: var(--bui-font-family);
+}
+.bui-list-item-footer .bui-svg-icon {
+  color: var(--bui-color-fg-subtle);
+}
+.bui-list-item-header {
+  flex: 0 0 auto;
+  margin-right: var(--bui-spacing-sm);
+  display: flex;
+  align-items: center;
+  font-family: var(--bui-font-family);
+}

package/dist/Loading/Loading.d.ts

@@ -1,5 +1,5 @@
 import React from 'react';
 import { LoadingProps } from './Loading.types';
-import './Loading.less';
+import './index.less';
 declare const Loading: React.ForwardRefExoticComponent<Omit<LoadingProps<"div", {}>, "ref"> & React.RefAttributes<HTMLDivElement>>;
 export default Loading;

package/dist/Loading/Loading.js

@@ -59,10 +59,22 @@ module.exports = __toCommonJS(Loading_exports);
 var import_react = __toESM(require("react"));
 var import_clsx = __toESM(require("clsx"));
 var import_icons = require("@bifrostui/icons");
-var import_Loading2 = require("./Loading.css");
+var import_index = require("./index.css");
 const prefixCls = "bui-loading";
 const Loading = /* @__PURE__ */ import_react.default.forwardRef((props, ref) => {
-  const _a = props, { className, icon, IconProps, children, direction } = _a, otherProps = __objRest(_a, ["className", "icon", "IconProps", "children", "direction"]);
+  const _a = props, {
+    className,
+    icon,
+    IconProps,
+    children,
+    direction = "vertical"
+  } = _a, otherProps = __objRest(_a, [
+    "className",
+    "icon",
+    "IconProps",
+    "children",
+    "direction"
+  ]);
   const renderIcon = () => {
     return icon != null ? icon : /* @__PURE__ */ import_react.default.createElement(
       import_icons.LoadingThreeQuartersOutlinedIcon,
@@ -82,7 +94,4 @@ const Loading = /* @__PURE__ */ import_react.default.forwardRef((props, ref) =>
   );
 });
 Loading.displayName = "BuiLoading";
-Loading.defaultProps = {
-  direction: "vertical"
-};
 var Loading_default = Loading;

package/{es/Loading/Loading.css → dist/Loading/index.css}

@@ -1,7 +1,11 @@
+:root,
+page,
+xhs-page {
+  --bui-loading-icon-font-size: 30px;
+  --bui-loading-text-padding: 10px;
+  --bui-loading-animation-duration: 1.6s;
+}
 .bui-loading {
-  --icon-font-size: var(--bui-loading-icon-font-size, 30px);
-  --text-padding: var(--bui-loading-text-padding, 10px);
-  --animation-duration: var(--bui-loading-animation-duration, 1.6s);
   width: fit-content;
   display: flex;
   justify-content: center;
@@ -10,11 +14,11 @@
   font-family: var(--bui-font-family);
 }
 .bui-loading-icon {
-  font-size: var(--icon-font-size);
-  animation: loading var(--animation-duration) linear infinite;
+  font-size: var(--bui-loading-icon-font-size);
+  animation: loading var(--bui-loading-animation-duration) linear infinite;
 }
 .bui-loading-text {
-  padding: var(--text-padding);
+  padding: var(--bui-loading-text-padding);
   font-size: var(--bui-title-size-3);
 }
 .bui-loading-vertical {

package/dist/Modal/Modal.d.ts

@@ -1,5 +1,5 @@
 import React from 'react';
-import './Modal.less';
 import { ModalProps } from './Modal.types';
+import './index.less';
 declare const Modal: React.ForwardRefExoticComponent<Omit<ModalProps<"div", {}>, "ref"> & React.RefAttributes<HTMLDivElement>>;
 export default Modal;

package/dist/Modal/Modal.js

@@ -64,7 +64,7 @@ var import_clsx = __toESM(require("clsx"));
 var import_react = __toESM(require("react"));
 var import_Backdrop = __toESM(require("../Backdrop"));
 var import_Portal = __toESM(require("../Portal"));
-var import_Modal = require("./Modal.css");
+var import_index = require("./index.css");
 const prefixCls = "bui-modal";
 const Modal = /* @__PURE__ */ import_react.default.forwardRef((props, ref) => {
   const _a = props, {
@@ -136,10 +136,4 @@ const Modal = /* @__PURE__ */ import_react.default.forwardRef((props, ref) => {
   ) : null, (open || keepMounted) && children));
 });
 Modal.displayName = "BuiModal";
-Modal.defaultProps = {
-  open: false,
-  disablePortal: false,
-  disableScrollLock: false,
-  hideBackdrop: false
-};
 var Modal_default = Modal;

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

@@ -1,6 +1,6 @@
 import React from 'react';
 import { ViewProps } from '@tarojs/components';
-import './Modal.less';
+import './index.less';
 declare const Modal: React.ForwardRefExoticComponent<Omit<ViewProps & {
     open?: boolean;
     container?: Element | (() => Element);
@@ -12,5 +12,5 @@ declare const Modal: React.ForwardRefExoticComponent<Omit<ViewProps & {
     keepMounted?: boolean;
 } & import("@bifrostui/types").ICommonProps & Omit<Omit<React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "ref"> & {
     ref?: React.Ref<HTMLDivElement>;
-}, "open" | keyof import("@bifrostui/types").ICommonProps | "container" | "disablePortal" | "hideBackdrop" | "BackdropProps" | "onClose" | "disableScrollLock" | "keepMounted">, "ref"> & React.RefAttributes<HTMLDivElement>>;
+}, keyof import("@bifrostui/types").ICommonProps | "open" | "container" | "disablePortal" | "hideBackdrop" | "BackdropProps" | "onClose" | "disableScrollLock" | "keepMounted">, "ref"> & React.RefAttributes<HTMLDivElement>>;
 export default Modal;

package/dist/Modal/Modal.miniapp.js

@@ -65,19 +65,19 @@ var import_react = __toESM(require("react"));
 var import_components = require("@tarojs/components");
 var import_Backdrop = __toESM(require("../Backdrop"));
 var import_Portal = __toESM(require("../Portal"));
-var import_Modal = require("./Modal.css");
+var import_index = require("./index.css");
 const prefixCls = "bui-modal";
 const Modal = /* @__PURE__ */ import_react.default.forwardRef(
   (props, ref) => {
     const _a = props, {
       className,
-      open,
+      open = false,
       BackdropProps,
       children,
       container,
-      disablePortal,
-      disableScrollLock,
-      hideBackdrop,
+      disablePortal = false,
+      disableScrollLock = false,
+      hideBackdrop = false,
       onClose,
       keepMounted
     } = _a, others = __objRest(_a, [
@@ -133,10 +133,4 @@ const Modal = /* @__PURE__ */ import_react.default.forwardRef(
   }
 );
 Modal.displayName = "BuiModal";
-Modal.defaultProps = {
-  open: false,
-  disablePortal: false,
-  disableScrollLock: false,
-  hideBackdrop: false
-};
 var Modal_miniapp_default = Modal;

package/dist/NavBar/NavBar.d.ts

@@ -1,5 +1,5 @@
 import React from 'react';
 import { NavBarProps } from './NavBar.types';
-import './NavBar.less';
+import './index.less';
 declare const NavBar: React.ForwardRefExoticComponent<Omit<NavBarProps<"div", {}>, "ref"> & React.RefAttributes<HTMLDivElement>>;
 export default NavBar;

package/dist/NavBar/NavBar.js

@@ -60,7 +60,7 @@ var import_react = __toESM(require("react"));
 var import_clsx = __toESM(require("clsx"));
 var import_utils = require("@bifrostui/utils");
 var import_icons = require("@bifrostui/icons");
-var import_NavBar2 = require("./NavBar.css");
+var import_index = require("./index.css");
 const prefixCls = "bui-navbar";
 const NavBar = /* @__PURE__ */ import_react.default.forwardRef((props, ref) => {
   const _a = props, {
@@ -133,5 +133,4 @@ const NavBar = /* @__PURE__ */ import_react.default.forwardRef((props, ref) => {
   return /* @__PURE__ */ import_react.default.createElement(import_react.default.Fragment, null, renderNavBar(), renderPlaceholder());
 });
 NavBar.displayName = "BuiNavBar";
-NavBar.defaultProps = {};
 var NavBar_default = NavBar;

package/dist/NavBar/index.css

@@ -0,0 +1,65 @@
+:root,
+page,
+xhs-page {
+  --bui-navbar-width: 100%;
+  --bui-navbar-height: 45px;
+  --bui-navbar-padding: 0 8px;
+  --bui-navbar-title-padding: 0 8px;
+  --bui-navbar-icon-font-size: 24px;
+  --bui-navbar-background-color: var(--bui-color-white);
+  --bui-navbar-border-bottom: none;
+  --bui-navbar-z-index: auto;
+  --bui-navbar-title-max-width: 60%;
+}
+.bui-navbar {
+  position: relative;
+  width: var(--bui-navbar-width);
+  height: var(--bui-navbar-height);
+  box-sizing: border-box;
+  padding: var(--bui-navbar-padding);
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  background-color: var(--bui-navbar-background-color);
+  border-bottom: var(--bui-navbar-border-bottom);
+  user-select: none;
+  z-index: var(--bui-navbar-z-index);
+  font-family: var(--bui-font-family);
+}
+.bui-navbar-fixed {
+  position: fixed;
+  top: 0;
+  left: 0;
+  width: 100%;
+}
+.bui-navbar-title {
+  max-width: var(--bui-navbar-title-max-width);
+  padding: var(--bui-navbar-title-padding);
+  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(--bui-navbar-icon-font-size);
+}
+.bui-navbar-placeholder {
+  width: 100%;
+}

package/dist/Picker/Picker.css

@@ -1,32 +1,36 @@
+:root,
+page,
+xhs-page {
+  --bui-picker-header-height: 50px;
+  --bui-picker-header-padding: 0 var(--bui-spacing-lg);
+  --bui-picker-cancel-height: 100%;
+  --bui-picker-cancel-line-height: 50px;
+  --bui-picker-confirm-height: 100%;
+  --bui-picker-confirm-line-height: 50px;
+  --bui-picker-panel-height: 260px;
+  --bui-picker-indicator-top: 108px;
+  --bui-picker-option-height: 36px;
+  --bui-picker-option-font-size: var(--bui-title-size-4);
+}
 .bui-picker {
-  --header-height: var(--bui-picker-header-height, 50px);
-  --header-padding: var(--bui-picker-header-padding, 0 var(--bui-spacing-lg));
-  --cancel-height: var(--bui-picker-cancel-height, 100%);
-  --cancel-line-height: var(--bui-picker-cancel-line-height, 50px);
-  --confirm-height: var(--bui-picker-confirm-height, 100%);
-  --confirm-line-height: var(--bui-picker-confirm-line-height, 50px);
-  --panel-container-height: var(--bui-picker-panel-height, 260px);
-  --indicator-top: var(--bui-picker-indicator-top, 108px);
-  --option-height: var(--bui-picker-option-height, 36px);
-  --bui-picker-confirm-disabled-opacity: 0.38;
   font-family: var(--bui-font-family);
 }
 .bui-picker .bui-drawer-content {
   border-radius: var(--bui-shape-radius-drawer) var(--bui-shape-radius-drawer) 0 0;
 }
 .bui-picker-header {
-  height: var(--header-height);
+  height: var(--bui-picker-header-height);
   display: flex;
   align-items: center;
   justify-content: space-between;
-  padding: var(--header-padding);
+  padding: var(--bui-picker-header-padding);
 }
 .bui-picker-cancel {
   cursor: pointer;
-  height: var(--cancel-height);
+  height: var(--bui-picker-cancel-height);
   font-size: var(--bui-title-size-4);
   text-align: center;
-  line-height: var(--cancel-line-height);
+  line-height: var(--bui-picker-cancel-line-height);
   color: var(--bui-color-fg-default);
 }
 .bui-picker-title {
@@ -36,19 +40,15 @@
 }
 .bui-picker-confirm {
   cursor: pointer;
-  height: var(--confirm-height);
+  height: var(--bui-picker-confirm-height);
   font-size: var(--bui-title-size-4);
   text-align: center;
-  line-height: var(--confirm-line-height);
+  line-height: var(--bui-picker-confirm-line-height);
   color: var(--bui-color-primary);
 }
-.bui-picker-confirm-disabled {
-  color: var(--bui-color-fg-default);
-  opacity: var(--bui-picker-confirm-disabled-opacity);
-}
 .bui-picker-container {
   width: 100%;
-  height: var(--panel-container-height);
+  height: var(--bui-picker-panel-height);
   display: flex;
   overflow: hidden;
 }