react-better-html 1.1.288 → 1.1.290

package/dist/index.d.mts

@@ -70,6 +70,7 @@ type ButtonComponent = {
     <Value>(props: ButtonProps<Value>): React.ReactElement;
     secondary: <Value>(props: ButtonProps<Value>) => React.ReactElement;
     destructive: <Value>(props: ButtonProps<Value>) => React.ReactElement;
+    text: <Value>(props: ButtonProps<Value>) => React.ReactElement;
     icon: <Value>(props: OmitProps<ButtonProps<Value>, "icon" | "width" | "height" | "isSmall"> & {
         icon: IconName | AnyOtherString;
         /** @default 16 */
@@ -89,6 +90,7 @@ declare const ButtonComponent: ButtonComponent;
 declare const Button: typeof ButtonComponent & {
     secondary: typeof ButtonComponent.secondary;
     destructive: typeof ButtonComponent.destructive;
+    text: typeof ButtonComponent.text;
     icon: typeof ButtonComponent.icon;
     upload: typeof ButtonComponent.upload;
 };
@@ -221,6 +223,8 @@ type PageHeaderProps = {
     rightElement?: React.ReactNode;
     /** @default false */
     lightMode?: boolean;
+    width?: React.CSSProperties["width"];
+    flex?: React.CSSProperties["flex"];
 } & Pick<ComponentMarginProps, "marginBottom">;
 type PageHeaderComponentType = {
     (props: ComponentPropWithRef<HTMLDivElement, PageHeaderProps>): React.ReactElement;
@@ -581,7 +585,7 @@ type BetterHtmlConfig = {
     language: Language | undefined;
     components: {
         button?: {
-            style?: ComponentStyleConfig<ButtonProps, "default" | "secondary" | "destructive" | "icon" | "upload">;
+            style?: ComponentStyleConfig<ButtonProps, "default" | "secondary" | "destructive" | "text" | "icon" | "upload">;
             tagReplacement?: ComponentTagReplacementConfig<"buttonComponent" | "linkComponent">;
         };
         inputField?: {
@@ -712,7 +716,7 @@ declare const sideMenuControls: {
     close: () => void;
     toggleOpened: () => void;
 };
-declare const filterHover: () => Record<"z05" | "z1" | "z2" | "z3", React.CSSProperties["filter"]>;
+declare const filterHover: () => Record<"z05" | "z1" | "z2" | "z3" | "b05" | "b1" | "b2" | "b3", React.CSSProperties["filter"]>;
 
 declare function generateLocalStorage<LocalStorage extends object>(): {
     setItem: <StorageName extends keyof LocalStorage>(name: StorageName, value: LocalStorage[StorageName]) => void;

package/dist/index.d.ts

@@ -70,6 +70,7 @@ type ButtonComponent = {
     <Value>(props: ButtonProps<Value>): React.ReactElement;
     secondary: <Value>(props: ButtonProps<Value>) => React.ReactElement;
     destructive: <Value>(props: ButtonProps<Value>) => React.ReactElement;
+    text: <Value>(props: ButtonProps<Value>) => React.ReactElement;
     icon: <Value>(props: OmitProps<ButtonProps<Value>, "icon" | "width" | "height" | "isSmall"> & {
         icon: IconName | AnyOtherString;
         /** @default 16 */
@@ -89,6 +90,7 @@ declare const ButtonComponent: ButtonComponent;
 declare const Button: typeof ButtonComponent & {
     secondary: typeof ButtonComponent.secondary;
     destructive: typeof ButtonComponent.destructive;
+    text: typeof ButtonComponent.text;
     icon: typeof ButtonComponent.icon;
     upload: typeof ButtonComponent.upload;
 };
@@ -221,6 +223,8 @@ type PageHeaderProps = {
     rightElement?: React.ReactNode;
     /** @default false */
     lightMode?: boolean;
+    width?: React.CSSProperties["width"];
+    flex?: React.CSSProperties["flex"];
 } & Pick<ComponentMarginProps, "marginBottom">;
 type PageHeaderComponentType = {
     (props: ComponentPropWithRef<HTMLDivElement, PageHeaderProps>): React.ReactElement;
@@ -581,7 +585,7 @@ type BetterHtmlConfig = {
     language: Language | undefined;
     components: {
         button?: {
-            style?: ComponentStyleConfig<ButtonProps, "default" | "secondary" | "destructive" | "icon" | "upload">;
+            style?: ComponentStyleConfig<ButtonProps, "default" | "secondary" | "destructive" | "text" | "icon" | "upload">;
             tagReplacement?: ComponentTagReplacementConfig<"buttonComponent" | "linkComponent">;
         };
         inputField?: {
@@ -712,7 +716,7 @@ declare const sideMenuControls: {
     close: () => void;
     toggleOpened: () => void;
 };
-declare const filterHover: () => Record<"z05" | "z1" | "z2" | "z3", React.CSSProperties["filter"]>;
+declare const filterHover: () => Record<"z05" | "z1" | "z2" | "z3" | "b05" | "b1" | "b2" | "b3", React.CSSProperties["filter"]>;
 
 declare function generateLocalStorage<LocalStorage extends object>(): {
     setItem: <StorageName extends keyof LocalStorage>(name: StorageName, value: LocalStorage[StorageName]) => void;

package/dist/index.js

@@ -1693,6 +1693,8 @@ var PageHeaderComponent = (0, import_react7.forwardRef)(function PageHeader({
   textAlign,
   rightElement,
   lightMode,
+  width,
+  flex,
   marginBottom
 }, ref) {
   const theme2 = (0, import_react_better_core6.useTheme)();
@@ -1703,6 +1705,8 @@ var PageHeaderComponent = (0, import_react7.forwardRef)(function PageHeader({
   return /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)(
     Div_default.row,
     {
+      width,
+      flex,
       alignItems: "center",
       gap: imageGap ?? theme2.styles.space,
       marginBottom: marginBottom ?? theme2.styles.space * 2,
@@ -2080,7 +2084,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)"
   };
 };
 
@@ -2219,6 +2227,7 @@ var ButtonComponent = function Button({
     value,
     download,
     target,
+    gap,
     icon,
     iconPosition = "left",
     iconColor,
@@ -2310,7 +2319,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,
@@ -2384,6 +2393,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 = (0, import_react_better_core9.useTheme)();
+  const readyColor = color ?? theme2.colors.textPrimary;
+  return /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(
+    ButtonComponent,
+    {
+      fontWeight: 700,
+      color: readyColor,
+      colorHover: (0, import_react_better_core9.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(
@@ -2443,6 +2478,7 @@ ButtonComponent.upload = function Upload({ accept, multiple, onUpload, ...button
 var Button2 = (0, import_react10.memo)(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;