@bifrostui/react 1.4.8-beta.0 → 2.0.0-alpha.0

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

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

package/es/ItemSelector/ItemSelector.miniapp.d.ts

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

package/es/ItemSelector/ItemSelector.miniapp.js

@@ -20,7 +20,6 @@ var __spreadProps = (a, b) => __defProps(a, __getOwnPropDescs(b));
 import React, { useEffect, useRef, useState } from "react";
 import Taro from "@tarojs/taro";
 import ItemSelectorCore from "./ItemSelectorCore";
-import "./miniapp.css";
 const ItemSelector = /* @__PURE__ */ React.forwardRef(
   (props, ref) => {
     const { items } = props;

package/es/ItemSelector/ItemSelectorCore.d.ts

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

package/es/ItemSelector/ItemSelectorCore.js

@@ -31,7 +31,7 @@ import clsx from "clsx";
 import { throttle, useForkRef, useTouchEmulator } from "@bifrostui/utils";
 import ScrollView from "../ScrollView";
 import Selector from "./Selector";
-import "./ItemSelector.css";
+import "./index.css";
 const DEVIATION_HEIGHT = "6vmin";
 const prefixCls = "bui-item-selector";
 const ItemSelector = /* @__PURE__ */ React.forwardRef(

package/es/List/List.css

@@ -1,7 +1,11 @@
+: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 {
-  --small-item-padding: var(--bui-list-small-item-padding, 5px 12px);
-  --medium-item-padding: var(--bui-list-medium-item-padding, 18px 12px);
-  --large-item-padding: var(--bui-list-large-item-padding, 20px 12px);
   background: var(--bui-color-bg-view);
   font-size: var(--bui-title-size-3);
   font-family: var(--bui-font-family);

package/es/List/List.js

@@ -33,11 +33,11 @@ import "./List.css";
 const prefixCls = "bui-list";
 const List = /* @__PURE__ */ React.forwardRef((props, ref) => {
   const _a = props, {
-    hideDivider,
+    hideDivider = false,
     children,
     className,
-    size,
-    component: Component,
+    size = "medium",
+    component: Component = "div",
     header,
     subheader
   } = _a, others = __objRest(_a, [
@@ -66,11 +66,6 @@ const List = /* @__PURE__ */ React.forwardRef((props, ref) => {
   ));
 });
 List.displayName = "BuiList";
-List.defaultProps = {
-  hideDivider: false,
-  size: "medium",
-  component: "div"
-};
 var List_default = List;
 export {
   List_default as default

package/es/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/es/List/ListItem.js

@@ -33,52 +33,50 @@ import ListContext from "./ListContext";
 import ListItemFooter from "./ListItemFooter";
 import "./ListItem.css";
 const prefixCls = "bui-list-item";
-const ListItem = /* @__PURE__ */ React.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__ */ React.createElement(ArrowForwardIcon, { size: "small" });
-  } else if (React.isValidElement(endIcon)) {
-    chevron = endIcon;
-  } else {
-    chevron = onClick && /* @__PURE__ */ React.createElement(ArrowForwardIcon, { size: "small" });
-  }
-  const context = React.useContext(ListContext);
-  return /* @__PURE__ */ React.createElement(
-    Component,
-    __spreadValues({
-      className: clsx(prefixCls, className, {
-        [`${prefixCls}-divider`]: !(hideDivider || context.hideDivider),
-        [`${prefixCls}-disabled`]: disabled
-      }),
+const ListItem = /* @__PURE__ */ React.forwardRef(
+  (_a, ref) => {
+    var _b = _a, {
+      children,
+      className,
+      hideDivider = false,
+      disabled,
       onClick,
-      ref
-    }, others),
-    children,
-    chevron && /* @__PURE__ */ React.createElement(ListItemFooter, 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__ */ React.createElement(ArrowForwardIcon, { size: "small" });
+    } else if (React.isValidElement(endIcon)) {
+      chevron = endIcon;
+    } else {
+      chevron = onClick && /* @__PURE__ */ React.createElement(ArrowForwardIcon, { size: "small" });
+    }
+    const context = React.useContext(ListContext);
+    return /* @__PURE__ */ React.createElement(
+      Component,
+      __spreadValues({
+        className: clsx(prefixCls, className, {
+          [`${prefixCls}-divider`]: !(hideDivider || context.hideDivider),
+          [`${prefixCls}-disabled`]: disabled
+        }),
+        onClick,
+        ref
+      }, others),
+      children,
+      chevron && /* @__PURE__ */ React.createElement(ListItemFooter, null, chevron)
+    );
+  }
+);
 ListItem.displayName = "BuiListItem";
-ListItem.defaultProps = {
-  component: "div",
-  hideDivider: false
-};
 var ListItem_default = ListItem;
 export {
   ListItem_default as default

package/es/List/ListItemContent.js

@@ -35,7 +35,7 @@ const ListItemContent = /* @__PURE__ */ React.forwardRef(
     const _a = props, {
       children,
       className,
-      component: Component,
+      component: Component = "div",
       primary,
       secondary
     } = _a, others = __objRest(_a, [
@@ -49,9 +49,6 @@ const ListItemContent = /* @__PURE__ */ React.forwardRef(
   }
 );
 ListItemContent.displayName = "BuiListItemContent";
-ListItemContent.defaultProps = {
-  component: "div"
-};
 var ListItemContent_default = ListItemContent;
 export {
   ListItemContent_default as default

package/es/List/ListItemExtra.js

@@ -32,14 +32,19 @@ import "./ListItemExtra.css";
 const prefixCls = "bui-list-item-extra";
 const ListItemExtra = /* @__PURE__ */ React.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__ */ React.createElement(Component, __spreadValues({ className: clsx(prefixCls, className), ref }, others), children);
   }
 );
 ListItemExtra.displayName = "BuiListItemExtra";
-ListItemExtra.defaultProps = {
-  component: "div"
-};
 var ListItemExtra_default = ListItemExtra;
 export {
   ListItemExtra_default as default

package/es/List/ListItemFooter.js

@@ -32,14 +32,19 @@ import "./ListItemFooter.css";
 const prefixCls = "bui-list-item-footer";
 const ListItemFooter = /* @__PURE__ */ React.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__ */ React.createElement(Component, __spreadValues({ className: clsx(prefixCls, className), ref }, others), children);
   }
 );
 ListItemFooter.displayName = "BuiListItemFooter";
-ListItemFooter.defaultProps = {
-  component: "div"
-};
 var ListItemFooter_default = ListItemFooter;
 export {
   ListItemFooter_default as default

package/es/List/ListItemHeader.js

@@ -32,14 +32,19 @@ import "./ListItemHeader.css";
 const prefixCls = "bui-list-item-header";
 const ListItemHeader = /* @__PURE__ */ React.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__ */ React.createElement(Component, __spreadValues({ className: clsx(prefixCls, className), ref }, others), children);
   }
 );
 ListItemHeader.displayName = "BuiListItemHeader";
-ListItemHeader.defaultProps = {
-  component: "div"
-};
 var ListItemHeader_default = ListItemHeader;
 export {
   ListItemHeader_default as default

package/es/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/es/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/es/Loading/Loading.js

@@ -29,10 +29,22 @@ var __objRest = (source, exclude) => {
 import React from "react";
 import clsx from "clsx";
 import { LoadingThreeQuartersOutlinedIcon } from "@bifrostui/icons";
-import "./Loading.css";
+import "./index.css";
 const prefixCls = "bui-loading";
 const Loading = /* @__PURE__ */ React.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__ */ React.createElement(
       LoadingThreeQuartersOutlinedIcon,
@@ -52,9 +64,6 @@ const Loading = /* @__PURE__ */ React.forwardRef((props, ref) => {
   );
 });
 Loading.displayName = "BuiLoading";
-Loading.defaultProps = {
-  direction: "vertical"
-};
 var Loading_default = Loading;
 export {
   Loading_default as default

package/{dist/Loading/Loading.css → es/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/es/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/es/Modal/Modal.js

@@ -34,7 +34,7 @@ import clsx from "clsx";
 import React, { useEffect, useState } from "react";
 import Backdrop from "../Backdrop";
 import Portal from "../Portal";
-import "./Modal.css";
+import "./index.css";
 const prefixCls = "bui-modal";
 const Modal = /* @__PURE__ */ React.forwardRef((props, ref) => {
   const _a = props, {
@@ -106,12 +106,6 @@ const Modal = /* @__PURE__ */ React.forwardRef((props, ref) => {
   ) : null, (open || keepMounted) && children));
 });
 Modal.displayName = "BuiModal";
-Modal.defaultProps = {
-  open: false,
-  disablePortal: false,
-  disableScrollLock: false,
-  hideBackdrop: false
-};
 var Modal_default = Modal;
 export {
   Modal_default as default

package/es/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>>;
+}, "open" | "container" | keyof import("@bifrostui/types").ICommonProps | "disablePortal" | "hideBackdrop" | "BackdropProps" | "onClose" | "disableScrollLock" | "keepMounted">, "ref"> & React.RefAttributes<HTMLDivElement>>;
 export default Modal;

package/es/Modal/Modal.miniapp.js

@@ -35,19 +35,19 @@ import React, { useState } from "react";
 import { View } from "@tarojs/components";
 import Backdrop from "../Backdrop";
 import Portal from "../Portal";
-import "./Modal.css";
+import "./index.css";
 const prefixCls = "bui-modal";
 const Modal = /* @__PURE__ */ React.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, [
@@ -103,12 +103,6 @@ const Modal = /* @__PURE__ */ React.forwardRef(
   }
 );
 Modal.displayName = "BuiModal";
-Modal.defaultProps = {
-  open: false,
-  disablePortal: false,
-  disableScrollLock: false,
-  hideBackdrop: false
-};
 var Modal_miniapp_default = Modal;
 export {
   Modal_miniapp_default as default

package/es/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/es/NavBar/NavBar.js

@@ -30,7 +30,7 @@ import React from "react";
 import clsx from "clsx";
 import { useForkRef, useSize } from "@bifrostui/utils";
 import { ArrowBackwardLargeIcon } from "@bifrostui/icons";
-import "./NavBar.css";
+import "./index.css";
 const prefixCls = "bui-navbar";
 const NavBar = /* @__PURE__ */ React.forwardRef((props, ref) => {
   const _a = props, {
@@ -103,7 +103,6 @@ const NavBar = /* @__PURE__ */ React.forwardRef((props, ref) => {
   return /* @__PURE__ */ React.createElement(React.Fragment, null, renderNavBar(), renderPlaceholder());
 });
 NavBar.displayName = "BuiNavBar";
-NavBar.defaultProps = {};
 var NavBar_default = NavBar;
 export {
   NavBar_default as default