react-better-html 1.1.288 → 1.1.290

package/dist/index.mjs

@@ -4,7 +4,7 @@ import {
   useLoader as useLoader2,
   useLoaderControls,
   countries as countries3,
-  lightenColor as lightenColor4,
+  lightenColor as lightenColor5,
   darkenColor as darkenColor4,
   saturateColor,
   desaturateColor,
@@ -1620,6 +1620,8 @@ var PageHeaderComponent = forwardRef5(function PageHeader({
   textAlign,
   rightElement,
   lightMode,
+  width,
+  flex,
   marginBottom
 }, ref) {
   const theme2 = useTheme6();
@@ -1630,6 +1632,8 @@ var PageHeaderComponent = forwardRef5(function PageHeader({
   return /* @__PURE__ */ jsxs2(
     Div_default.row,
     {
+      width,
+      flex,
       alignItems: "center",
       gap: imageGap ?? theme2.styles.space,
       marginBottom: marginBottom ?? theme2.styles.space * 2,
@@ -1940,6 +1944,7 @@ var localStoragePlugin = (options) => ({
 // src/components/Button.tsx
 import { memo as memo8, useCallback as useCallback4 } from "react";
 import {
+  lightenColor,
   useBetterCoreContext as useBetterCoreContext3,
   useLoader,
   useTheme as useTheme9
@@ -2011,7 +2016,11 @@ var filterHover = () => {
     z05: externalBetterCoreContextValue.colorTheme === "dark" ? "brightness(1.2)" : "brightness(0.95)",
     z1: externalBetterCoreContextValue.colorTheme === "dark" ? "brightness(1.3)" : "brightness(0.9)",
     z2: externalBetterCoreContextValue.colorTheme === "dark" ? "brightness(1.6)" : "brightness(0.8)",
-    z3: externalBetterCoreContextValue.colorTheme === "dark" ? "brightness(1.9)" : "brightness(0.7)"
+    z3: externalBetterCoreContextValue.colorTheme === "dark" ? "brightness(1.9)" : "brightness(0.7)",
+    b05: externalBetterCoreContextValue.colorTheme === "dark" ? "brightness(0.8)" : "brightness(1.05)",
+    b1: externalBetterCoreContextValue.colorTheme === "dark" ? "brightness(0.7)" : "brightness(1.1)",
+    b2: externalBetterCoreContextValue.colorTheme === "dark" ? "brightness(0.4)" : "brightness(1.2)",
+    b3: externalBetterCoreContextValue.colorTheme === "dark" ? "brightness(0.1)" : "brightness(1.3)"
   };
 };
 
@@ -2150,6 +2159,7 @@ var ButtonComponent = function Button({
     value,
     download,
     target,
+    gap,
     icon,
     iconPosition = "left",
     iconColor,
@@ -2241,7 +2251,7 @@ var ButtonComponent = function Button({
             height: href ? "100%" : void 0,
             alignItems: "center",
             justifyContent: "center",
-            gap: 10,
+            gap: gap ?? (theme2.styles.gap + theme2.styles.space) / 2,
             pointerEvents: "none",
             opacity: isLoadingElement ? 0 : 1,
             transition: theme2.styles.transition,
@@ -2315,6 +2325,32 @@ ButtonComponent.destructive = function Destructive(buttonProps) {
     }
   );
 };
+ButtonComponent.text = function Text3(buttonProps) {
+  const betterHtmlContextInternal = useBetterHtmlContextInternal();
+  const { color, ...props } = useComponentsPropsMerger(
+    betterHtmlContextInternal.components.button?.style?.text,
+    buttonProps
+  );
+  const theme2 = useTheme9();
+  const readyColor = color ?? theme2.colors.textPrimary;
+  return /* @__PURE__ */ jsx8(
+    ButtonComponent,
+    {
+      fontWeight: 700,
+      color: readyColor,
+      colorHover: lightenColor(readyColor, 0.3),
+      backgroundColor: "transparent",
+      backgroundColorHover: "transparent",
+      borderRadius: 0,
+      loaderSize: 12,
+      gap: theme2.styles.gap,
+      paddingInline: theme2.styles.gap,
+      paddingBlock: theme2.styles.gap / 2,
+      ...fromSubcomponentProps,
+      ...props
+    }
+  );
+};
 ButtonComponent.icon = function Icon3({ size = 16, buttonSize, backgroundButtonColor, ...buttonProps }) {
   const betterHtmlContextInternal = useBetterHtmlContextInternal();
   const { ...props } = useComponentsPropsMerger(
@@ -2374,6 +2410,7 @@ ButtonComponent.upload = function Upload({ accept, multiple, onUpload, ...button
 var Button2 = memo8(ButtonComponent);
 Button2.secondary = ButtonComponent.secondary;
 Button2.destructive = ButtonComponent.destructive;
+Button2.text = ButtonComponent.text;
 Button2.icon = ButtonComponent.icon;
 Button2.upload = ButtonComponent.upload;
 var Button_default = Button2;
@@ -3628,7 +3665,7 @@ var PageHolder_default = PageHolder2;
 
 // src/components/Chip.tsx
 import { forwardRef as forwardRef9, memo as memo14, useCallback as useCallback8 } from "react";
-import { darkenColor, lightenColor, useBetterCoreContext as useBetterCoreContext6, useTheme as useTheme15 } from "react-better-core";
+import { darkenColor, lightenColor as lightenColor2, useBetterCoreContext as useBetterCoreContext6, useTheme as useTheme15 } from "react-better-core";
 import { jsx as jsx15, jsxs as jsxs10 } from "react/jsx-runtime";
 var borderRadiusOffset = 1.3;
 var ChipComponent = forwardRef9(function Chip({ fromSubcomponent, ...chipProps }, ref) {
@@ -3690,7 +3727,7 @@ ChipComponent.colored = forwardRef9(function Colored({ color, withWhiteBackgroun
   const chip = /* @__PURE__ */ jsx15(
     ChipComponent,
     {
-      color: colorTheme === "light" ? darkenColor(readyColor, 0.7) : lightenColor(readyColor, 0.7),
+      color: colorTheme === "light" ? darkenColor(readyColor, 0.7) : lightenColor2(readyColor, 0.7),
       backgroundColor: readyColor + "40",
       border: `${theme2.styles.borderWidth}px solid ${readyColor}`,
       ref,
@@ -3715,7 +3752,7 @@ var Chip_default = Chip2;
 import { forwardRef as forwardRef11, memo as memo18, useCallback as useCallback11, useState as useState7, useEffect as useEffect9, useMemo as useMemo6, useRef as useRef5, useId as useId2 } from "react";
 import {
   darkenColor as darkenColor2,
-  lightenColor as lightenColor2,
+  lightenColor as lightenColor3,
   useBooleanState as useBooleanState5,
   useDebounceState as useDebounceState2,
   countries as countries2,
@@ -4778,7 +4815,7 @@ var InputFieldComponent = forwardRef11(function InputField(inputFieldProps, ref)
           justifyContent: "center",
           border: `${theme2.styles.borderWidth}px solid ${theme2.colors.border}`,
           borderRight: "none",
-          backgroundColor: prefixBackgroundColor ?? (colorTheme === "light" ? darkenColor2(theme2.colors.backgroundContent, 0.03) : lightenColor2(theme2.colors.backgroundContent, 0.1)),
+          backgroundColor: prefixBackgroundColor ?? (colorTheme === "light" ? darkenColor2(theme2.colors.backgroundContent, 0.03) : lightenColor3(theme2.colors.backgroundContent, 0.1)),
           borderTopLeftRadius: theme2.styles.borderRadius,
           borderBottomLeftRadius: theme2.styles.borderRadius,
           paddingInline: theme2.styles.space,
@@ -4853,7 +4890,7 @@ var InputFieldComponent = forwardRef11(function InputField(inputFieldProps, ref)
           justifyContent: "center",
           border: `${theme2.styles.borderWidth}px solid ${theme2.colors.border}`,
           borderLeft: "none",
-          backgroundColor: suffixBackgroundColor ?? (colorTheme === "light" ? darkenColor2(theme2.colors.backgroundContent, 0.03) : lightenColor2(theme2.colors.backgroundContent, 0.1)),
+          backgroundColor: suffixBackgroundColor ?? (colorTheme === "light" ? darkenColor2(theme2.colors.backgroundContent, 0.03) : lightenColor3(theme2.colors.backgroundContent, 0.1)),
           borderTopRightRadius: theme2.styles.borderRadius,
           borderBottomRightRadius: theme2.styles.borderRadius,
           paddingInline: theme2.styles.space,
@@ -8056,7 +8093,7 @@ var Foldable_default = Foldable2;
 import { createContext as createContext2, memo as memo27, useCallback as useCallback19, useContext as useContext2, useEffect as useEffect16, useMemo as useMemo12, useState as useState15 } from "react";
 import {
   calculateColorContrast,
-  lightenColor as lightenColor3,
+  lightenColor as lightenColor4,
   useBetterCoreContext as useBetterCoreContext10,
   useBooleanState as useBooleanState8,
   useTheme as useTheme29
@@ -8131,7 +8168,7 @@ var MenuItemTypeItem = memo27(function MenuItemTypeItem2({
           alignItems: "center",
           gap: iconGap,
           whiteSpace: "nowrap",
-          backgroundColor: isActive ? activeItemColor ?? (colorTheme === "dark" ? lightenColor3(theme2.colors.primary, 0.7) : lightenColor3(theme2.colors.primary, 0.85)) : readyBackgroundColor,
+          backgroundColor: isActive ? activeItemColor ?? (colorTheme === "dark" ? lightenColor4(theme2.colors.primary, 0.7) : lightenColor4(theme2.colors.primary, 0.85)) : readyBackgroundColor,
           backgroundColorHover: isActive && activeItemColor ? void 0 : hoverItemColor,
           borderRadius: theme2.styles.borderRadius,
           paddingBlock,
@@ -8747,7 +8784,7 @@ export {
   getPluralWord2 as getPluralWord,
   isApiError,
   isMobileDevice,
-  lightenColor4 as lightenColor,
+  lightenColor5 as lightenColor,
   loaderControls,
   localStoragePlugin,
   log,