react-better-html 1.1.87 → 1.1.88

package/dist/index.d.mts

@@ -332,14 +332,20 @@ type ChipProps = {
     backgroundColor?: string;
     /** @default theme.styles.borderRadius / 1.3 */
     borderRadius?: number;
-};
+    /** @default false */
+    isSmall?: boolean;
+    /** @default false */
+    isCircle?: boolean;
+} & Pick<DivProps<unknown>, "border" | "borderColor" | "borderWidth" | "borderStyle"> & Pick<TextProps, "fontFamily" | "fontSize" | "fontWeight" | "fontStyle">;
 type ChipComponentType = {
     (props: ComponentPropWithRef<HTMLDivElement, ChipProps>): React.ReactElement;
-    circle: (props: ComponentPropWithRef<HTMLDivElement, OmitProps<ChipProps, "borderRadius">>) => React.ReactElement;
+    colored: (props: ComponentPropWithRef<HTMLDivElement, OmitProps<ChipProps, "color" | "backgroundColor"> & {
+        color?: Color;
+    }>) => React.ReactElement;
 };
 declare const ChipComponent: ChipComponentType;
 declare const Chip: typeof ChipComponent & {
-    circle: typeof ChipComponent.circle;
+    colored: typeof ChipComponent.colored;
 };
 
 type InputFieldProps = {
@@ -745,6 +751,11 @@ declare const getBrowser: () => BrowserName | undefined;
 declare const formatPhoneNumber: (phoneNumber: string) => string;
 declare const getFormErrorObject: <FormFields extends ReturnType<typeof useForm>["values"]>(formValues: FormFields) => PartialRecord<keyof FormFields, string>;
 
+declare const lightenColor: (hexColor: string, amount: number) => string;
+declare const darkenColor: (hexColor: string, amount: number) => string;
+declare const saturateColor: (hexColor: string, amount: number) => string;
+declare const desaturateColor: (hexColor: string, amount: number) => string;
+
 declare const loaderControls: {
     startLoading: (loaderName: LoaderName | AnyOtherString) => void;
     stopLoading: (loaderName: LoaderName | AnyOtherString) => void;
@@ -754,4 +765,4 @@ declare const isMobileDevice: boolean;
 
 declare const reactRouterDomPlugin: BetterHtmlPlugin;
 
-export { type AppConfig, type AssetName, type AssetsConfig, type BetterHtmlConfig, type BetterHtmlPlugin, _default as BetterHtmlProvider, type BetterHtmlProviderValue, type BrowserName, Button, type ButtonProps, Chip, type ChipProps, type Color, type ColorName, type ColorTheme, ColorThemeSwitch, type ColorThemeSwitchProps, type Colors, type DeepPartialRecord, Div, type DivProps, _default$6 as Divider, Dropdown, type DropdownOption, type DropdownProps, type ExcludeOptions, Foldable, type FoldableProps, type FoldableRef, _default$2 as Form, type FormProps, FormRow, type FormRowProps, type HorizontalDividerProps, _default$8 as Icon, type IconName, type IconProps, type IconsConfig, _default$7 as Image, type ImageProps, InputField, type InputFieldProps, _default$1 as Label, type LabelProps, Loader, type LoaderConfig, type LoaderName, type LoaderProps, Modal, type ModalProps, type ModalRef, type OmitProps, _default$4 as PageHeader, type PageHeaderProps, _default$5 as PageHolder, type PageHolderProps, type PartialRecord, type PickAllRequired, type PickValue, type PluginName, type Styles, type TabGroup, Table, type TableColumn, type TableProps, Tabs, type TabsProps, type TabsRef, Text, type TextAs, type TextProps, type TextareaFieldProps, type Theme, type ThemeConfig, _default$3 as ToggleInput, type ToggleInputProps, type ToggleInputRef, type VerticalDividerProps, formatPhoneNumber, generateRandomString, getBrowser, getFormErrorObject, isMobileDevice, loaderControls, reactRouterDomPlugin, useBetterHtmlContext, useBooleanState, useDebounceState, useForm, useLoader, useLoaderControls, useMediaQuery, usePageResize, usePageScroll, useTheme, useUrlQuery };
+export { type AppConfig, type AssetName, type AssetsConfig, type BetterHtmlConfig, type BetterHtmlPlugin, _default as BetterHtmlProvider, type BetterHtmlProviderValue, type BrowserName, Button, type ButtonProps, Chip, type ChipProps, type Color, type ColorName, type ColorTheme, ColorThemeSwitch, type ColorThemeSwitchProps, type Colors, type DeepPartialRecord, Div, type DivProps, _default$6 as Divider, Dropdown, type DropdownOption, type DropdownProps, type ExcludeOptions, Foldable, type FoldableProps, type FoldableRef, _default$2 as Form, type FormProps, FormRow, type FormRowProps, type HorizontalDividerProps, _default$8 as Icon, type IconName, type IconProps, type IconsConfig, _default$7 as Image, type ImageProps, InputField, type InputFieldProps, _default$1 as Label, type LabelProps, Loader, type LoaderConfig, type LoaderName, type LoaderProps, Modal, type ModalProps, type ModalRef, type OmitProps, _default$4 as PageHeader, type PageHeaderProps, _default$5 as PageHolder, type PageHolderProps, type PartialRecord, type PickAllRequired, type PickValue, type PluginName, type Styles, type TabGroup, Table, type TableColumn, type TableProps, Tabs, type TabsProps, type TabsRef, Text, type TextAs, type TextProps, type TextareaFieldProps, type Theme, type ThemeConfig, _default$3 as ToggleInput, type ToggleInputProps, type ToggleInputRef, type VerticalDividerProps, darkenColor, desaturateColor, formatPhoneNumber, generateRandomString, getBrowser, getFormErrorObject, isMobileDevice, lightenColor, loaderControls, reactRouterDomPlugin, saturateColor, useBetterHtmlContext, useBooleanState, useDebounceState, useForm, useLoader, useLoaderControls, useMediaQuery, usePageResize, usePageScroll, useTheme, useUrlQuery };

package/dist/index.d.ts

@@ -332,14 +332,20 @@ type ChipProps = {
     backgroundColor?: string;
     /** @default theme.styles.borderRadius / 1.3 */
     borderRadius?: number;
-};
+    /** @default false */
+    isSmall?: boolean;
+    /** @default false */
+    isCircle?: boolean;
+} & Pick<DivProps<unknown>, "border" | "borderColor" | "borderWidth" | "borderStyle"> & Pick<TextProps, "fontFamily" | "fontSize" | "fontWeight" | "fontStyle">;
 type ChipComponentType = {
     (props: ComponentPropWithRef<HTMLDivElement, ChipProps>): React.ReactElement;
-    circle: (props: ComponentPropWithRef<HTMLDivElement, OmitProps<ChipProps, "borderRadius">>) => React.ReactElement;
+    colored: (props: ComponentPropWithRef<HTMLDivElement, OmitProps<ChipProps, "color" | "backgroundColor"> & {
+        color?: Color;
+    }>) => React.ReactElement;
 };
 declare const ChipComponent: ChipComponentType;
 declare const Chip: typeof ChipComponent & {
-    circle: typeof ChipComponent.circle;
+    colored: typeof ChipComponent.colored;
 };
 
 type InputFieldProps = {
@@ -745,6 +751,11 @@ declare const getBrowser: () => BrowserName | undefined;
 declare const formatPhoneNumber: (phoneNumber: string) => string;
 declare const getFormErrorObject: <FormFields extends ReturnType<typeof useForm>["values"]>(formValues: FormFields) => PartialRecord<keyof FormFields, string>;
 
+declare const lightenColor: (hexColor: string, amount: number) => string;
+declare const darkenColor: (hexColor: string, amount: number) => string;
+declare const saturateColor: (hexColor: string, amount: number) => string;
+declare const desaturateColor: (hexColor: string, amount: number) => string;
+
 declare const loaderControls: {
     startLoading: (loaderName: LoaderName | AnyOtherString) => void;
     stopLoading: (loaderName: LoaderName | AnyOtherString) => void;
@@ -754,4 +765,4 @@ declare const isMobileDevice: boolean;
 
 declare const reactRouterDomPlugin: BetterHtmlPlugin;
 
-export { type AppConfig, type AssetName, type AssetsConfig, type BetterHtmlConfig, type BetterHtmlPlugin, _default as BetterHtmlProvider, type BetterHtmlProviderValue, type BrowserName, Button, type ButtonProps, Chip, type ChipProps, type Color, type ColorName, type ColorTheme, ColorThemeSwitch, type ColorThemeSwitchProps, type Colors, type DeepPartialRecord, Div, type DivProps, _default$6 as Divider, Dropdown, type DropdownOption, type DropdownProps, type ExcludeOptions, Foldable, type FoldableProps, type FoldableRef, _default$2 as Form, type FormProps, FormRow, type FormRowProps, type HorizontalDividerProps, _default$8 as Icon, type IconName, type IconProps, type IconsConfig, _default$7 as Image, type ImageProps, InputField, type InputFieldProps, _default$1 as Label, type LabelProps, Loader, type LoaderConfig, type LoaderName, type LoaderProps, Modal, type ModalProps, type ModalRef, type OmitProps, _default$4 as PageHeader, type PageHeaderProps, _default$5 as PageHolder, type PageHolderProps, type PartialRecord, type PickAllRequired, type PickValue, type PluginName, type Styles, type TabGroup, Table, type TableColumn, type TableProps, Tabs, type TabsProps, type TabsRef, Text, type TextAs, type TextProps, type TextareaFieldProps, type Theme, type ThemeConfig, _default$3 as ToggleInput, type ToggleInputProps, type ToggleInputRef, type VerticalDividerProps, formatPhoneNumber, generateRandomString, getBrowser, getFormErrorObject, isMobileDevice, loaderControls, reactRouterDomPlugin, useBetterHtmlContext, useBooleanState, useDebounceState, useForm, useLoader, useLoaderControls, useMediaQuery, usePageResize, usePageScroll, useTheme, useUrlQuery };
+export { type AppConfig, type AssetName, type AssetsConfig, type BetterHtmlConfig, type BetterHtmlPlugin, _default as BetterHtmlProvider, type BetterHtmlProviderValue, type BrowserName, Button, type ButtonProps, Chip, type ChipProps, type Color, type ColorName, type ColorTheme, ColorThemeSwitch, type ColorThemeSwitchProps, type Colors, type DeepPartialRecord, Div, type DivProps, _default$6 as Divider, Dropdown, type DropdownOption, type DropdownProps, type ExcludeOptions, Foldable, type FoldableProps, type FoldableRef, _default$2 as Form, type FormProps, FormRow, type FormRowProps, type HorizontalDividerProps, _default$8 as Icon, type IconName, type IconProps, type IconsConfig, _default$7 as Image, type ImageProps, InputField, type InputFieldProps, _default$1 as Label, type LabelProps, Loader, type LoaderConfig, type LoaderName, type LoaderProps, Modal, type ModalProps, type ModalRef, type OmitProps, _default$4 as PageHeader, type PageHeaderProps, _default$5 as PageHolder, type PageHolderProps, type PartialRecord, type PickAllRequired, type PickValue, type PluginName, type Styles, type TabGroup, Table, type TableColumn, type TableProps, Tabs, type TabsProps, type TabsRef, Text, type TextAs, type TextProps, type TextareaFieldProps, type Theme, type ThemeConfig, _default$3 as ToggleInput, type ToggleInputProps, type ToggleInputRef, type VerticalDividerProps, darkenColor, desaturateColor, formatPhoneNumber, generateRandomString, getBrowser, getFormErrorObject, isMobileDevice, lightenColor, loaderControls, reactRouterDomPlugin, saturateColor, useBetterHtmlContext, useBooleanState, useDebounceState, useForm, useLoader, useLoaderControls, useMediaQuery, usePageResize, usePageScroll, useTheme, useUrlQuery };

package/dist/index.js

@@ -52,13 +52,17 @@ __export(index_exports, {
   Tabs: () => Tabs_default,
   Text: () => Text_default,
   ToggleInput: () => ToggleInput_default,
+  darkenColor: () => darkenColor,
+  desaturateColor: () => desaturateColor,
   formatPhoneNumber: () => formatPhoneNumber,
   generateRandomString: () => generateRandomString,
   getBrowser: () => getBrowser,
   getFormErrorObject: () => getFormErrorObject,
   isMobileDevice: () => isMobileDevice,
+  lightenColor: () => lightenColor,
   loaderControls: () => loaderControls,
   reactRouterDomPlugin: () => reactRouterDomPlugin,
+  saturateColor: () => saturateColor,
   useBetterHtmlContext: () => useBetterHtmlContext,
   useBooleanState: () => useBooleanState,
   useDebounceState: () => useDebounceState,
@@ -1422,8 +1426,8 @@ var theme = {
       error: "#f5384b",
       base: "#f8f8f8",
       backgroundBase: "#111111",
-      backgroundSecondary: "#222222",
-      backgroundContent: "#333333",
+      backgroundSecondary: "#282828",
+      backgroundContent: "#444444",
       border: "#777777"
     }
   }
@@ -3169,27 +3173,160 @@ var PageHeader_default = (0, import_react13.memo)(PageHeader);
 
 // src/components/Chip.tsx
 var import_react14 = require("react");
+
+// src/utils/colorManipulation.ts
+var rgbToHsl = (r, g, b) => {
+  r /= 255;
+  g /= 255;
+  b /= 255;
+  const max = Math.max(r, g, b);
+  const min = Math.min(r, g, b);
+  let h = 0;
+  let s = 0;
+  const l = (max + min) / 2;
+  if (max !== min) {
+    const d = max - min;
+    s = l > 0.5 ? d / (2 - max - min) : d / (max + min);
+    switch (max) {
+      case r:
+        h = (g - b) / d + (g < b ? 6 : 0);
+        break;
+      case g:
+        h = (b - r) / d + 2;
+        break;
+      case b:
+        h = (r - g) / d + 4;
+        break;
+    }
+    h /= 6;
+  }
+  return [h, s, l];
+};
+var hslToRgb = (h, s, l) => {
+  let r, g, b;
+  if (s === 0) {
+    r = g = b = l;
+  } else {
+    const hue2rgb = (p2, q2, t) => {
+      if (t < 0) t += 1;
+      if (t > 1) t -= 1;
+      if (t < 1 / 6) return p2 + (q2 - p2) * 6 * t;
+      if (t < 1 / 2) return q2;
+      if (t < 2 / 3) return p2 + (q2 - p2) * (2 / 3 - t) * 6;
+      return p2;
+    };
+    const q = l < 0.5 ? l * (1 + s) : l + s - l * s;
+    const p = 2 * l - q;
+    r = hue2rgb(p, q, h + 1 / 3);
+    g = hue2rgb(p, q, h);
+    b = hue2rgb(p, q, h - 1 / 3);
+  }
+  return [Math.round(r * 255), Math.round(g * 255), Math.round(b * 255)];
+};
+var lightenColor = (hexColor, amount) => {
+  let hex = hexColor.replace(/^#/, "");
+  if (hex.length === 3) {
+    hex = hex[0] + hex[0] + hex[1] + hex[1] + hex[2] + hex[2];
+  }
+  const safeAmount = Math.max(0, Math.min(1, amount));
+  const r = parseInt(hex.substring(0, 2), 16);
+  const g = parseInt(hex.substring(2, 4), 16);
+  const b = parseInt(hex.substring(4, 6), 16);
+  const lightenComponent = (component) => {
+    return Math.round(component + (255 - component) * safeAmount);
+  };
+  const rHex = lightenComponent(r).toString(16).padStart(2, "0");
+  const gHex = lightenComponent(g).toString(16).padStart(2, "0");
+  const bHex = lightenComponent(b).toString(16).padStart(2, "0");
+  return `#${rHex}${gHex}${bHex}`;
+};
+var darkenColor = (hexColor, amount) => {
+  let hex = hexColor.replace(/^#/, "");
+  if (hex.length === 3) {
+    hex = hex[0] + hex[0] + hex[1] + hex[1] + hex[2] + hex[2];
+  }
+  const safeAmount = Math.max(0, Math.min(1, amount));
+  const r = parseInt(hex.substring(0, 2), 16);
+  const g = parseInt(hex.substring(2, 4), 16);
+  const b = parseInt(hex.substring(4, 6), 16);
+  const darkenComponent = (component) => {
+    return Math.round(component * (1 - safeAmount));
+  };
+  const rHex = darkenComponent(r).toString(16).padStart(2, "0");
+  const gHex = darkenComponent(g).toString(16).padStart(2, "0");
+  const bHex = darkenComponent(b).toString(16).padStart(2, "0");
+  return `#${rHex}${gHex}${bHex}`;
+};
+var saturateColor = (hexColor, amount) => {
+  let hex = hexColor.replace(/^#/, "");
+  if (hex.length === 3) {
+    hex = hex[0] + hex[0] + hex[1] + hex[1] + hex[2] + hex[2];
+  }
+  const safeAmount = Math.max(0, Math.min(1, amount));
+  const r = parseInt(hex.substring(0, 2), 16);
+  const g = parseInt(hex.substring(2, 4), 16);
+  const b = parseInt(hex.substring(4, 6), 16);
+  const [h, s, l] = rgbToHsl(r, g, b);
+  const newSaturation = Math.min(1, s + safeAmount * (1 - s));
+  const [newR, newG, newB] = hslToRgb(h, newSaturation, l);
+  const rHex = Math.round(newR).toString(16).padStart(2, "0");
+  const gHex = Math.round(newG).toString(16).padStart(2, "0");
+  const bHex = Math.round(newB).toString(16).padStart(2, "0");
+  return `#${rHex}${gHex}${bHex}`;
+};
+var desaturateColor = (hexColor, amount) => {
+  let hex = hexColor.replace(/^#/, "");
+  if (hex.length === 3) {
+    hex = hex[0] + hex[0] + hex[1] + hex[1] + hex[2] + hex[2];
+  }
+  const safeAmount = Math.max(0, Math.min(1, amount));
+  const r = parseInt(hex.substring(0, 2), 16);
+  const g = parseInt(hex.substring(2, 4), 16);
+  const b = parseInt(hex.substring(4, 6), 16);
+  const [h, s, l] = rgbToHsl(r, g, b);
+  const newSaturation = Math.max(0, s * (1 - safeAmount));
+  const [newR, newG, newB] = hslToRgb(h, newSaturation, l);
+  const rHex = Math.round(newR).toString(16).padStart(2, "0");
+  const gHex = Math.round(newG).toString(16).padStart(2, "0");
+  const bHex = Math.round(newB).toString(16).padStart(2, "0");
+  return `#${rHex}${gHex}${bHex}`;
+};
+
+// src/components/Chip.tsx
 var import_jsx_runtime12 = require("react/jsx-runtime");
-var ChipComponent = (0, import_react14.forwardRef)(function Chip({ text, color, backgroundColor, borderRadius }, ref) {
+var ChipComponent = (0, import_react14.forwardRef)(function Chip({ text, color, backgroundColor, borderRadius, isSmall, isCircle, ...props }, ref) {
   const theme2 = useTheme();
   return /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(
     Div_default,
     {
       width: "fit-content",
       backgroundColor: backgroundColor ?? theme2.colors.backgroundSecondary,
-      borderRadius: borderRadius ?? theme2.styles.borderRadius / 1.3,
-      paddingBlock: theme2.styles.gap,
-      paddingInline: theme2.styles.space,
+      borderRadius: isCircle ? 999 : borderRadius ?? theme2.styles.borderRadius / 1.3,
+      paddingBlock: theme2.styles.gap / (isSmall ? 2 : 1),
+      paddingInline: theme2.styles.space / (isSmall ? 1.5 : 1),
+      ...props,
       ref,
       children: /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(Text_default, { color: color ?? theme2.colors.textPrimary, children: text })
     }
   );
 });
-ChipComponent.circle = (0, import_react14.forwardRef)(function Circle(props, ref) {
-  return /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(ChipComponent, { borderRadius: 999, ref, ...props });
+ChipComponent.colored = (0, import_react14.forwardRef)(function Colored({ color, ...props }, ref) {
+  const theme2 = useTheme();
+  const { colorTheme } = useBetterHtmlContextInternal();
+  const readyColor = color ?? theme2.colors.textSecondary;
+  return /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(
+    ChipComponent,
+    {
+      color: colorTheme === "light" ? darkenColor(readyColor, 0.7) : lightenColor(readyColor, 0.7),
+      backgroundColor: readyColor + "40",
+      border: `1px solid ${readyColor}`,
+      ref,
+      ...props
+    }
+  );
 });
 var Chip2 = (0, import_react14.memo)(ChipComponent);
-Chip2.circle = ChipComponent.circle;
+Chip2.colored = ChipComponent.colored;
 var Chip_default = Chip2;
 
 // src/components/InputField.tsx
@@ -6985,13 +7122,17 @@ var reactRouterDomPlugin = {
   Tabs,
   Text,
   ToggleInput,
+  darkenColor,
+  desaturateColor,
   formatPhoneNumber,
   generateRandomString,
   getBrowser,
   getFormErrorObject,
   isMobileDevice,
+  lightenColor,
   loaderControls,
   reactRouterDomPlugin,
+  saturateColor,
   useBetterHtmlContext,
   useBooleanState,
   useDebounceState,