@bifrostui/react 1.2.9-beta.0 → 1.3.1-beta.0

package/es/Breadcrumb/Breadcrumb.types.d.ts

@@ -0,0 +1,49 @@
+import { OverrideProps } from '@bifrostui/types';
+import React from 'react';
+export type BreadcrumbItemProps<D extends React.ElementType = 'li', P = {}> = OverrideProps<{
+    props: P & {
+        /**
+         * 分隔符自定义
+         */
+        separator?: React.ReactNode;
+        /**
+         * body 区域内容
+         */
+        children?: React.ReactNode;
+        /**
+         * 点击事件
+         */
+        onClick?: (e: React.SyntheticEvent) => void;
+    };
+    defaultComponent: D;
+}, D>;
+export type BreadcrumbProps<D extends React.ElementType = 'nav', P = {}> = OverrideProps<{
+    props: P & {
+        /**
+         * 路由栈信息
+         */
+        items?: Array<{
+            /**
+             * 名称
+             */
+            title?: string;
+            /**
+             * 分隔符自定义
+             */
+            separator?: React.ReactNode;
+            /**
+             * 点击事件
+             */
+            onClick?: (e: React.SyntheticEvent) => void;
+        }>;
+        /**
+         * 分隔符自定义
+         */
+        separator?: React.ReactNode;
+        /**
+         * body 区域内容，使用 CollapseItem 进行渲染
+         */
+        children?: React.ReactNode;
+    };
+    defaultComponent: D;
+}, D>;

package/es/Breadcrumb/Breadcrumb.types.js

@@ -0,0 +1 @@
+export {};

package/es/Breadcrumb/BreadcrumbItem.d.ts

@@ -0,0 +1,4 @@
+import React from 'react';
+import { BreadcrumbItemProps } from './Breadcrumb.types';
+declare const BreadcrumbItem: React.ForwardRefExoticComponent<Omit<BreadcrumbItemProps<"li", {}>, "ref"> & React.RefAttributes<HTMLLIElement>>;
+export default BreadcrumbItem;

package/es/Breadcrumb/BreadcrumbItem.js

@@ -0,0 +1,51 @@
+var __defProp = Object.defineProperty;
+var __getOwnPropSymbols = Object.getOwnPropertySymbols;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __propIsEnum = Object.prototype.propertyIsEnumerable;
+var __defNormalProp = (obj, key, value) => key in obj ? __defProp(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
+var __spreadValues = (a, b) => {
+  for (var prop in b || (b = {}))
+    if (__hasOwnProp.call(b, prop))
+      __defNormalProp(a, prop, b[prop]);
+  if (__getOwnPropSymbols)
+    for (var prop of __getOwnPropSymbols(b)) {
+      if (__propIsEnum.call(b, prop))
+        __defNormalProp(a, prop, b[prop]);
+    }
+  return a;
+};
+var __objRest = (source, exclude) => {
+  var target = {};
+  for (var prop in source)
+    if (__hasOwnProp.call(source, prop) && exclude.indexOf(prop) < 0)
+      target[prop] = source[prop];
+  if (source != null && __getOwnPropSymbols)
+    for (var prop of __getOwnPropSymbols(source)) {
+      if (exclude.indexOf(prop) < 0 && __propIsEnum.call(source, prop))
+        target[prop] = source[prop];
+    }
+  return target;
+};
+import React from "react";
+import clsx from "clsx";
+const prefixCls = "bui-breadcrumb-item";
+const BreadcrumbItem = /* @__PURE__ */ React.forwardRef(
+  (props, ref) => {
+    const _a = props, { className, style, separator, children, onClick } = _a, others = __objRest(_a, ["className", "style", "separator", "children", "onClick"]);
+    return /* @__PURE__ */ React.createElement(React.Fragment, null, /* @__PURE__ */ React.createElement(
+      "li",
+      __spreadValues({
+        className: clsx(`${prefixCls}`, className),
+        style,
+        ref,
+        onClick
+      }, others),
+      children
+    ), separator && /* @__PURE__ */ React.createElement("li", { className: `${prefixCls}-separator` }, separator));
+  }
+);
+BreadcrumbItem.displayName = "BuiBreadcrumbItem";
+var BreadcrumbItem_default = BreadcrumbItem;
+export {
+  BreadcrumbItem_default as default
+};

package/es/Breadcrumb/index.d.ts

@@ -0,0 +1,4 @@
+export { default } from './Breadcrumb';
+export { default as Breadcrumb } from './Breadcrumb';
+export { default as BreadcrumbItem } from './BreadcrumbItem';
+export * from './Breadcrumb.types';

package/es/Breadcrumb/index.js

@@ -0,0 +1,9 @@
+import { default as default2 } from "./Breadcrumb";
+import { default as default3 } from "./Breadcrumb";
+import { default as default4 } from "./BreadcrumbItem";
+export * from "./Breadcrumb.types";
+export {
+  default3 as Breadcrumb,
+  default4 as BreadcrumbItem,
+  default2 as default
+};

package/es/Button/Button.css

@@ -1,14 +1,23 @@
 .bui-btn {
+  --border-radius: var(--bui-button-border-radius, 100px);
   --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));
+  --height: var(--bui-button-height, 27px);
+  --icon-start-margin-right: var(--bui-button-icon-start-margin-right, var(--bui-spacing-xs));
+  --icon-start-margin-left: var(--bui-button-icon-start-margin-left, var(--bui-spacing-xs));
+  --disabled-opacity: var(--bui-button-disabled-opacity, 0.5);
+  --small-padding: var(--bui-button-small-padding, 0 11px);
+  --small-height: var(--bui-button-small-height, 24px);
+  --medium-padding: var(--bui-button-medium-padding, 0 14px);
+  --large-padding: var(--bui-button-large-padding, 0 14px);
+  --large-height: var(--bui-button-large-height, 33px);
+  --full-font-size: var(--bui-button-full-font-size, var(--bui-title-size-4));
+  --full-height: var(--bui-button-full-height, 42px);
   border: 1px solid transparent;
   outline: 0;
   background-color: transparent;
   cursor: pointer;
-  color: var(--text-color);
+  color: var(--bui-color-fg-muted);
   box-sizing: border-box;
   position: relative;
   display: inline-flex;
@@ -17,9 +26,9 @@
   justify-content: center;
   white-space: nowrap;
   font-size: var(--bui-text-size-3);
-  font-weight: var(--font-weight);
+  font-weight: var(--bui-font-weight-medium);
   border-radius: var(--border-radius);
-  height: 27px;
+  height: var(--height);
   line-height: var(--bui-line-height);
   font-family: var(--bui-font-family);
 }
@@ -55,36 +64,36 @@
   display: inline-flex;
   align-self: center;
   flex-shrink: 0;
-  margin-right: var(--bui-spacing-xs);
+  margin-right: var(--icon-start-margin-right);
 }
 .bui-btn-icon-end {
   display: inline-flex;
   align-self: center;
   flex-shrink: 0;
-  margin-left: var(--bui-spacing-xs);
+  margin-left: var(--icon-start-margin-left);
 }
 .bui-btn-disabled {
   pointer-events: none;
-  opacity: 0.5;
+  opacity: var(--disabled-opacity);
 }
 .bui-btn-small {
   font-size: var(--bui-text-size-4);
-  padding: 0 11px;
-  height: 24px;
+  padding: var(--small-padding);
+  height: var(--small-height);
 }
 .bui-btn-medium {
-  padding: 0 14px;
-  height: 27px;
+  padding: var(--medium-padding);
+  height: var(--height);
 }
 .bui-btn-large {
   font-size: var(--bui-text-size-2);
-  padding: 0 14px;
-  height: 33px;
+  padding: var(--large-padding);
+  height: var(--large-height);
 }
 .bui-btn-full {
-  font-size: var(--bui-title-size-4);
+  font-size: var(--full-font-size);
   width: 100%;
-  height: 42px;
+  height: var(--full-height);
 }
 .bui-btn-text.bui-btn-primary {
   color: var(--bui-color-primary);

package/es/Calendar/Calendar.css

@@ -1,4 +1,19 @@
 .bui-calendar {
+  --padding: var(--bui-calendar-padding, 6px 12px 7px);
+  --week-height: var(--bui-calendar-week-height, 30px);
+  --handler-height: var(--bui-calendar-handler-height, 28px);
+  --handler-margin-bottom: var(--bui-calendar-handler-margin-bottom, 7px);
+  --handler-text-width: var(--bui-calendar-handler-text-width, 80px);
+  --handler-btn-width: var(--bui-calendar-handler-btn-width, 46px);
+  --handler-btn-height: var(--bui-calendar-handler-btn-height, 100%);
+  --handler-btn-icon-font-size: var(--bui-calendar-handler-btn-icon-font-size, 28px);
+  --day-box-height: var(--bui-calendar-day-box-height, 30px);
+  --day-box-margin-bottom: var(--bui-calendar-day-box-margin-bottom, 7px);
+  --day-disabled-color: var(--bui-calendar-day-disabled-color, #9c9ca5);
+  --middle-color: var(--bui-calendar-middle-color, #000);
+  --middle-background-color: var(--bui-calendar-middle-background-color, #ffeaf1);
+  --range-both-ends-color: var(--bui-calendar-range-both-ends-color, #000);
+  --range-both-ends-background-color: var(--bui-calendar-range-both-ends-background-color, #ffc7da);
   overflow: hidden;
   display: flex;
   flex-direction: column;
@@ -6,11 +21,11 @@
   position: relative;
   width: 100%;
   box-sizing: border-box;
-  padding: 6px 12px 7px;
+  padding: var(--padding);
   font-family: var(--bui-font-family);
 }
 .bui-calendar-week {
-  height: 30px;
+  height: var(--week-height);
   font-size: var(--bui-text-size-2);
   font-weight: var(--bui-font-weight-medium);
   color: var(--bui-color-fg-default);
@@ -29,29 +44,29 @@
   color: var(--bui-color-primary);
 }
 .bui-calendar-handler {
-  height: 28px;
+  height: var(--handler-height);
   display: flex;
   align-items: center;
   justify-content: center;
-  margin-bottom: 7px;
+  margin-bottom: var(--handler-margin-bottom);
 }
 .bui-calendar-handler-text {
-  width: 80px;
+  width: var(--handler-text-width);
   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;
+  height: var(--handler-btn-height);
+  width: var(--handler-btn-width);
   cursor: pointer;
   display: flex;
   align-items: center;
   justify-content: center;
 }
 .bui-calendar-handler-btn-icon {
-  font-size: 28px;
+  font-size: var(--handler-btn-icon-font-size);
 }
 .bui-calendar-month {
   display: flex;
@@ -60,8 +75,8 @@
 }
 .bui-calendar-day-box {
   width: 14.28%;
-  height: 30px;
-  margin-bottom: 7px;
+  height: var(--day-box-height);
+  margin-bottom: var(--day-box-margin-bottom);
 }
 .bui-calendar-highlight-day .bui-calendar-day {
   color: var(--bui-color-primary);
@@ -72,34 +87,34 @@
   display: flex;
   align-items: center;
   justify-content: center;
-  border-radius: 6px;
+  border-radius: var(--bui-shape-radius-default);
   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;
+  color: var(--day-disabled-color);
 }
 .bui-calendar-today {
   color: var(--bui-color-primary);
 }
 .bui-calendar-middle {
-  color: #000;
+  color: var(--middle-color);
   border-radius: 0;
-  background-color: #ffeaf1;
+  background-color: var(--middle-background-color);
 }
 .bui-calendar-start {
-  color: #000;
-  background-color: #ffc7da;
+  color: var(--range-both-ends-color);
+  background-color: var(--range-both-ends-background-color);
 }
 .bui-calendar-range {
   border-top-right-radius: 0;
   border-bottom-right-radius: 0;
 }
 .bui-calendar-end {
-  color: #000;
-  background-color: #ffc7da;
+  color: var(--range-both-ends-color);
+  background-color: var(--range-both-ends-background-color);
   border-top-left-radius: 0;
   border-bottom-left-radius: 0;
 }

package/es/Calendar/Calendar.d.ts

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

package/es/Calendar/Calendar.js

@@ -34,11 +34,17 @@ import { useDidMountEffect, useValue } from "@bifrostui/utils";
 import clsx from "clsx";
 import dayjs from "dayjs";
 import isoWeek from "dayjs/plugin/isoWeek";
-import React, { useMemo, useState } from "react";
-import "./Calendar.css";
+import React, {
+  Suspense,
+  lazy,
+  useMemo,
+  useState
+} from "react";
 import { formatDate, isRange, isSame } from "./utils";
+import { useLocaleText } from "../locales";
+import "./Calendar.css";
+const Picker = lazy(() => import("../Picker"));
 dayjs.extend(isoWeek);
-const SUNDAY_WEEK_DATA = ["\u65E5", "\u4E00", "\u4E8C", "\u4E09", "\u56DB", "\u4E94", "\u516D"];
 const classes = {
   root: "bui-calendar",
   handler: "bui-calendar-handler",
@@ -56,11 +62,16 @@ const Calendar = /* @__PURE__ */ React.forwardRef(
       maxDate,
       mode,
       hideDaysOutsideCurrentMonth,
+      headerBarFormat,
+      headerBarLeftIcon,
+      headerBarRightIcon,
       disabledDate,
+      enableSelectYear,
       highlightDate,
       dateRender,
       weekRender,
       onMonthChange,
+      onYearChange,
       onChange
     } = _a, others = __objRest(_a, [
       "className",
@@ -70,13 +81,28 @@ const Calendar = /* @__PURE__ */ React.forwardRef(
       "maxDate",
       "mode",
       "hideDaysOutsideCurrentMonth",
+      "headerBarFormat",
+      "headerBarLeftIcon",
+      "headerBarRightIcon",
       "disabledDate",
+      "enableSelectYear",
       "highlightDate",
       "dateRender",
       "weekRender",
       "onMonthChange",
+      "onYearChange",
       "onChange"
     ]);
+    const { Monday, Tuesday, Wednesday, Thursday, Friday, Saturday, Sunday } = useLocaleText("calendar");
+    const SUNDAY_WEEK_DATA = [
+      Sunday,
+      Monday,
+      Tuesday,
+      Wednesday,
+      Thursday,
+      Friday,
+      Saturday
+    ];
     const isRangeMode = mode === "range";
     const formattedValue = formatDate(mode, value, minDate, maxDate);
     const formattedDefaultValue = formatDate(
@@ -85,6 +111,7 @@ const Calendar = /* @__PURE__ */ React.forwardRef(
       minDate,
       maxDate
     );
+    const [openPicker, setOpenPicker] = useState(false);
     const [renderMonth, setRenderMonth] = useState(() => {
       const initMonth = formattedValue === void 0 ? formattedDefaultValue == null ? void 0 : formattedDefaultValue[0] : formattedValue == null ? void 0 : formattedValue[0];
       return dayjs(initMonth || minDate).toDate();
@@ -102,6 +129,22 @@ const Calendar = /* @__PURE__ */ React.forwardRef(
     }, [calendarValue]);
     const isMinMonth = dayjs(minDate).isSame(renderMonth, "month");
     const isMaxMonth = dayjs(maxDate).isSame(renderMonth, "month");
+    const headerBarIcon = {
+      left: headerBarLeftIcon ? headerBarLeftIcon({ isMinMonth }) : /* @__PURE__ */ React.createElement(
+        CaretLeftIcon,
+        {
+          className: `${classes.handler}-btn-icon`,
+          htmlColor: isMinMonth && "#cccccc"
+        }
+      ),
+      right: headerBarRightIcon ? headerBarRightIcon({ isMaxMonth }) : /* @__PURE__ */ React.createElement(
+        CaretRightIcon,
+        {
+          className: `${classes.handler}-btn-icon`,
+          htmlColor: isMaxMonth && "#cccccc"
+        }
+      )
+    };
     useDidMountEffect(() => {
       const initMonth = formattedValue === void 0 ? formattedDefaultValue == null ? void 0 : formattedDefaultValue[0] : formattedValue == null ? void 0 : formattedValue[0];
       setRenderMonth(dayjs(initMonth || minDate).toDate());
@@ -147,6 +190,19 @@ const Calendar = /* @__PURE__ */ React.forwardRef(
       });
       return list;
     };
+    const getYearsList = () => {
+      const result = [];
+      let startTime = new Date(minDate).getFullYear();
+      const endTime = new Date(maxDate).getFullYear();
+      while (endTime - startTime >= 0) {
+        result.push({
+          label: startTime,
+          value: startTime
+        });
+        startTime += 1;
+      }
+      return result;
+    };
     const getDayClassName = ({ day: itemDate, disabled }) => {
       let result = "";
       if (disabled)
@@ -225,7 +281,7 @@ const Calendar = /* @__PURE__ */ React.forwardRef(
         setRenderMonth(month);
         onMonthChange == null ? void 0 : onMonthChange(e, {
           type: "prev",
-          month: dayjs(month).format("YYYY/MM")
+          month: dayjs(month).format(headerBarFormat)
         });
       }
     };
@@ -235,10 +291,27 @@ const Calendar = /* @__PURE__ */ React.forwardRef(
         setRenderMonth(month);
         onMonthChange == null ? void 0 : onMonthChange(e, {
           type: "next",
-          month: dayjs(month).format("YYYY/MM")
+          month: dayjs(month).format(headerBarFormat)
         });
       }
     };
+    const onClickDate = (e) => {
+      if (!enableSelectYear) {
+        return;
+      }
+      e.stopPropagation();
+      setOpenPicker(true);
+      getYearsList();
+    };
+    const onClosePicker = (e, data2) => {
+      const selectYear = data2.value[0];
+      e.stopPropagation();
+      setRenderMonth(dayjs(renderMonth).set("year", selectYear).toDate());
+      onYearChange == null ? void 0 : onYearChange(e, {
+        year: selectYear
+      });
+      setOpenPicker(false);
+    };
     let data = {};
     if (isRangeMode) {
       data = {
@@ -260,29 +333,28 @@ const Calendar = /* @__PURE__ */ React.forwardRef(
       }, others), {
         "data-mode": mode
       }), data),
-      /* @__PURE__ */ React.createElement("div", { className: classes.handler }, /* @__PURE__ */ React.createElement("div", { onClick: onClickPrev, className: `${classes.handler}-btn` }, /* @__PURE__ */ React.createElement(
-        CaretLeftIcon,
-        {
-          className: `${classes.handler}-btn-icon`,
-          htmlColor: isMinMonth && "#cccccc"
-        }
-      )), /* @__PURE__ */ React.createElement("div", { className: `${classes.handler}-text` }, dayjs(renderMonth).format("YYYY/MM")), /* @__PURE__ */ React.createElement("div", { onClick: onClickNext, className: `${classes.handler}-btn` }, /* @__PURE__ */ React.createElement(
-        CaretRightIcon,
-        {
-          className: `${classes.handler}-btn-icon`,
-          htmlColor: isMaxMonth && "#cccccc"
-        }
-      ))),
+      /* @__PURE__ */ React.createElement("div", { className: classes.handler }, /* @__PURE__ */ React.createElement("div", { onClick: onClickPrev, className: `${classes.handler}-btn` }, headerBarIcon.left), /* @__PURE__ */ React.createElement("div", { className: `${classes.handler}-text`, onClick: onClickDate }, dayjs(renderMonth).format(headerBarFormat)), /* @__PURE__ */ React.createElement("div", { onClick: onClickNext, className: `${classes.handler}-btn` }, headerBarIcon.right)),
       /* @__PURE__ */ React.createElement("div", { className: classes.week }, SUNDAY_WEEK_DATA == null ? void 0 : SUNDAY_WEEK_DATA.map((w) => {
         return weekRender ? weekRender(w) : /* @__PURE__ */ React.createElement("div", { key: w, className: `${classes.week}-item` }, w);
       })),
-      /* @__PURE__ */ React.createElement("div", { className: clsx(`${classes.root}-month`) }, renderDayList())
+      /* @__PURE__ */ React.createElement("div", { className: clsx(`${classes.root}-month`) }, renderDayList()),
+      enableSelectYear && /* @__PURE__ */ React.createElement(Suspense, { fallback: null }, /* @__PURE__ */ React.createElement(
+        Picker,
+        {
+          options: [getYearsList()],
+          open: openPicker,
+          value: [dayjs(renderMonth).year()],
+          onClose: onClosePicker
+        }
+      ))
     );
   }
 );
 Calendar.displayName = "BuiCalendar";
 Calendar.defaultProps = {
   hideDaysOutsideCurrentMonth: false,
+  headerBarFormat: "YYYY/MM",
+  enableSelectYear: false,
   mode: "single",
   minDate: dayjs(dayjs().format("YYYYMMDD")).add(0, "month").toDate(),
   maxDate: dayjs(dayjs().format("YYYYMMDD")).add(11, "month").toDate(),

package/es/Calendar/Calendar.types.d.ts

@@ -12,6 +12,16 @@ export interface ICalendarMonthChangeData {
     /** 操作类型，prev: 点击上个月 next: 点击下个月 */
     type: 'prev' | 'next';
 }
+export interface ICalendarYearChangeData {
+    /** 切换后的年份 */
+    year: number;
+}
+export interface ICustomIconProps {
+    /** 是否为可选范围内的最小月份 */
+    isMinMonth?: boolean;
+    /** 是否为可选范围内的最大月份 */
+    isMaxMonth?: boolean;
+}
 export type ICalendarMode = 'single' | 'range';
 export type ICalendarValue = Date | Date[] | null;
 export type CalendarProps<D extends React.ElementType = 'div', P = {}> = OverrideProps<{
@@ -43,6 +53,21 @@ export type CalendarProps<D extends React.ElementType = 'div', P = {}> = Overrid
          * 是否隐藏当前月之外的日期，默认为false
          */
         hideDaysOutsideCurrentMonth?: boolean;
+        /**
+         * 头部操作栏日期显示格式
+         * @default YYYY/MM
+         */
+        headerBarFormat?: string;
+        /**
+         * 头部操作栏左边图标
+         * @defaultReturn <CaretLeftIcon />
+         */
+        headerBarLeftIcon?: (options: ICustomIconProps) => React.ReactNode;
+        /**
+         * 头部操作栏右边图标
+         * @defaultReturn <CaretRightIcon />
+         */
+        headerBarRightIcon?: (options: ICustomIconProps) => React.ReactNode;
         /**
          * 不可选择的日期
          */
@@ -61,6 +86,14 @@ export type CalendarProps<D extends React.ElementType = 'div', P = {}> = Overrid
          * 自定义周单元格的内容
          */
         weekRender?: (week: string) => React.ReactNode;
+        /**
+         * 是否开启选择年
+         */
+        enableSelectYear?: boolean;
+        /**
+         * 年份发生变化的回调
+         */
+        onYearChange?: (e: React.SyntheticEvent, data: ICalendarYearChangeData) => void;
         /**
          * 月份发生变化的回调
          */

package/es/Card/CardFooter.css

@@ -1,8 +1,9 @@
 .bui-card-footer {
+  --padding: var(--bui-card-footer-padding, var(--bui-spacing-md) var(--bui-spacing-lg));
   color: var(--bui-color-fg-muted);
   font-size: var(--bui-text-size-1);
   display: flex;
   align-items: center;
-  padding: var(--bui-spacing-md) var(--bui-spacing-lg);
+  padding: var(--padding);
   font-family: var(--bui-font-family);
 }

package/es/Card/CardHeader.css

@@ -1,11 +1,13 @@
 .bui-card-header {
+  --padding: var(--bui-card-header-padding, var(--bui-spacing-md) var(--bui-spacing-lg));
+  --end-icon-margin-left: var(--bui-card-header-end-icon-margin-left, 2px);
   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;
+  font-weight: var(--bui-font-weight-medium);
   color: var(--bui-color-fg-default);
   font-family: var(--bui-font-family);
 }

package/es/Checkbox/Checkbox.css

@@ -1,7 +1,9 @@
 .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);
+  --label-color: var(--bui-checkbox-label-color, --bui-color-fg-default);
+  --label-font-size: var(--bui-checkbox-label-font-size, var(--bui-text-size-1));
+  --icon-font-size: var(--bui-checkbox-icon-font-size, var(--bui-title-size-2));
+  --disabled-opacity: var(--bui-checkbox-disabled-opacity, 0.5);
+  --icon-padding: var(--bui-checkbox-icon-padding, 5px);
   display: inline-flex;
   align-items: center;
   position: relative;
@@ -9,7 +11,7 @@
 }
 .bui-checkbox.bui-checkbox-disabled {
   pointer-events: none;
-  opacity: 0.5;
+  opacity: var(--disabled-opacity);
 }
 .bui-checkbox-label-left {
   flex-direction: row-reverse;
@@ -35,7 +37,7 @@
   align-items: center;
   justify-content: center;
   flex-shrink: 0;
-  padding: 5px;
+  padding: var(--icon-padding);
   box-sizing: border-box;
   font-size: var(--icon-font-size);
 }