@pushwoosh/dumb-components 1.1.120 → 1.1.122

package/Button/RemoveButton.d.ts

@@ -0,0 +1,2 @@
+import { type JSX, type ReactElement } from 'react';
+export declare function RemoveButton(props: Omit<JSX.IntrinsicElements['button'], 'ref' | 'children'>): ReactElement;

package/Button/RemoveButton.js

@@ -0,0 +1,10 @@
+import React from 'react';
+import { CloseIcon } from '@pushwoosh/kit-icons';
+import { RemoveButtonBox } from './styles';
+export function RemoveButton(props) {
+  return React.createElement(RemoveButtonBox, {
+    ...props
+  }, React.createElement(CloseIcon, {
+    size: "small"
+  }));
+}

package/Button/ai-documentation.md

@@ -5,11 +5,11 @@
 
 ## Overview
 
-**Component:** Button, GhostButton
-**Import Path:** `import { Button, GhostButton } from '@pushwoosh/dumb-components'`
-**Files:** Button.tsx, GhostButton.tsx, types.ts, styles.ts, maps.ts, index.ts
+**Component:** Button, GhostButton, RemoveButton
+**Import Path:** `import { Button, GhostButton, RemoveButton } from '@pushwoosh/dumb-components'`
+**Files:** Button.tsx, GhostButton.tsx, RemoveButton.tsx, types.ts, styles.ts, maps.ts, index.ts
 **Type:** UI Component / Form Component
-**Description:** Versatile button component with loading states, icons, and multiple styling variants. Also includes a minimal GhostButton for unstyled interactions.
+**Description:** Versatile button component with loading states, icons, and multiple styling variants. Also includes a minimal GhostButton for unstyled interactions and a RemoveButton for compact "close/remove" affordances.
 
 ## TypeScript Interface
 
@@ -46,7 +46,7 @@ type ButtonPropsWithAsTag<AS extends keyof HTMLElementTagNameMap> =
 
 **Import:**
 ```typescript
-import { Button, GhostButton } from '@pushwoosh/dumb-components';
+import { Button, GhostButton, RemoveButton } from '@pushwoosh/dumb-components';
 import type { 
   ButtonPropsWithoutAs, 
   ButtonPropsWithAsTag, 
@@ -163,6 +163,20 @@ const CustomButton = styled(GhostButton)`
 `;
 ```
 
+## RemoveButton Usage
+
+A compact icon-only button with a built-in `CloseIcon` intended for "remove" / "dismiss" affordances. It has fixed `16x16` size and switches its color to `DANGER_HOVER` / `DANGER_PRESSED` on interaction.
+
+**Props:** accepts all native `<button>` props except `ref` and `children` (the icon is rendered internally).
+
+```tsx
+<RemoveButton
+  type="button"
+  aria-label="Remove item"
+  onClick={() => handleRemove(item.id)}
+/>
+```
+
 ## Props Reference
 
 | Prop | Type | Default | Description |

package/Button/index.d.ts

@@ -1,3 +1,4 @@
 export { Button } from './Button';
 export type { ButtonPropsWithoutAs, ButtonPropsWithAsTag, ButtonPropsWithAsComponent, RequiredButtonProps, } from './types';
 export { GhostButton } from './GhostButton';
+export { RemoveButton } from './RemoveButton';

package/Button/index.js

@@ -1,2 +1,3 @@
 export { Button } from './Button';
-export { GhostButton } from './GhostButton';
+export { GhostButton } from './GhostButton';
+export { RemoveButton } from './RemoveButton';

package/Button/styles.d.ts

@@ -118,3 +118,4 @@ export declare const ButtonBoxSecondaryShapeField: import("styled-components").S
     $hasRightIcon?: boolean;
     $hasContent?: boolean;
 }, never>;
+export declare const RemoveButtonBox: import("styled-components").StyledComponent<"button", any, {}, never>;

package/Button/styles.js

@@ -85,6 +85,10 @@ export const ButtonBoxSecondaryShapeField = styled(ButtonBox).withConfig({
   displayName: "ButtonBoxSecondaryShapeField",
   componentId: "sc-qltvdl-15"
 })(["height:", ";padding:0 calc(6px - 1px);font-weight:", ";", ";"], UnitSize.FIELD_HEIGHT, FontWeight.MEDIUM, /* sc-custom "display: none;" */secondaryShapeColors);
+export const RemoveButtonBox = styled.button.withConfig({
+  displayName: "RemoveButtonBox",
+  componentId: "sc-qltvdl-16"
+})(["width:", ";height:", ";padding:0;appearance:none !important;border:none;background:transparent;cursor:pointer;color:", ";&:hover{color:", ";}&:active{color:", ";}"], UnitSize.ICON_SMALL, UnitSize.ICON_SMALL, Color.PHANTOM, Color.DANGER_HOVER, Color.DANGER_PRESSED);
 ButtonBox.displayName = 'ButtonBox';
 ButtonIcon.displayName = 'ButtonIcon';
 ButtonContent.displayName = 'ButtonContent';
@@ -100,4 +104,5 @@ ButtonBoxPrimaryShapeField.displayName = 'ButtonBoxPrimaryShapeField';
 ButtonBoxSecondaryGhostCompact.displayName = 'ButtonBoxSecondaryGhostCompact';
 ButtonBoxSecondaryGhostField.displayName = 'ButtonBoxSecondaryGhostField';
 ButtonBoxSecondaryShapeCompact.displayName = 'ButtonBoxSecondaryShapeCompact';
-ButtonBoxSecondaryShapeField.displayName = 'ButtonBoxSecondaryShapeField';
+ButtonBoxSecondaryShapeField.displayName = 'ButtonBoxSecondaryShapeField';
+RemoveButtonBox.displayName = 'RemoveButtonBox';

package/Calendar/helpers.js

@@ -65,7 +65,7 @@ export const differenceInDays = (ds1, ds2) => {
 };
 export const monthName = (month, monthFormat = 'long') => {
   const date = new Date(2023, month - 1, 1);
-  return date.toLocaleString('default', {
+  return date.toLocaleString('en-US', {
     month: monthFormat
   });
 };

package/DateTimePicker/helpers.js

@@ -33,7 +33,7 @@ export const differenceInDays = (d1, d2) => {
 };
 export const monthName = (month, monthFormat = 'long') => {
   const date = new Date(2023, month - 1, 1);
-  return date.toLocaleString('default', {
+  return date.toLocaleString('en-US', {
     month: monthFormat
   });
 };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@pushwoosh/dumb-components",
-  "version": "1.1.120",
+  "version": "1.1.122",
   "description": "React components to build Pushwoosh products",
   "main": "index.js",
   "module": "index.js",