react-better-html 1.1.86 → 1.1.88

package/dist/index.mjs

@@ -1347,8 +1347,8 @@ var theme = {
       error: "#f5384b",
       base: "#f8f8f8",
       backgroundBase: "#111111",
-      backgroundSecondary: "#222222",
-      backgroundContent: "#333333",
+      backgroundSecondary: "#282828",
+      backgroundContent: "#444444",
       border: "#777777"
     }
   }
@@ -2212,7 +2212,7 @@ DivComponent.column = forwardRef(function Column({ flexReverse, invertFlexDirect
     DivComponent,
     {
       display: "flex",
-      flexDirection: (invertFlexDirection ? "column" : "row") + reverseSuffix,
+      flexDirection: (invertFlexDirection ? "row" : "column") + reverseSuffix,
       ref,
       ...props
     }
@@ -3094,27 +3094,160 @@ var PageHeader_default = memo11(PageHeader);
 
 // src/components/Chip.tsx
 import { forwardRef as forwardRef6, memo as memo12 } from "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
 import { jsx as jsx12 } from "react/jsx-runtime";
-var ChipComponent = forwardRef6(function Chip({ text, color, backgroundColor, borderRadius }, ref) {
+var ChipComponent = forwardRef6(function Chip({ text, color, backgroundColor, borderRadius, isSmall, isCircle, ...props }, ref) {
   const theme2 = useTheme();
   return /* @__PURE__ */ jsx12(
     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__ */ jsx12(Text_default, { color: color ?? theme2.colors.textPrimary, children: text })
     }
   );
 });
-ChipComponent.circle = forwardRef6(function Circle(props, ref) {
-  return /* @__PURE__ */ jsx12(ChipComponent, { borderRadius: 999, ref, ...props });
+ChipComponent.colored = forwardRef6(function Colored({ color, ...props }, ref) {
+  const theme2 = useTheme();
+  const { colorTheme } = useBetterHtmlContextInternal();
+  const readyColor = color ?? theme2.colors.textSecondary;
+  return /* @__PURE__ */ jsx12(
+    ChipComponent,
+    {
+      color: colorTheme === "light" ? darkenColor(readyColor, 0.7) : lightenColor(readyColor, 0.7),
+      backgroundColor: readyColor + "40",
+      border: `1px solid ${readyColor}`,
+      ref,
+      ...props
+    }
+  );
 });
 var Chip2 = memo12(ChipComponent);
-Chip2.circle = ChipComponent.circle;
+Chip2.colored = ChipComponent.colored;
 var Chip_default = Chip2;
 
 // src/components/InputField.tsx
@@ -6909,13 +7042,17 @@ export {
   Tabs_default as Tabs,
   Text_default as Text,
   ToggleInput_default as ToggleInput,
+  darkenColor,
+  desaturateColor,
   formatPhoneNumber,
   generateRandomString,
   getBrowser,
   getFormErrorObject,
   isMobileDevice,
+  lightenColor,
   loaderControls,
   reactRouterDomPlugin,
+  saturateColor,
   useBetterHtmlContext,
   useBooleanState,
   useDebounceState,