react-better-html 1.1.207 → 1.1.209

package/dist/index.d.mts

@@ -373,7 +373,7 @@ declare const PageHolder: typeof PageHolderComponent & {
     center: typeof PageHolderComponent.center;
 };
 
-type ChipProps = {
+type ChipProps<Value = unknown> = {
     text: string;
     /** @default theme.colors.textPrimary */
     color?: string;
@@ -383,9 +383,12 @@ type ChipProps = {
     borderRadius?: number;
     /** @default false */
     isCircle?: boolean;
+    value?: Value;
+    onClick?: (event: React.MouseEvent<HTMLDivElement, globalThis.MouseEvent>) => void;
+    onClickWithValue?: (value: Value) => void;
 } & Pick<DivProps, "border" | "borderColor" | "borderWidth" | "borderStyle"> & Pick<TextProps, "fontFamily" | "fontSize" | "fontWeight" | "fontStyle">;
 type ChipComponentType = {
-    (props: ComponentPropWithRef<HTMLDivElement, ChipProps>): React.ReactElement;
+    <Value>(props: ComponentPropWithRef<HTMLDivElement, ChipProps<Value>>): React.ReactElement;
     colored: (props: ComponentPropWithRef<HTMLDivElement, OmitProps<ChipProps, "color" | "backgroundColor"> & {
         color?: string;
     }>) => React.ReactElement;

package/dist/index.d.ts

@@ -373,7 +373,7 @@ declare const PageHolder: typeof PageHolderComponent & {
     center: typeof PageHolderComponent.center;
 };
 
-type ChipProps = {
+type ChipProps<Value = unknown> = {
     text: string;
     /** @default theme.colors.textPrimary */
     color?: string;
@@ -383,9 +383,12 @@ type ChipProps = {
     borderRadius?: number;
     /** @default false */
     isCircle?: boolean;
+    value?: Value;
+    onClick?: (event: React.MouseEvent<HTMLDivElement, globalThis.MouseEvent>) => void;
+    onClickWithValue?: (value: Value) => void;
 } & Pick<DivProps, "border" | "borderColor" | "borderWidth" | "borderStyle"> & Pick<TextProps, "fontFamily" | "fontSize" | "fontWeight" | "fontStyle">;
 type ChipComponentType = {
-    (props: ComponentPropWithRef<HTMLDivElement, ChipProps>): React.ReactElement;
+    <Value>(props: ComponentPropWithRef<HTMLDivElement, ChipProps<Value>>): React.ReactElement;
     colored: (props: ComponentPropWithRef<HTMLDivElement, OmitProps<ChipProps, "color" | "backgroundColor"> & {
         color?: string;
     }>) => React.ReactElement;

package/dist/index.js

@@ -1923,7 +1923,18 @@ Image.profileImage = (0, import_react5.forwardRef)(function ProfileImage({ size
       ...props,
       children: /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(Text_default, { fontSize: size / 2.5, fontWeight: 700, children: letters.toUpperCase().slice(0, 2) })
     }
-  ) : /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(Image, { width: size, height: size, borderRadius: 999, objectFit: "cover", ref, ...props });
+  ) : /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
+    Image,
+    {
+      width: size,
+      height: size,
+      border: `solid 1px ${theme2.colors.border}`,
+      borderRadius: 999,
+      objectFit: "cover",
+      ref,
+      ...props
+    }
+  );
 });
 var MemoizedImage = (0, import_react5.memo)(Image);
 MemoizedImage.profileImage = Image.profileImage;
@@ -4036,8 +4047,25 @@ var desaturateColor = (hexColor, amount) => {
 
 // src/components/Chip.tsx
 var import_jsx_runtime14 = require("react/jsx-runtime");
-var ChipComponent = (0, import_react16.forwardRef)(function Chip({ text, color, backgroundColor, borderRadius, isCircle, ...props }, ref) {
+var ChipComponent = (0, import_react16.forwardRef)(function Chip({
+  text,
+  color,
+  backgroundColor,
+  borderRadius,
+  isCircle,
+  value,
+  onClick,
+  onClickWithValue,
+  ...props
+}, ref) {
   const theme2 = useTheme();
+  const onClickElement = (0, import_react16.useCallback)(
+    (event) => {
+      onClick?.(event);
+      onClickWithValue?.(value);
+    },
+    [onClick, onClickWithValue, value]
+  );
   return /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(
     Div_default,
     {
@@ -4046,6 +4074,7 @@ var ChipComponent = (0, import_react16.forwardRef)(function Chip({ text, color,
       borderRadius: isCircle ? 999 : borderRadius ?? theme2.styles.borderRadius / 1.3,
       paddingBlock: theme2.styles.gap / 2,
       paddingInline: theme2.styles.space / 1.5,
+      onClick: onClickElement,
       ...props,
       ref,
       children: /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(Text_default, { color: color ?? theme2.colors.textPrimary, children: text })