@fanvue/ui 0.1.0-alpha.2 → 1.0.0

package/dist/components/Toast/Toast.mjs

@@ -0,0 +1,110 @@
+"use client";
+import { jsxs, jsx } from "react/jsx-runtime";
+import * as ToastPrimitive from "@radix-ui/react-toast";
+import * as React from "react";
+import { cn } from "../../utils/cn.mjs";
+import { Avatar } from "../Avatar/Avatar.mjs";
+import { Button } from "../Button/Button.mjs";
+import { IconButton } from "../IconButton/IconButton.mjs";
+import { CloseIcon } from "../Icons/CloseIcon.mjs";
+import { ErrorIcon } from "../Icons/ErrorIcon.mjs";
+import { InfoIcon } from "../Icons/InfoIcon.mjs";
+import { SuccessIcon } from "../Icons/SuccessIcon.mjs";
+import { WarningIcon } from "../Icons/WarningIcon.mjs";
+const ToastProvider = ToastPrimitive.Provider;
+const ToastViewport = React.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx(
+  ToastPrimitive.Viewport,
+  {
+    ref,
+    className: cn(
+      "fixed top-0 right-0 z-100 flex max-h-screen w-full flex-col-reverse gap-3 p-4 sm:top-auto sm:right-0 sm:bottom-0 sm:flex-col md:max-w-[420px]",
+      className
+    ),
+    ...props
+  }
+));
+ToastViewport.displayName = "ToastViewport";
+const VariantIcon = ({ variant }) => {
+  switch (variant) {
+    case "info":
+      return /* @__PURE__ */ jsx(InfoIcon, { className: "size-5 text-info-500" });
+    case "warning":
+      return /* @__PURE__ */ jsx(WarningIcon, { className: "size-5 text-warning-500" });
+    case "success":
+      return /* @__PURE__ */ jsx(SuccessIcon, { className: "size-5 text-success-500" });
+    case "error":
+      return /* @__PURE__ */ jsx(ErrorIcon, { className: "size-5 text-error-500" });
+  }
+};
+const Toast = React.forwardRef(
+  ({
+    className,
+    variant = "info",
+    title,
+    description,
+    actionLabel,
+    onActionClick,
+    showClose = true,
+    avatarSrc,
+    avatarAlt,
+    avatarFallback,
+    children,
+    ...props
+  }, ref) => {
+    return /* @__PURE__ */ jsxs(
+      ToastPrimitive.Root,
+      {
+        ref,
+        "data-testid": "toast",
+        className: cn(
+          // Base styles
+          "group pointer-events-auto relative flex w-full flex-col items-start gap-3 overflow-hidden rounded-lg border-none bg-background-solid p-4 text-background-inverse-solid shadow-lg transition-all",
+          // Dark mode
+          "dark:border-opacity-100",
+          // Animation
+          "data-[state=closed]:fade-out-80 data-[state=closed]:slide-out-to-right-full data-[state=open]:slide-in-from-bottom-full data-[state=open]:sm:slide-in-from-top-full data-[swipe=cancel]:translate-x-0 data-[swipe=end]:translate-x-(--radix-toast-swipe-end-x) data-[swipe=move]:translate-x-(--radix-toast-swipe-move-x) data-[state=closed]:animate-out data-[state=open]:animate-in data-[swipe=end]:animate-out data-[swipe=move]:transition-none",
+          // Manual CSS overrides
+          className
+        ),
+        ...props,
+        children: [
+          /* @__PURE__ */ jsxs("div", { className: "flex w-full items-center gap-3", children: [
+            /* @__PURE__ */ jsx("div", { className: "self-start", children: variant === "messageToast" ? avatarSrc && /* @__PURE__ */ jsx(Avatar, { src: avatarSrc, alt: avatarAlt, fallback: avatarFallback }) : /* @__PURE__ */ jsx(VariantIcon, { variant }) }),
+            /* @__PURE__ */ jsxs("div", { className: "flex flex-1 flex-col items-start", children: [
+              title && /* @__PURE__ */ jsx(ToastPrimitive.Title, { className: "typography-body-2-semibold", children: title }),
+              description && /* @__PURE__ */ jsx(ToastPrimitive.Description, { className: "typography-body-2-regular mt-1 opacity-90", children: description }),
+              children,
+              onActionClick && /* @__PURE__ */ jsx(
+                Button,
+                {
+                  variant: "secondary",
+                  className: "mt-4 border-body-400 text-body-400",
+                  size: "32",
+                  onClick: onActionClick,
+                  children: actionLabel ?? "Action"
+                }
+              )
+            ] })
+          ] }),
+          showClose && /* @__PURE__ */ jsx(ToastPrimitive.Close, { asChild: true, children: /* @__PURE__ */ jsx(
+            IconButton,
+            {
+              icon: /* @__PURE__ */ jsx(CloseIcon, {}),
+              "aria-label": "Close notification",
+              className: "absolute top-2 right-2 text-body-300",
+              variant: "tertiary",
+              size: "24"
+            }
+          ) })
+        ]
+      }
+    );
+  }
+);
+Toast.displayName = "Toast";
+export {
+  Toast,
+  ToastProvider,
+  ToastViewport
+};
+//# sourceMappingURL=Toast.mjs.map

package/dist/components/Toast/Toast.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"Toast.mjs","sources":["../../../src/components/Toast/Toast.tsx"],"sourcesContent":["import * as ToastPrimitive from \"@radix-ui/react-toast\";\nimport * as React from \"react\";\nimport { cn } from \"../../utils/cn\";\nimport { Avatar } from \"../Avatar/Avatar\";\nimport { Button } from \"../Button/Button\";\nimport { IconButton } from \"../IconButton/IconButton\";\nimport { CloseIcon } from \"../Icons/CloseIcon\";\nimport { ErrorIcon } from \"../Icons/ErrorIcon\";\nimport { InfoIcon } from \"../Icons/InfoIcon\";\nimport { SuccessIcon } from \"../Icons/SuccessIcon\";\nimport { WarningIcon } from \"../Icons/WarningIcon\";\n\nexport enum toastVariants {\n  info = \"info\",\n  warning = \"warning\",\n  success = \"success\",\n  error = \"error\",\n  messageToast = \"messageToast\",\n}\n\nexport type ToastVariant = keyof typeof toastVariants;\n\n// Override \"title\" prop to allow React.ReactNode instead of string | undefined\nexport interface ToastProps\n  extends Omit<Omit<React.ComponentPropsWithoutRef<typeof ToastPrimitive.Root>, \"type\">, \"title\"> {\n  /** Variant of the toast */\n  variant?: ToastVariant;\n  /** Toast title */\n  title?: string;\n  /** Toast description/message */\n  description?: React.ReactNode;\n  /** Action button label */\n  actionLabel?: string;\n  /** Action button click handler */\n  onActionClick?: () => void;\n  /** Show close button */\n  showClose?: boolean;\n  /** Avatar image source */\n  avatarSrc?: string;\n  /** Avatar alt text */\n  avatarAlt?: string;\n  /** Avatar fallback text */\n  avatarFallback?: string;\n}\n\nexport interface ToastProviderProps extends ToastPrimitive.ToastProviderProps {}\nexport interface ToastViewportProps\n  extends React.ComponentPropsWithoutRef<typeof ToastPrimitive.Viewport> {}\n\nexport const ToastProvider: React.FC<ToastProviderProps> = ToastPrimitive.Provider;\n\nexport const ToastViewport = React.forwardRef<\n  React.ElementRef<typeof ToastPrimitive.Viewport>,\n  ToastViewportProps\n>(({ className, ...props }, ref) => (\n  <ToastPrimitive.Viewport\n    ref={ref}\n    className={cn(\n      \"fixed top-0 right-0 z-100 flex max-h-screen w-full flex-col-reverse gap-3 p-4 sm:top-auto sm:right-0 sm:bottom-0 sm:flex-col md:max-w-[420px]\",\n      className,\n    )}\n    {...props}\n  />\n));\n\nToastViewport.displayName = \"ToastViewport\";\n\nconst VariantIcon = ({ variant }: { variant: ToastVariant }) => {\n  switch (variant) {\n    case \"info\":\n      return <InfoIcon className=\"size-5 text-info-500\" />;\n    case \"warning\":\n      return <WarningIcon className=\"size-5 text-warning-500\" />;\n    case \"success\":\n      return <SuccessIcon className=\"size-5 text-success-500\" />;\n    case \"error\":\n      return <ErrorIcon className=\"size-5 text-error-500\" />;\n  }\n};\n\nexport const Toast = React.forwardRef<React.ComponentRef<typeof ToastPrimitive.Root>, ToastProps>(\n  (\n    {\n      className,\n      variant = \"info\",\n      title,\n      description,\n      actionLabel,\n      onActionClick,\n      showClose = true,\n      avatarSrc,\n      avatarAlt,\n      avatarFallback,\n      children,\n      ...props\n    },\n    ref,\n  ) => {\n    return (\n      <ToastPrimitive.Root\n        ref={ref}\n        data-testid=\"toast\"\n        className={cn(\n          // Base styles\n          \"group pointer-events-auto relative flex w-full flex-col items-start gap-3 overflow-hidden rounded-lg border-none bg-background-solid p-4 text-background-inverse-solid shadow-lg transition-all\",\n          // Dark mode\n          \"dark:border-opacity-100\",\n          // Animation\n          \"data-[state=closed]:fade-out-80 data-[state=closed]:slide-out-to-right-full data-[state=open]:slide-in-from-bottom-full data-[state=open]:sm:slide-in-from-top-full data-[swipe=cancel]:translate-x-0 data-[swipe=end]:translate-x-(--radix-toast-swipe-end-x) data-[swipe=move]:translate-x-(--radix-toast-swipe-move-x) data-[state=closed]:animate-out data-[state=open]:animate-in data-[swipe=end]:animate-out data-[swipe=move]:transition-none\",\n          // Manual CSS overrides\n          className,\n        )}\n        {...props}\n      >\n        <div className=\"flex w-full items-center gap-3\">\n          <div className=\"self-start\">\n            {variant === \"messageToast\" ? (\n              avatarSrc && <Avatar src={avatarSrc} alt={avatarAlt} fallback={avatarFallback} />\n            ) : (\n              <VariantIcon variant={variant} />\n            )}\n          </div>\n          <div className=\"flex flex-1 flex-col items-start\">\n            {title && (\n              <ToastPrimitive.Title className=\"typography-body-2-semibold\">\n                {title}\n              </ToastPrimitive.Title>\n            )}\n            {description && (\n              <ToastPrimitive.Description className=\"typography-body-2-regular mt-1 opacity-90\">\n                {description}\n              </ToastPrimitive.Description>\n            )}\n            {children}\n            {onActionClick && (\n              <Button\n                variant=\"secondary\"\n                // These styles are basically inverted from the selected theme\n                className=\"mt-4 border-body-400 text-body-400\"\n                size=\"32\"\n                onClick={onActionClick}\n              >\n                {actionLabel ?? \"Action\"}\n              </Button>\n            )}\n          </div>\n        </div>\n        {showClose && (\n          <ToastPrimitive.Close asChild>\n            <IconButton\n              icon={<CloseIcon />}\n              aria-label=\"Close notification\"\n              // same as the button above\n              className=\"absolute top-2 right-2 text-body-300\"\n              variant=\"tertiary\"\n              size=\"24\"\n            />\n          </ToastPrimitive.Close>\n        )}\n      </ToastPrimitive.Root>\n    );\n  },\n);\n\nToast.displayName = \"Toast\";\n"],"names":[],"mappings":";;;;;;;;;;;;;AAiDO,MAAM,gBAA8C,eAAe;AAEnE,MAAM,gBAAgB,MAAM,WAGjC,CAAC,EAAE,WAAW,GAAG,MAAA,GAAS,QAC1B;AAAA,EAAC,eAAe;AAAA,EAAf;AAAA,IACC;AAAA,IACA,WAAW;AAAA,MACT;AAAA,MACA;AAAA,IAAA;AAAA,IAED,GAAG;AAAA,EAAA;AACN,CACD;AAED,cAAc,cAAc;AAE5B,MAAM,cAAc,CAAC,EAAE,cAAyC;AAC9D,UAAQ,SAAA;AAAA,IACN,KAAK;AACH,aAAO,oBAAC,UAAA,EAAS,WAAU,uBAAA,CAAuB;AAAA,IACpD,KAAK;AACH,aAAO,oBAAC,aAAA,EAAY,WAAU,0BAAA,CAA0B;AAAA,IAC1D,KAAK;AACH,aAAO,oBAAC,aAAA,EAAY,WAAU,0BAAA,CAA0B;AAAA,IAC1D,KAAK;AACH,aAAO,oBAAC,WAAA,EAAU,WAAU,wBAAA,CAAwB;AAAA,EAAA;AAE1D;AAEO,MAAM,QAAQ,MAAM;AAAA,EACzB,CACE;AAAA,IACE;AAAA,IACA,UAAU;AAAA,IACV;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA,YAAY;AAAA,IACZ;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA,GAAG;AAAA,EAAA,GAEL,QACG;AACH,WACE;AAAA,MAAC,eAAe;AAAA,MAAf;AAAA,QACC;AAAA,QACA,eAAY;AAAA,QACZ,WAAW;AAAA;AAAA,UAET;AAAA;AAAA,UAEA;AAAA;AAAA,UAEA;AAAA;AAAA,UAEA;AAAA,QAAA;AAAA,QAED,GAAG;AAAA,QAEJ,UAAA;AAAA,UAAA,qBAAC,OAAA,EAAI,WAAU,kCACb,UAAA;AAAA,YAAA,oBAAC,SAAI,WAAU,cACZ,sBAAY,iBACX,iCAAc,QAAA,EAAO,KAAK,WAAW,KAAK,WAAW,UAAU,eAAA,CAAgB,IAE/E,oBAAC,aAAA,EAAY,SAAkB,EAAA,CAEnC;AAAA,YACA,qBAAC,OAAA,EAAI,WAAU,oCACZ,UAAA;AAAA,cAAA,6BACE,eAAe,OAAf,EAAqB,WAAU,8BAC7B,UAAA,OACH;AAAA,cAED,eACC,oBAAC,eAAe,aAAf,EAA2B,WAAU,6CACnC,UAAA,aACH;AAAA,cAED;AAAA,cACA,iBACC;AAAA,gBAAC;AAAA,gBAAA;AAAA,kBACC,SAAQ;AAAA,kBAER,WAAU;AAAA,kBACV,MAAK;AAAA,kBACL,SAAS;AAAA,kBAER,UAAA,eAAe;AAAA,gBAAA;AAAA,cAAA;AAAA,YAClB,EAAA,CAEJ;AAAA,UAAA,GACF;AAAA,UACC,aACC,oBAAC,eAAe,OAAf,EAAqB,SAAO,MAC3B,UAAA;AAAA,YAAC;AAAA,YAAA;AAAA,cACC,0BAAO,WAAA,EAAU;AAAA,cACjB,cAAW;AAAA,cAEX,WAAU;AAAA,cACV,SAAQ;AAAA,cACR,MAAK;AAAA,YAAA;AAAA,UAAA,EACP,CACF;AAAA,QAAA;AAAA,MAAA;AAAA,IAAA;AAAA,EAIR;AACF;AAEA,MAAM,cAAc;"}

package/dist/index.d.ts

@@ -3,7 +3,9 @@ import * as CheckboxPrimitive from '@radix-ui/react-checkbox';
 import { ClassValue } from 'clsx';
 import { DateRange } from 'react-day-picker';
 import { DayPickerProps } from 'react-day-picker';
+import { default as default_2 } from 'react';
 import { ForwardRefExoticComponent } from 'react';
+import { JSX } from 'react/jsx-runtime';
 import * as RadioGroupPrimitive from '@radix-ui/react-radio-group';
 import * as React_2 from 'react';
 import { RefAttributes } from 'react';
@@ -210,6 +212,10 @@ export declare type ChipSize = "32" | "40";
 
 export declare type ChipVariant = "rounded" | "square" | "dark";
 
+export declare const CloseIcon: React_2.ForwardRefExoticComponent<React_2.SVGAttributes<SVGSVGElement> & {
+    className?: string;
+} & React_2.RefAttributes<SVGSVGElement>>;
+
 export declare function cn(...inputs: ClassValue[]): string;
 
 export declare const Count: React_2.ForwardRefExoticComponent<CountProps & React_2.RefAttributes<HTMLSpanElement>>;
@@ -271,6 +277,10 @@ export declare const ErrorCircleIcon: React_2.ForwardRefExoticComponent<React_2.
     className?: string;
 } & React_2.RefAttributes<SVGSVGElement>>;
 
+export declare const ErrorIcon: default_2.ForwardRefExoticComponent<default_2.SVGAttributes<SVGSVGElement> & {
+    className?: string;
+} & default_2.RefAttributes<SVGSVGElement>>;
+
 export declare const FireIcon: React_2.ForwardRefExoticComponent<React_2.SVGAttributes<SVGSVGElement> & {
     className?: string;
 } & React_2.RefAttributes<SVGSVGElement>>;
@@ -305,6 +315,10 @@ export declare const InfoCircleIcon: React_2.ForwardRefExoticComponent<React_2.S
     className?: string;
 } & React_2.RefAttributes<SVGSVGElement>>;
 
+export declare const InfoIcon: default_2.ForwardRefExoticComponent<default_2.SVGAttributes<SVGSVGElement> & {
+    className?: string;
+} & default_2.RefAttributes<SVGSVGElement>>;
+
 export declare const Logo: React_2.ForwardRefExoticComponent<LogoProps & React_2.RefAttributes<HTMLDivElement>>;
 
 export declare type LogoColor = "Full colour" | "Decolour" | "White Always" | "Black Always";
@@ -324,6 +338,10 @@ export declare interface LogoProps extends React_2.HTMLAttributes<HTMLDivElement
 
 export declare type LogoType = "Full" | "Icon" | "Wordmark" | "Portrait";
 
+export declare const MicrophoneIcon: ({ className }: {
+    className?: string;
+}) => JSX.Element;
+
 /** Small minus/indeterminate icon for use in checkbox components (12x12 viewBox) */
 export declare const MinusIcon: React_2.ForwardRefExoticComponent<React_2.SVGAttributes<SVGSVGElement> & {
     className?: string;
@@ -501,6 +519,14 @@ export declare const SpinnerIcon: React_2.ForwardRefExoticComponent<React_2.SVGA
     className?: string;
 } & React_2.RefAttributes<SVGSVGElement>>;
 
+export declare const StopIcon: ({ className }: {
+    className?: string;
+}) => JSX.Element;
+
+export declare const SuccessIcon: default_2.ForwardRefExoticComponent<default_2.SVGAttributes<SVGSVGElement> & {
+    className?: string;
+} & default_2.RefAttributes<SVGSVGElement>>;
+
 export declare const Switch: React_2.ForwardRefExoticComponent<SwitchProps & React_2.RefAttributes<HTMLButtonElement>>;
 
 export declare const SwitchField: React_2.ForwardRefExoticComponent<SwitchFieldProps & React_2.RefAttributes<HTMLButtonElement>>;
@@ -619,6 +645,10 @@ export declare const VipBadgeIcon: React_2.ForwardRefExoticComponent<React_2.SVG
     className?: string;
 } & React_2.RefAttributes<SVGSVGElement>>;
 
+export declare const WarningIcon: default_2.ForwardRefExoticComponent<default_2.SVGAttributes<SVGSVGElement> & {
+    className?: string;
+} & default_2.RefAttributes<SVGSVGElement>>;
+
 export declare const WarningTriangleIcon: React_2.ForwardRefExoticComponent<React_2.SVGAttributes<SVGSVGElement> & {
     className?: string;
 } & React_2.RefAttributes<SVGSVGElement>>;