@fuf-stack/pixels 0.41.0 → 0.41.2

package/dist/index.js

@@ -14,6 +14,12 @@ import {
   Tabs_default,
   tabsVariants
 } from "./chunk-JZHEG3SM.js";
+import {
+  Toast,
+  ToastProvider_default,
+  addToast,
+  toastVariants
+} from "./chunk-ZMEVGJBC.js";
 import {
   Tooltip_default
 } from "./chunk-YXWPOEX6.js";
@@ -79,165 +85,7 @@ import {
   Button_default,
   buttonVariants
 } from "./chunk-MAKWBTTW.js";
-import {
-  __spreadProps,
-  __spreadValues
-} from "./chunk-J7N2552D.js";
-
-// src/Toast/addToast.tsx
-import { toast as heroToastVariants } from "@heroui/theme";
-import { addToast as heroAddToast } from "@heroui/toast";
-import { tv, variantsToClassNames } from "@fuf-stack/pixel-utils";
-var toastVariants = tv({
-  slots: {
-    base: "",
-    title: "",
-    description: "",
-    icon: "",
-    loadingIcon: "",
-    content: "",
-    motionDiv: "",
-    progressTrack: "",
-    progressIndicator: "",
-    closeButton: "",
-    closeIcon: ""
-  },
-  variants: {
-    // see:  https://github.com/heroui-inc/heroui/blob/canary/packages/core/theme/src/components/toast.ts
-    color: __spreadValues({
-      info: {}
-    }, heroToastVariants.variants.color),
-    variant: __spreadValues({}, heroToastVariants.variants.variant)
-  },
-  compoundVariants: [
-    ...heroToastVariants.compoundVariants,
-    {
-      variant: "solid",
-      color: "info",
-      className: {
-        base: "bg-info text-info-foreground",
-        title: "text-info-foreground",
-        description: "text-info-foreground",
-        icon: "text-info-foreground",
-        closeIcon: "border-info-400 bg-info-100",
-        closeButton: "text-info-400 hover:text-info-600",
-        progressIndicator: "bg-info-400"
-      }
-    },
-    {
-      color: "info",
-      variant: "flat",
-      className: {
-        base: "bg-info-50 text-info-600 dark:bg-info-50/50",
-        title: "text-info-600",
-        description: "text-info-500",
-        icon: "text-info-600",
-        closeIcon: "border-info-400 bg-info-100",
-        closeButton: "text-info-400 hover:text-info-600",
-        progressIndicator: "bg-info-400"
-      }
-    },
-    {
-      color: "info",
-      variant: "bordered",
-      className: {
-        base: "border-small border-info text-info-600",
-        title: "text-info-600",
-        description: "text-info-500",
-        icon: "text-info-600",
-        closeIcon: "border-info-400 bg-info-100",
-        closeButton: "text-info-400 hover:text-info-600",
-        progressIndicator: "bg-info-400"
-      }
-    }
-  ]
-});
-var addToast = ({
-  className = void 0,
-  closeIcon = void 0,
-  color = "default",
-  description = void 0,
-  endContent = void 0,
-  icon = void 0,
-  loadingIcon = void 0,
-  onClose = void 0,
-  promise = void 0,
-  shouldShowTimeoutProgress = false,
-  showCloseButton = true,
-  showIcon = true,
-  timeout = 5e3,
-  title = void 0,
-  variant = "bordered"
-}) => {
-  const variants = toastVariants({
-    color,
-    variant
-  });
-  const isHeroUIColor = Object.keys(heroToastVariants.variants.color).includes(
-    color
-  );
-  const classNames = variantsToClassNames(variants, className, "base");
-  heroAddToast({
-    classNames,
-    closeIcon,
-    color: isHeroUIColor ? color : void 0,
-    // TODO: 'data-testid': testId,
-    description,
-    endContent,
-    hideCloseButton: !showCloseButton,
-    hideIcon: !showIcon,
-    icon,
-    loadingIcon,
-    onClose,
-    promise,
-    shouldShowTimeoutProgress,
-    timeout,
-    title,
-    variant
-  });
-};
-
-// src/Toast/ToastProvider.tsx
-import { toast as heroToastVariants2 } from "@heroui/theme";
-import { ToastProvider as HeroToastProvider } from "@heroui/toast";
-import { variantsToClassNames as variantsToClassNames2 } from "@fuf-stack/pixel-utils";
-import { jsx } from "react/jsx-runtime";
-var ToastProvider = ({
-  disableAnimation = false,
-  maxVisibleToasts = 5,
-  placement = "top-center",
-  toastProps = void 0,
-  toastOffset = 26,
-  regionProps = void 0
-}) => {
-  const variants = toastVariants({
-    color: toastProps == null ? void 0 : toastProps.color,
-    variant: toastProps == null ? void 0 : toastProps.variant
-  });
-  const isHeroUIColor = Object.keys(heroToastVariants2.variants.color).includes(
-    (toastProps == null ? void 0 : toastProps.color) || ""
-  );
-  const classNames = variantsToClassNames2(
-    variants,
-    toastProps == null ? void 0 : toastProps.className,
-    "base"
-  );
-  return /* @__PURE__ */ jsx(
-    HeroToastProvider,
-    {
-      disableAnimation,
-      maxVisibleToasts,
-      placement,
-      regionProps,
-      toastOffset,
-      toastProps: __spreadProps(__spreadValues({}, toastProps), {
-        classNames,
-        color: isHeroUIColor ? toastProps == null ? void 0 : toastProps.color : void 0
-      })
-    }
-  );
-};
-var ToastProvider_default = ToastProvider;
+import "./chunk-J7N2552D.js";
 export {
   Accordion_default as Accordion,
   Alert_default as Alert,
@@ -258,6 +106,7 @@ export {
   ProgressCircular_default as ProgressCircular,
   Table_default as Table,
   Tabs_default as Tabs,
+  Toast,
   ToastProvider_default as ToastProvider,
   Tooltip_default as Tooltip,
   accordionVariants,

package/dist/index.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../src/Toast/addToast.tsx","../src/Toast/ToastProvider.tsx"],"sourcesContent":["import type { TVClassName, TVProps } from '@fuf-stack/pixel-utils';\nimport type { ToastProps as HeroToastProps } from '@heroui/toast';\nimport type { ReactNode } from 'react';\n\nimport { toast as heroToastVariants } from '@heroui/theme';\nimport { addToast as heroAddToast } from '@heroui/toast';\n\nimport { tv, variantsToClassNames } from '@fuf-stack/pixel-utils';\n\nexport const toastVariants = tv({\n  slots: {\n    base: '',\n    title: '',\n    description: '',\n    icon: '',\n    loadingIcon: '',\n    content: '',\n    motionDiv: '',\n    progressTrack: '',\n    progressIndicator: '',\n    closeButton: '',\n    closeIcon: '',\n  },\n  variants: {\n    // see:  https://github.com/heroui-inc/heroui/blob/canary/packages/core/theme/src/components/toast.ts\n    color: {\n      info: {},\n      ...heroToastVariants.variants.color,\n    },\n    variant: {\n      ...heroToastVariants.variants.variant,\n    },\n  },\n  compoundVariants: [\n    ...heroToastVariants.compoundVariants,\n    {\n      variant: 'solid',\n      color: 'info',\n      className: {\n        base: 'bg-info text-info-foreground',\n        title: 'text-info-foreground',\n        description: 'text-info-foreground',\n        icon: 'text-info-foreground',\n        closeIcon: 'border-info-400 bg-info-100',\n        closeButton: 'text-info-400 hover:text-info-600',\n        progressIndicator: 'bg-info-400',\n      },\n    },\n    {\n      color: 'info',\n      variant: 'flat',\n      className: {\n        base: 'bg-info-50 text-info-600 dark:bg-info-50/50',\n        title: 'text-info-600',\n        description: 'text-info-500',\n        icon: 'text-info-600',\n        closeIcon: 'border-info-400 bg-info-100',\n        closeButton: 'text-info-400 hover:text-info-600',\n        progressIndicator: 'bg-info-400',\n      },\n    },\n\n    {\n      color: 'info',\n      variant: 'bordered',\n      className: {\n        base: 'border-small border-info text-info-600',\n        title: 'text-info-600',\n        description: 'text-info-500',\n        icon: 'text-info-600',\n        closeIcon: 'border-info-400 bg-info-100',\n        closeButton: 'text-info-400 hover:text-info-600',\n        progressIndicator: 'bg-info-400',\n      },\n    },\n  ],\n});\n\nexport type AddToastVariantProps = TVProps<typeof toastVariants>;\ntype ClassName = TVClassName<typeof toastVariants>;\n\nexport interface ToastProps extends AddToastVariantProps {\n  /** CSS class name */\n  className?: ClassName;\n  /** Icon displayed at the end of the Alert */\n  closeIcon?: ReactNode;\n  /** Color of the alert */\n  color?: AddToastVariantProps['color'];\n  /** Content displayed inside the Alert */\n  description?: ReactNode;\n  /** Content displayed at the end of the Alert */\n  endContent?: ReactNode;\n  /** Icon displayed at the start of the Alert */\n  icon?: ReactNode;\n  /** Icon or animation displayed until promise is resolved */\n  loadingIcon?: ReactNode;\n  /** Callback function called when the toast is closed */\n  onClose?: () => void;\n  /** Promise based on which the notification will be styled */\n  promise?: Promise<void>;\n  /** Whether the toast should show a progress bar */\n  shouldShowTimeoutProgress?: boolean;\n  /** Whether the toast should show a close button */\n  showCloseButton?: boolean;\n  /** Whether the toast should show an icon */\n  showIcon?: boolean;\n  /** Time the toast is displayed */\n  timeout?: number;\n  /** Content displayed at the top of the toast */\n  title?: ReactNode;\n  /** Variant of the toast */\n  variant?: AddToastVariantProps['variant'];\n}\n\n/**\n * addToast function based on [HeroUI Toast](https://www.heroui.com//docs/components/toast)\n */\nexport const addToast = ({\n  className = undefined,\n  closeIcon = undefined,\n  color = 'default',\n  description = undefined,\n  endContent = undefined,\n  icon = undefined,\n  loadingIcon = undefined,\n  onClose = undefined,\n  promise = undefined,\n  shouldShowTimeoutProgress = false,\n  showCloseButton = true,\n  showIcon = true,\n  timeout = 5000,\n  title = undefined,\n  variant = 'bordered',\n}: ToastProps) => {\n  const variants = toastVariants({\n    color,\n    variant,\n  });\n  const isHeroUIColor = Object.keys(heroToastVariants.variants.color).includes(\n    color,\n  );\n  const classNames = variantsToClassNames(variants, className, 'base');\n  heroAddToast({\n    classNames,\n    closeIcon,\n    color: isHeroUIColor ? (color as HeroToastProps['color']) : undefined,\n    // TODO: 'data-testid': testId,\n    description,\n    endContent,\n    hideCloseButton: !showCloseButton,\n    hideIcon: !showIcon,\n    icon,\n    loadingIcon,\n    onClose,\n    promise,\n    shouldShowTimeoutProgress,\n    timeout,\n    title,\n    variant,\n  });\n};\n\nexport default addToast;\n","import type { ToastProps as HeroToastProps } from '@heroui/toast';\nimport type { ToastProps } from './addToast';\n\nimport { toast as heroToastVariants } from '@heroui/theme';\nimport { ToastProvider as HeroToastProvider } from '@heroui/toast';\n\nimport { variantsToClassNames } from '@fuf-stack/pixel-utils';\n\nimport { toastVariants } from './addToast';\n\nexport type ToastProviderToastProps = Omit<\n  ToastProps,\n  'description' | 'endContent' | 'title'\n>;\n\nexport interface ToastProviderProps {\n  disableAnimation?: boolean;\n  maxVisibleToasts?: number;\n  placement?:\n    | 'bottom-right'\n    | 'bottom-left'\n    | 'bottom-center'\n    | 'top-right'\n    | 'top-left'\n    | 'top-center';\n\n  toastProps?: ToastProviderToastProps;\n  toastOffset?: number;\n  regionProps?: { classNames?: Record<'base', string> };\n}\n\n/**\n * ToastProvider component based on [HeroUI Toast](https://www.heroui.com//docs/components/toast)\n */\nconst ToastProvider = ({\n  disableAnimation = false,\n  maxVisibleToasts = 5,\n  placement = 'top-center',\n  toastProps = undefined,\n  toastOffset = 26,\n  regionProps = undefined,\n}: ToastProviderProps) => {\n  const variants = toastVariants({\n    color: toastProps?.color,\n    variant: toastProps?.variant,\n  });\n  const isHeroUIColor = Object.keys(heroToastVariants.variants.color).includes(\n    toastProps?.color || '',\n  );\n  const classNames = variantsToClassNames(\n    variants,\n    toastProps?.className,\n    'base',\n  );\n  return (\n    <HeroToastProvider\n      disableAnimation={disableAnimation}\n      maxVisibleToasts={maxVisibleToasts}\n      placement={placement}\n      regionProps={regionProps}\n      toastOffset={toastOffset}\n      toastProps={{\n        ...toastProps,\n        classNames,\n        color: isHeroUIColor\n          ? (toastProps?.color as HeroToastProps['color'])\n          : undefined,\n      }}\n    />\n  );\n};\n\nexport default ToastProvider;\n"],"mappings":"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","names":["heroToastVariants","variantsToClassNames","heroToastVariants","variantsToClassNames"]}
+{"version":3,"sources":[],"sourcesContent":[],"mappings":"","names":[]}

package/package.json

@@ -2,7 +2,7 @@
   "name": "@fuf-stack/pixels",
   "description": "fuf core react component library",
   "author": "Hannes Tiede",
-  "version": "0.41.0",
+  "version": "0.41.2",
   "type": "module",
   "main": "./dist/index.cjs",
   "module": "./dist/index.js",
@@ -123,6 +123,11 @@
       "import": "./dist/Tabs/index.js",
       "require": "./dist/Tabs/index.cjs"
     },
+    "./Toast": {
+      "types": "./dist/Toast/index.d.ts",
+      "import": "./dist/Toast/index.js",
+      "require": "./dist/Toast/index.cjs"
+    },
     "./Tooltip": {
       "types": "./dist/Tooltip/index.d.ts",
       "import": "./dist/Tooltip/index.js",
@@ -188,8 +193,8 @@
     "react": "19.0.0",
     "react-dom": "19.0.0",
     "@repo/storybook-config": "0.0.1",
-    "@repo/tailwind-config": "0.0.1",
     "@repo/tsup-config": "0.0.1",
+    "@repo/tailwind-config": "0.0.1",
     "@repo/vite-config": "0.0.1"
   },
   "scripts": {