@beautinique/frontend-components 1.0.1 → 1.0.3

package/README.md

@@ -12,6 +12,7 @@ npm install @beautinique/frontend-components @beautinique/frontend-styles @iconi
 ```
 
 Peer dependencies: `react`, `react-dom`, `@iconify/react`, `@beautinique/frontend-styles`.
+It needs `tailwind-merge` too, which comes with it.
 
 ## Setup (once per app)
 
@@ -57,15 +58,62 @@ const App = () => (
 );
 ```
 
+### Button
+
+```tsx
+const save = <Button pattern="primary" content="Save" buttonProps={{ type: 'submit' }} />;
+
+// only an icon: it has to be given a name, a screen reader reads it (`aria-labelledby` works too)
+const edit = (
+  <Button
+    pattern="outline"
+    content={{ icon: 'solar:pen-linear' }}
+    buttonProps={{ 'aria-label': 'Edit category' }}
+  />
+);
+```
+
+- **Classes you give win over the ones they clash with**, with no `!` (`className="rounded-md px-2"`
+  replaces the button's `rounded-lg` and `px-4`). The classes for other screen sizes are other
+  classes and stay: the button has `lg:px-5`, so to change the padding on large screens too give
+  `lg:px-2` as well. `buttonProps.className` wins over `className`.
+- **`ref`** is the `<button>` itself: `<Button ref={buttonRef} ... />`.
+- A button with only an icon does not compile without `aria-label` or `aria-labelledby` in
+  `buttonProps`.
+
+### Tooltip
+
+```tsx
+const hint = (
+  <Tooltip title="Save" description="Ctrl + S" placement="right">
+    <Button pattern="primary" content="Save" />
+  </Tooltip>
+);
+```
+
+- It opens on hover and on focus, and closes on mouse leave, blur or **Escape**.
+- **It stays inside the window**: with no room on the side asked for (`placement`) it opens on the
+  opposite side, and it is pushed along the edge to keep 8px from it, the arrow still pointing at
+  the content.
+- **For a screen reader** it is `role="tooltip"` and, while it is open, the content is described by it
+  (`aria-describedby` is put on the child element, next to what it already has).
+- **`required={false}` shows only the content.** The wrapper stays (as `display: contents`, it takes
+  no room), so `required` can change while the page is open (a locked field, the size of the
+  screen) without the content being created again and losing its state. One difference to a tooltip
+  that is not there at all: the content is one level deeper in the DOM, so a css rule that looks at
+  the parent of the content (`space-y-*` on a parent, `> :first-child`) sees the wrapper.
+
 ### Toasts
 
 `toaster` works from anywhere (an API client, a store), not only from components:
 
-```ts
+```tsx
 toaster.success({ title: 'Saved', description: 'Your changes were saved.' });
 toaster.error({ title: 'Failed' });
 toaster.warning({ title: 'Careful' });
+toaster.default({ title: 'Heads up' });
 toaster.loading({ title: 'Working' });
+toaster.custom({ type: 'custom', children: <p>Any React content</p> });
 ```
 
 Toasts that follow uploads (`withProgressToast` for one request, `createUploadsToast`,

package/dist/lib/button.d.cts

@@ -1,3 +1,6 @@
 import type { IButton } from '../types/component.js';
-export declare const getButtonCss: (pattern: IButton["pattern"]) => "text-white bg-sky-blue-burst shadow-primary-btn hover:shadow-primary-btn-hover" | "text-secondary-invert bg-secondary shadow-secondary-btn hover:shadow-secondary-btn-hover" | "text-tertiary-invert bg-tertiary shadow-tertiary-btn hover:shadow-tertiary-btn-hover" | "text-primary border border-primary shadow-outline-btn hover:shadow-outline-btn-hover" | "bg-transparent border border-primary/30 text-secondary";
+type TPattern = IButton['pattern'];
+/** The look of a pattern; a pattern nobody knows (from code that is not type checked) is transparent. */
+export declare const getButtonCss: (pattern: TPattern) => string;
+export {};
 //# sourceMappingURL=button.d.cts.map

package/dist/lib/button.d.cts.map

@@ -1 +1 @@
-{"version":3,"file":"button.d.cts","sourceRoot":"","sources":["../../src/lib/button.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,OAAO,EAAE,MAAM,uBAAuB,CAAC;AAErD,eAAO,MAAM,YAAY,GAAI,SAAS,OAAO,CAAC,SAAS,CAAC,+ZAcvD,CAAC"}
+{"version":3,"file":"button.d.cts","sourceRoot":"","sources":["../../src/lib/button.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,OAAO,EAAE,MAAM,uBAAuB,CAAC;AAErD,KAAK,QAAQ,GAAG,OAAO,CAAC,SAAS,CAAC,CAAC;AAYnC,yGAAyG;AACzG,eAAO,MAAM,YAAY,GAAI,SAAS,QAAQ,WACwC,CAAC"}

package/dist/lib/button.d.ts

@@ -1,3 +1,6 @@
 import type { IButton } from '../types/component.js';
-export declare const getButtonCss: (pattern: IButton["pattern"]) => "text-white bg-sky-blue-burst shadow-primary-btn hover:shadow-primary-btn-hover" | "text-secondary-invert bg-secondary shadow-secondary-btn hover:shadow-secondary-btn-hover" | "text-tertiary-invert bg-tertiary shadow-tertiary-btn hover:shadow-tertiary-btn-hover" | "text-primary border border-primary shadow-outline-btn hover:shadow-outline-btn-hover" | "bg-transparent border border-primary/30 text-secondary";
+type TPattern = IButton['pattern'];
+/** The look of a pattern; a pattern nobody knows (from code that is not type checked) is transparent. */
+export declare const getButtonCss: (pattern: TPattern) => string;
+export {};
 //# sourceMappingURL=button.d.ts.map

package/dist/lib/button.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"button.d.ts","sourceRoot":"","sources":["../../src/lib/button.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,OAAO,EAAE,MAAM,uBAAuB,CAAC;AAErD,eAAO,MAAM,YAAY,GAAI,SAAS,OAAO,CAAC,SAAS,CAAC,+ZAcvD,CAAC"}
+{"version":3,"file":"button.d.ts","sourceRoot":"","sources":["../../src/lib/button.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,OAAO,EAAE,MAAM,uBAAuB,CAAC;AAErD,KAAK,QAAQ,GAAG,OAAO,CAAC,SAAS,CAAC,CAAC;AAYnC,yGAAyG;AACzG,eAAO,MAAM,YAAY,GAAI,SAAS,QAAQ,WACwC,CAAC"}

package/dist/lib/constants.d.cts

@@ -1,5 +1,9 @@
 export declare const TOOLTIP_GAP: 15;
 export declare const TOOLTIP_ANIMATION_DURATION: 400;
+/** The least space a tooltip keeps between itself and the edge of the window. */
+export declare const TOOLTIP_VIEWPORT_MARGIN: 8;
+/** The arrow stays at least this far from the ends of the tooltip (its own size and the rounded corner). */
+export declare const TOOLTIP_ARROW_INSET: 16;
 export declare const TOAST_TYPES: readonly ["success", "error", "warning", "progress", "uploads", "loading", "default", "custom"];
 export declare const TOAST_TYPE: { [K in (typeof TOAST_TYPES)[number]]: K; };
 //# sourceMappingURL=constants.d.cts.map

package/dist/lib/constants.d.cts.map

@@ -1 +1 @@
-{"version":3,"file":"constants.d.cts","sourceRoot":"","sources":["../../src/lib/constants.ts"],"names":[],"mappings":"AAAA,eAAO,MAAM,WAAW,EAAG,EAAW,CAAC;AACvC,eAAO,MAAM,0BAA0B,EAAG,GAAY,CAAC;AAEvD,eAAO,MAAM,WAAW,iGASd,CAAC;AAEX,eAAO,MAAM,UAAU,EAAkE,GACtF,CAAC,IAAI,CAAC,OAAO,WAAW,EAAE,MAAM,CAAC,GAAG,CAAC,GACvC,CAAC"}
+{"version":3,"file":"constants.d.cts","sourceRoot":"","sources":["../../src/lib/constants.ts"],"names":[],"mappings":"AAAA,eAAO,MAAM,WAAW,EAAG,EAAW,CAAC;AACvC,eAAO,MAAM,0BAA0B,EAAG,GAAY,CAAC;AACvD,iFAAiF;AACjF,eAAO,MAAM,uBAAuB,EAAG,CAAU,CAAC;AAClD,4GAA4G;AAC5G,eAAO,MAAM,mBAAmB,EAAG,EAAW,CAAC;AAE/C,eAAO,MAAM,WAAW,iGASd,CAAC;AAEX,eAAO,MAAM,UAAU,EAAkE,GACtF,CAAC,IAAI,CAAC,OAAO,WAAW,EAAE,MAAM,CAAC,GAAG,CAAC,GACvC,CAAC"}

package/dist/lib/constants.d.ts

@@ -1,5 +1,9 @@
 export declare const TOOLTIP_GAP: 15;
 export declare const TOOLTIP_ANIMATION_DURATION: 400;
+/** The least space a tooltip keeps between itself and the edge of the window. */
+export declare const TOOLTIP_VIEWPORT_MARGIN: 8;
+/** The arrow stays at least this far from the ends of the tooltip (its own size and the rounded corner). */
+export declare const TOOLTIP_ARROW_INSET: 16;
 export declare const TOAST_TYPES: readonly ["success", "error", "warning", "progress", "uploads", "loading", "default", "custom"];
 export declare const TOAST_TYPE: { [K in (typeof TOAST_TYPES)[number]]: K; };
 //# sourceMappingURL=constants.d.ts.map

package/dist/lib/constants.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"constants.d.ts","sourceRoot":"","sources":["../../src/lib/constants.ts"],"names":[],"mappings":"AAAA,eAAO,MAAM,WAAW,EAAG,EAAW,CAAC;AACvC,eAAO,MAAM,0BAA0B,EAAG,GAAY,CAAC;AAEvD,eAAO,MAAM,WAAW,iGASd,CAAC;AAEX,eAAO,MAAM,UAAU,EAAkE,GACtF,CAAC,IAAI,CAAC,OAAO,WAAW,EAAE,MAAM,CAAC,GAAG,CAAC,GACvC,CAAC"}
+{"version":3,"file":"constants.d.ts","sourceRoot":"","sources":["../../src/lib/constants.ts"],"names":[],"mappings":"AAAA,eAAO,MAAM,WAAW,EAAG,EAAW,CAAC;AACvC,eAAO,MAAM,0BAA0B,EAAG,GAAY,CAAC;AACvD,iFAAiF;AACjF,eAAO,MAAM,uBAAuB,EAAG,CAAU,CAAC;AAClD,4GAA4G;AAC5G,eAAO,MAAM,mBAAmB,EAAG,EAAW,CAAC;AAE/C,eAAO,MAAM,WAAW,iGASd,CAAC;AAEX,eAAO,MAAM,UAAU,EAAkE,GACtF,CAAC,IAAI,CAAC,OAAO,WAAW,EAAE,MAAM,CAAC,GAAG,CAAC,GACvC,CAAC"}

package/dist/lib/tooltip.d.cts

@@ -1,6 +1,38 @@
-import type { CSSProperties } from 'react';
 import type { ITooltip } from '../types/component.js';
-export declare const getTooltipPosition: (rect: DOMRect, placement: NonNullable<ITooltip["placement"]>) => CSSProperties;
-export declare const getTooltipTransform: (placement: NonNullable<ITooltip["placement"]>, isVisible: boolean) => string;
-export declare const getTooltipArrowCss: (placement: NonNullable<ITooltip["placement"]>) => "after:bottom-full after:left-1/2 after:-translate-x-1/2 after:border-b-silver-jet-2" | "after:top-1/2 after:right-full after:-translate-y-1/2 after:border-r-silver-jet-2" | "after:top-1/2 after:left-full after:-translate-y-1/2 after:border-l-silver-jet-2" | "after:top-full after:left-1/2 after:-translate-x-1/2 after:border-t-silver-jet-2";
+type TPlacement = NonNullable<ITooltip['placement']>;
+export interface ISize {
+    width: number;
+    height: number;
+}
+export interface ITooltipLayout {
+    /** The side the tooltip really opens on: the opposite one when there is no room on the asked one. */
+    placement: TPlacement;
+    /** Where the tooltip points to, in the window (it is moved away from it by `getTooltipTransform`). */
+    position: {
+        top: number;
+        left: number;
+    };
+    /** How far the arrow moves along the tooltip to keep pointing at the content when the tooltip is pushed in. */
+    arrowShift: number;
+}
+export declare const getTooltipPosition: (rect: DOMRect, placement: TPlacement) => {
+    top: number;
+    left: number;
+};
+/**
+ * Where the tooltip goes. Without its `size` (it is not on the page yet) it goes where it was asked
+ * to. With it, it opens on the opposite side when the asked one has no room and the other has, and
+ * it is pushed along that side to stay inside the window; the arrow keeps pointing at the content.
+ */
+export declare const getTooltipLayout: ({ rect, placement, size, viewport, }: {
+    rect: DOMRect;
+    placement: TPlacement;
+    size?: ISize;
+    viewport: ISize;
+}) => ITooltipLayout;
+/** Whether two layouts put the tooltip in the same place (so there is nothing to change). */
+export declare const isSameTooltipLayout: (a: ITooltipLayout, b: ITooltipLayout) => boolean;
+export declare const getTooltipTransform: (placement: TPlacement, isVisible: boolean) => string;
+export declare const getTooltipArrowCss: (placement: TPlacement) => "after:bottom-full after:left-[calc(50%_+_var(--tooltip-arrow-shift,0px))] after:-translate-x-1/2 after:border-b-silver-jet-2" | "after:top-[calc(50%_+_var(--tooltip-arrow-shift,0px))] after:right-full after:-translate-y-1/2 after:border-r-silver-jet-2" | "after:top-[calc(50%_+_var(--tooltip-arrow-shift,0px))] after:left-full after:-translate-y-1/2 after:border-l-silver-jet-2" | "after:top-full after:left-[calc(50%_+_var(--tooltip-arrow-shift,0px))] after:-translate-x-1/2 after:border-t-silver-jet-2";
+export {};
 //# sourceMappingURL=tooltip.d.cts.map

package/dist/lib/tooltip.d.cts.map

@@ -1 +1 @@
-{"version":3,"file":"tooltip.d.cts","sourceRoot":"","sources":["../../src/lib/tooltip.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,aAAa,EAAE,MAAM,OAAO,CAAC;AAE3C,OAAO,KAAK,EAAE,QAAQ,EAAE,MAAM,uBAAuB,CAAC;AAGtD,eAAO,MAAM,kBAAkB,GAC7B,MAAM,OAAO,EACb,WAAW,WAAW,CAAC,QAAQ,CAAC,WAAW,CAAC,CAAC,KAC5C,aAYF,CAAC;AAEF,eAAO,MAAM,mBAAmB,GAC9B,WAAW,WAAW,CAAC,QAAQ,CAAC,WAAW,CAAC,CAAC,EAC7C,WAAW,OAAO,WAenB,CAAC;AAEF,eAAO,MAAM,kBAAkB,GAAI,WAAW,WAAW,CAAC,QAAQ,CAAC,WAAW,CAAC,CAAC,0VAY/E,CAAC"}
+{"version":3,"file":"tooltip.d.cts","sourceRoot":"","sources":["../../src/lib/tooltip.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,QAAQ,EAAE,MAAM,uBAAuB,CAAC;AAGtD,KAAK,UAAU,GAAG,WAAW,CAAC,QAAQ,CAAC,WAAW,CAAC,CAAC,CAAC;AAErD,MAAM,WAAW,KAAK;IACpB,KAAK,EAAE,MAAM,CAAC;IACd,MAAM,EAAE,MAAM,CAAC;CAChB;AAED,MAAM,WAAW,cAAc;IAC7B,qGAAqG;IACrG,SAAS,EAAE,UAAU,CAAC;IACtB,sGAAsG;IACtG,QAAQ,EAAE;QAAE,GAAG,EAAE,MAAM,CAAC;QAAC,IAAI,EAAE,MAAM,CAAA;KAAE,CAAC;IACxC,+GAA+G;IAC/G,UAAU,EAAE,MAAM,CAAC;CACpB;AAWD,eAAO,MAAM,kBAAkB,GAC7B,MAAM,OAAO,EACb,WAAW,UAAU,KACpB;IAAE,GAAG,EAAE,MAAM,CAAC;IAAC,IAAI,EAAE,MAAM,CAAA;CAY7B,CAAC;AAiBF;;;;GAIG;AACH,eAAO,MAAM,gBAAgB,GAAI,sCAK9B;IACD,IAAI,EAAE,OAAO,CAAC;IACd,SAAS,EAAE,UAAU,CAAC;IACtB,IAAI,CAAC,EAAE,KAAK,CAAC;IACb,QAAQ,EAAE,KAAK,CAAC;CACjB,KAAG,cA2BH,CAAC;AAEF,6FAA6F;AAC7F,eAAO,MAAM,mBAAmB,GAAI,GAAG,cAAc,EAAE,GAAG,cAAc,YAInC,CAAC;AAEtC,eAAO,MAAM,mBAAmB,GAAI,WAAW,UAAU,EAAE,WAAW,OAAO,WAc5E,CAAC;AAGF,eAAO,MAAM,kBAAkB,GAAI,WAAW,UAAU,8fAYvD,CAAC"}

package/dist/lib/tooltip.d.ts

@@ -1,6 +1,38 @@
-import type { CSSProperties } from 'react';
 import type { ITooltip } from '../types/component.js';
-export declare const getTooltipPosition: (rect: DOMRect, placement: NonNullable<ITooltip["placement"]>) => CSSProperties;
-export declare const getTooltipTransform: (placement: NonNullable<ITooltip["placement"]>, isVisible: boolean) => string;
-export declare const getTooltipArrowCss: (placement: NonNullable<ITooltip["placement"]>) => "after:bottom-full after:left-1/2 after:-translate-x-1/2 after:border-b-silver-jet-2" | "after:top-1/2 after:right-full after:-translate-y-1/2 after:border-r-silver-jet-2" | "after:top-1/2 after:left-full after:-translate-y-1/2 after:border-l-silver-jet-2" | "after:top-full after:left-1/2 after:-translate-x-1/2 after:border-t-silver-jet-2";
+type TPlacement = NonNullable<ITooltip['placement']>;
+export interface ISize {
+    width: number;
+    height: number;
+}
+export interface ITooltipLayout {
+    /** The side the tooltip really opens on: the opposite one when there is no room on the asked one. */
+    placement: TPlacement;
+    /** Where the tooltip points to, in the window (it is moved away from it by `getTooltipTransform`). */
+    position: {
+        top: number;
+        left: number;
+    };
+    /** How far the arrow moves along the tooltip to keep pointing at the content when the tooltip is pushed in. */
+    arrowShift: number;
+}
+export declare const getTooltipPosition: (rect: DOMRect, placement: TPlacement) => {
+    top: number;
+    left: number;
+};
+/**
+ * Where the tooltip goes. Without its `size` (it is not on the page yet) it goes where it was asked
+ * to. With it, it opens on the opposite side when the asked one has no room and the other has, and
+ * it is pushed along that side to stay inside the window; the arrow keeps pointing at the content.
+ */
+export declare const getTooltipLayout: ({ rect, placement, size, viewport, }: {
+    rect: DOMRect;
+    placement: TPlacement;
+    size?: ISize;
+    viewport: ISize;
+}) => ITooltipLayout;
+/** Whether two layouts put the tooltip in the same place (so there is nothing to change). */
+export declare const isSameTooltipLayout: (a: ITooltipLayout, b: ITooltipLayout) => boolean;
+export declare const getTooltipTransform: (placement: TPlacement, isVisible: boolean) => string;
+export declare const getTooltipArrowCss: (placement: TPlacement) => "after:bottom-full after:left-[calc(50%_+_var(--tooltip-arrow-shift,0px))] after:-translate-x-1/2 after:border-b-silver-jet-2" | "after:top-[calc(50%_+_var(--tooltip-arrow-shift,0px))] after:right-full after:-translate-y-1/2 after:border-r-silver-jet-2" | "after:top-[calc(50%_+_var(--tooltip-arrow-shift,0px))] after:left-full after:-translate-y-1/2 after:border-l-silver-jet-2" | "after:top-full after:left-[calc(50%_+_var(--tooltip-arrow-shift,0px))] after:-translate-x-1/2 after:border-t-silver-jet-2";
+export {};
 //# sourceMappingURL=tooltip.d.ts.map

package/dist/lib/tooltip.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"tooltip.d.ts","sourceRoot":"","sources":["../../src/lib/tooltip.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,aAAa,EAAE,MAAM,OAAO,CAAC;AAE3C,OAAO,KAAK,EAAE,QAAQ,EAAE,MAAM,uBAAuB,CAAC;AAGtD,eAAO,MAAM,kBAAkB,GAC7B,MAAM,OAAO,EACb,WAAW,WAAW,CAAC,QAAQ,CAAC,WAAW,CAAC,CAAC,KAC5C,aAYF,CAAC;AAEF,eAAO,MAAM,mBAAmB,GAC9B,WAAW,WAAW,CAAC,QAAQ,CAAC,WAAW,CAAC,CAAC,EAC7C,WAAW,OAAO,WAenB,CAAC;AAEF,eAAO,MAAM,kBAAkB,GAAI,WAAW,WAAW,CAAC,QAAQ,CAAC,WAAW,CAAC,CAAC,0VAY/E,CAAC"}
+{"version":3,"file":"tooltip.d.ts","sourceRoot":"","sources":["../../src/lib/tooltip.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,QAAQ,EAAE,MAAM,uBAAuB,CAAC;AAGtD,KAAK,UAAU,GAAG,WAAW,CAAC,QAAQ,CAAC,WAAW,CAAC,CAAC,CAAC;AAErD,MAAM,WAAW,KAAK;IACpB,KAAK,EAAE,MAAM,CAAC;IACd,MAAM,EAAE,MAAM,CAAC;CAChB;AAED,MAAM,WAAW,cAAc;IAC7B,qGAAqG;IACrG,SAAS,EAAE,UAAU,CAAC;IACtB,sGAAsG;IACtG,QAAQ,EAAE;QAAE,GAAG,EAAE,MAAM,CAAC;QAAC,IAAI,EAAE,MAAM,CAAA;KAAE,CAAC;IACxC,+GAA+G;IAC/G,UAAU,EAAE,MAAM,CAAC;CACpB;AAWD,eAAO,MAAM,kBAAkB,GAC7B,MAAM,OAAO,EACb,WAAW,UAAU,KACpB;IAAE,GAAG,EAAE,MAAM,CAAC;IAAC,IAAI,EAAE,MAAM,CAAA;CAY7B,CAAC;AAiBF;;;;GAIG;AACH,eAAO,MAAM,gBAAgB,GAAI,sCAK9B;IACD,IAAI,EAAE,OAAO,CAAC;IACd,SAAS,EAAE,UAAU,CAAC;IACtB,IAAI,CAAC,EAAE,KAAK,CAAC;IACb,QAAQ,EAAE,KAAK,CAAC;CACjB,KAAG,cA2BH,CAAC;AAEF,6FAA6F;AAC7F,eAAO,MAAM,mBAAmB,GAAI,GAAG,cAAc,EAAE,GAAG,cAAc,YAInC,CAAC;AAEtC,eAAO,MAAM,mBAAmB,GAAI,WAAW,UAAU,EAAE,WAAW,OAAO,WAc5E,CAAC;AAGF,eAAO,MAAM,kBAAkB,GAAI,WAAW,UAAU,8fAYvD,CAAC"}

package/dist/toast/ToastContainer.d.cts

@@ -1,5 +1,5 @@
 import type { IClassName } from '../types/component.js';
 import type { TToastItem } from './types.js';
-export declare const Toaster: (props: TToastItem & IClassName) => import("react").JSX.Element | null;
+export declare const Toaster: import("react").MemoExoticComponent<(props: TToastItem & IClassName) => import("react").JSX.Element | null>;
 export declare const ToastContainer: () => import("react").JSX.Element | null;
 //# sourceMappingURL=ToastContainer.d.cts.map

package/dist/toast/ToastContainer.d.cts.map

@@ -1 +1 @@
-{"version":3,"file":"ToastContainer.d.cts","sourceRoot":"","sources":["../../src/toast/ToastContainer.tsx"],"names":[],"mappings":"AAIA,OAAO,KAAK,EAAE,UAAU,EAAE,MAAM,uBAAuB,CAAC;AAIxD,OAAO,KAAK,EAAuB,UAAU,EAAqB,MAAM,YAAY,CAAC;AAkLrF,eAAO,MAAM,OAAO,GAAI,OAAO,UAAU,GAAG,UAAU,uCAmJrD,CAAC;AAEF,eAAO,MAAM,cAAc,0CAY1B,CAAC"}
+{"version":3,"file":"ToastContainer.d.cts","sourceRoot":"","sources":["../../src/toast/ToastContainer.tsx"],"names":[],"mappings":"AAIA,OAAO,KAAK,EAAE,UAAU,EAAE,MAAM,uBAAuB,CAAC;AAIxD,OAAO,KAAK,EAAuB,UAAU,EAAqB,MAAM,YAAY,CAAC;AA4UrF,eAAO,MAAM,OAAO,8CA1JQ,UAAU,GAAG,UAAU,wCA0JX,CAAC;AAEzC,eAAO,MAAM,cAAc,0CAY1B,CAAC"}

package/dist/toast/ToastContainer.d.ts

@@ -1,5 +1,5 @@
 import type { IClassName } from '../types/component.js';
 import type { TToastItem } from './types.js';
-export declare const Toaster: (props: TToastItem & IClassName) => import("react").JSX.Element | null;
+export declare const Toaster: import("react").MemoExoticComponent<(props: TToastItem & IClassName) => import("react").JSX.Element | null>;
 export declare const ToastContainer: () => import("react").JSX.Element | null;
 //# sourceMappingURL=ToastContainer.d.ts.map

package/dist/toast/ToastContainer.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"ToastContainer.d.ts","sourceRoot":"","sources":["../../src/toast/ToastContainer.tsx"],"names":[],"mappings":"AAIA,OAAO,KAAK,EAAE,UAAU,EAAE,MAAM,uBAAuB,CAAC;AAIxD,OAAO,KAAK,EAAuB,UAAU,EAAqB,MAAM,YAAY,CAAC;AAkLrF,eAAO,MAAM,OAAO,GAAI,OAAO,UAAU,GAAG,UAAU,uCAmJrD,CAAC;AAEF,eAAO,MAAM,cAAc,0CAY1B,CAAC"}
+{"version":3,"file":"ToastContainer.d.ts","sourceRoot":"","sources":["../../src/toast/ToastContainer.tsx"],"names":[],"mappings":"AAIA,OAAO,KAAK,EAAE,UAAU,EAAE,MAAM,uBAAuB,CAAC;AAIxD,OAAO,KAAK,EAAuB,UAAU,EAAqB,MAAM,YAAY,CAAC;AA4UrF,eAAO,MAAM,OAAO,8CA1JQ,UAAU,GAAG,UAAU,wCA0JX,CAAC;AAEzC,eAAO,MAAM,cAAc,0CAY1B,CAAC"}

package/dist/toast/index.cjs

@@ -2,8 +2,9 @@
 
 var nanoid = require('nanoid');
 var zustand = require('zustand');
-var react = require('@iconify/react');
-var react$1 = require('react');
+var react$1 = require('@iconify/react');
+var react = require('react');
+var tailwindMerge = require('tailwind-merge');
 var jsxRuntime = require('react/jsx-runtime');
 
 var __defProp = Object.defineProperty;
@@ -108,56 +109,48 @@ var TOAST_ICON_SETS = [
   }
 ];
 var registerToastIcons = /* @__PURE__ */ __name(() => {
-  for (const iconSet of TOAST_ICON_SETS) react.addCollection(iconSet);
+  for (const iconSet of TOAST_ICON_SETS) react$1.addCollection(iconSet);
 }, "registerToastIcons");
 var TOAST_ICON_NAMES = TOAST_ICON_SETS.flatMap(
   ({ prefix, icons }) => Object.keys(icons).map((name) => `${prefix}:${name}`)
 );
 
 // src/lib/button.ts
-var getButtonCss = /* @__PURE__ */ __name((pattern) => {
-  switch (pattern) {
-    case "primary":
-      return "text-white bg-sky-blue-burst shadow-primary-btn hover:shadow-primary-btn-hover";
-    case "secondary":
-      return "text-secondary-invert bg-secondary shadow-secondary-btn hover:shadow-secondary-btn-hover";
-    case "tertiary":
-      return "text-tertiary-invert bg-tertiary shadow-tertiary-btn hover:shadow-tertiary-btn-hover";
-    case "outline":
-      return "text-primary border border-primary shadow-outline-btn hover:shadow-outline-btn-hover";
-    case "transparent":
-    default:
-      return "bg-transparent border border-primary/30 text-secondary";
-  }
-}, "getButtonCss");
+var PATTERN_CSS = {
+  primary: "text-white bg-sky-blue-burst shadow-primary-btn hover:shadow-primary-btn-hover",
+  secondary: "text-secondary-invert bg-secondary shadow-secondary-btn hover:shadow-secondary-btn-hover",
+  tertiary: "text-tertiary-invert bg-tertiary shadow-tertiary-btn hover:shadow-tertiary-btn-hover",
+  outline: "text-primary border border-primary shadow-outline-btn hover:shadow-outline-btn-hover",
+  transparent: "bg-transparent border border-primary/30 text-secondary"
+};
+var getButtonCss = /* @__PURE__ */ __name((pattern) => Object.hasOwn(PATTERN_CSS, pattern) ? PATTERN_CSS[pattern] : PATTERN_CSS.transparent, "getButtonCss");
+var BASE_CSS = "group flex w-full cursor-pointer items-center justify-center gap-1 rounded-lg px-4 py-3 text-sm leading-4 transition-all duration-300 disabled:cursor-not-allowed disabled:opacity-85 lg:px-5 lg:py-4 xl:text-base";
 var Button = /* @__PURE__ */ __name(({
   pattern,
   content,
   className = "",
   leftIcon,
   rightIcon,
-  buttonProps
-}) => {
-  const btnCSS = getButtonCss(pattern);
-  const handleClick = /* @__PURE__ */ __name((e) => {
-    if (buttonProps?.disabled) return;
-    buttonProps?.onClick?.(e);
-  }, "handleClick");
-  return /* @__PURE__ */ jsxRuntime.jsxs(
+  buttonProps,
+  ref
+}) => (
+  // A class that is given wins over the one it clashes with (`rounded-md` over `rounded-lg`),
+  // with no `!`; one for another screen size (`lg:px-5`) is a different class and stays.
+  /* @__PURE__ */ jsxRuntime.jsxs(
     "button",
     {
       ...buttonProps,
-      className: `group flex w-full cursor-pointer items-center justify-center gap-1 rounded-lg px-4 py-3 text-sm leading-4 transition-all duration-300 disabled:cursor-not-allowed disabled:opacity-85 lg:px-5 lg:py-4 xl:text-base ${btnCSS} ${className} ${buttonProps?.className ?? ""}`,
+      ref,
+      className: tailwindMerge.twMerge(BASE_CSS, getButtonCss(pattern), className, buttonProps?.className),
       type: buttonProps?.type ?? "button",
-      onClick: handleClick,
       children: [
-        leftIcon && /* @__PURE__ */ jsxRuntime.jsx(react.Icon, { ...leftIcon }),
-        typeof content === "object" ? /* @__PURE__ */ jsxRuntime.jsx(react.Icon, { ...content }) : content,
-        rightIcon && /* @__PURE__ */ jsxRuntime.jsx(react.Icon, { ...rightIcon })
+        leftIcon && /* @__PURE__ */ jsxRuntime.jsx(react$1.Icon, { ...leftIcon }),
+        typeof content === "object" ? /* @__PURE__ */ jsxRuntime.jsx(react$1.Icon, { ...content }) : content,
+        rightIcon && /* @__PURE__ */ jsxRuntime.jsx(react$1.Icon, { ...rightIcon })
       ]
     }
-  );
-}, "Button");
+  )
+), "Button");
 
 // src/toast/toaster.ts
 var { add, update, remove } = useToastStore.getState();
@@ -418,7 +411,7 @@ var UploadRow = /* @__PURE__ */ __name(({ item }) => {
   const { icon, rgb } = UPLOAD_ITEM_ICON[item.status];
   return /* @__PURE__ */ jsxRuntime.jsxs("li", { "data-status": item.status, className: "flex items-center gap-1.5 md:gap-2", children: [
     /* @__PURE__ */ jsxRuntime.jsx(
-      react.Icon,
+      react$1.Icon,
       {
         icon,
         className: "size-3.5 shrink-0 md:size-4",
@@ -478,7 +471,7 @@ var cardConfig = /* @__PURE__ */ __name((type) => {
       return { iconName: "solar:info-circle-outline", rgb: "var(--primary-rgb)" };
   }
 }, "cardConfig");
-var Toaster = /* @__PURE__ */ __name((props) => {
+var ToasterItem = /* @__PURE__ */ __name((props) => {
   const {
     className = "",
     type,
@@ -489,9 +482,9 @@ var Toaster = /* @__PURE__ */ __name((props) => {
     closeTimer = 5e3
   } = props;
   const remove2 = useToastStore((s) => s.remove);
-  const [visible, setVisible] = react$1.useState(false);
-  const [mounted, setMounted] = react$1.useState(true);
-  const timeoutRef = react$1.useRef(null);
+  const [visible, setVisible] = react.useState(false);
+  const [mounted, setMounted] = react.useState(true);
+  const timeoutRef = react.useRef(null);
   const uploadsSummary = props.type === TOAST_TYPE.uploads ? getUploadsSummary(props.items) : null;
   const isUploadsSettled = uploadsSummary?.isSettled ?? false;
   let resolvedAutoClose = autoClose;
@@ -506,14 +499,14 @@ var Toaster = /* @__PURE__ */ __name((props) => {
     resolvedCloseTimer = uploadsSummary.failed > 0 ? 8e3 : 2500;
   }
   const config = uploadsSummary ? { iconName: "", rgb: uploadsRgb(uploadsSummary) } : cardConfig(type);
-  const handleClose = react$1.useCallback(() => {
+  const handleClose = react.useCallback(() => {
     setVisible(false);
     timeoutRef.current = setTimeout(() => {
       setMounted(false);
       remove2(props.id);
     }, 300);
   }, [remove2, props.id]);
-  react$1.useEffect(() => {
+  react.useEffect(() => {
     const enterTimer = setTimeout(() => {
       setVisible(true);
     }, 50);
@@ -552,7 +545,7 @@ var Toaster = /* @__PURE__ */ __name((props) => {
             progress: uploadsSummary.percent,
             style: { color: `rgb(${config.rgb})` }
           }
-        ) : /* @__PURE__ */ jsxRuntime.jsx(react.Icon, { icon: config.iconName, style: { color: `rgb(${config.rgb})` } })),
+        ) : /* @__PURE__ */ jsxRuntime.jsx(react$1.Icon, { icon: config.iconName, style: { color: `rgb(${config.rgb})` } })),
         props.type === TOAST_TYPE.uploads && uploadsSummary ? /* @__PURE__ */ jsxRuntime.jsx(
           UploadsBody,
           {
@@ -586,7 +579,7 @@ var Toaster = /* @__PURE__ */ __name((props) => {
           )
         ] }),
         resolvedIsClosable && /* @__PURE__ */ jsxRuntime.jsx(
-          react.Icon,
+          react$1.Icon,
           {
             icon: "lucide:x",
             className: "text-primary cursor-pointer md:size-5",
@@ -596,7 +589,8 @@ var Toaster = /* @__PURE__ */ __name((props) => {
       ] })
     }
   );
-}, "Toaster");
+}, "ToasterItem");
+var Toaster = react.memo(ToasterItem);
 var ToastContainer = /* @__PURE__ */ __name(() => {
   const toasts = useToastStore((s) => s.toasts);
   if (toasts.length === 0) return null;