analytica-frontend-lib 1.0.83 → 1.0.85
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/dist/Accordation/index.js +163 -74
- package/dist/Accordation/index.js.map +1 -1
- package/dist/Accordation/index.mjs +163 -74
- package/dist/Accordation/index.mjs.map +1 -1
- package/dist/Alert/index.js +32 -32
- package/dist/Alert/index.js.map +1 -1
- package/dist/Alert/index.mjs +32 -32
- package/dist/Alert/index.mjs.map +1 -1
- package/dist/AlertDialog/index.js +13 -2
- package/dist/AlertDialog/index.js.map +1 -1
- package/dist/AlertDialog/index.mjs +13 -2
- package/dist/AlertDialog/index.mjs.map +1 -1
- package/dist/Alternative/index.js +86 -25
- package/dist/Alternative/index.js.map +1 -1
- package/dist/Alternative/index.mjs +86 -25
- package/dist/Alternative/index.mjs.map +1 -1
- package/dist/Badge/index.js +13 -4
- package/dist/Badge/index.js.map +1 -1
- package/dist/Badge/index.mjs +13 -4
- package/dist/Badge/index.mjs.map +1 -1
- package/dist/Button/index.js +10 -1
- package/dist/Button/index.js.map +1 -1
- package/dist/Button/index.mjs +8 -1
- package/dist/Button/index.mjs.map +1 -1
- package/dist/Calendar/index.js +11 -2
- package/dist/Calendar/index.js.map +1 -1
- package/dist/Calendar/index.mjs +11 -2
- package/dist/Calendar/index.mjs.map +1 -1
- package/dist/Card/index.js +154 -71
- package/dist/Card/index.js.map +1 -1
- package/dist/Card/index.mjs +154 -71
- package/dist/Card/index.mjs.map +1 -1
- package/dist/CheckBox/index.js +28 -5
- package/dist/CheckBox/index.js.map +1 -1
- package/dist/CheckBox/index.mjs +28 -5
- package/dist/CheckBox/index.mjs.map +1 -1
- package/dist/Chips/index.js +10 -1
- package/dist/Chips/index.js.map +1 -1
- package/dist/Chips/index.mjs +10 -1
- package/dist/Chips/index.mjs.map +1 -1
- package/dist/Divider/index.js +10 -1
- package/dist/Divider/index.js.map +1 -1
- package/dist/Divider/index.mjs +8 -1
- package/dist/Divider/index.mjs.map +1 -1
- package/dist/DropdownMenu/index.js +18 -22
- package/dist/DropdownMenu/index.js.map +1 -1
- package/dist/DropdownMenu/index.mjs +18 -22
- package/dist/DropdownMenu/index.mjs.map +1 -1
- package/dist/IconButton/index.js +10 -1
- package/dist/IconButton/index.js.map +1 -1
- package/dist/IconButton/index.mjs +10 -1
- package/dist/IconButton/index.mjs.map +1 -1
- package/dist/IconRoundedButton/index.js +10 -1
- package/dist/IconRoundedButton/index.js.map +1 -1
- package/dist/IconRoundedButton/index.mjs +8 -1
- package/dist/IconRoundedButton/index.mjs.map +1 -1
- package/dist/Menu/index.js +22 -10
- package/dist/Menu/index.js.map +1 -1
- package/dist/Menu/index.mjs +22 -10
- package/dist/Menu/index.mjs.map +1 -1
- package/dist/Modal/index.js +15 -1
- package/dist/Modal/index.js.map +1 -1
- package/dist/Modal/index.mjs +15 -1
- package/dist/Modal/index.mjs.map +1 -1
- package/dist/NavButton/index.js +10 -1
- package/dist/NavButton/index.js.map +1 -1
- package/dist/NavButton/index.mjs +10 -1
- package/dist/NavButton/index.mjs.map +1 -1
- package/dist/NotFound/index.js +13 -3
- package/dist/NotFound/index.js.map +1 -1
- package/dist/NotFound/index.mjs +13 -3
- package/dist/NotFound/index.mjs.map +1 -1
- package/dist/ProgressBar/index.js +63 -15
- package/dist/ProgressBar/index.js.map +1 -1
- package/dist/ProgressBar/index.mjs +63 -15
- package/dist/ProgressBar/index.mjs.map +1 -1
- package/dist/ProgressCircle/index.js +34 -7
- package/dist/ProgressCircle/index.js.map +1 -1
- package/dist/ProgressCircle/index.mjs +34 -7
- package/dist/ProgressCircle/index.mjs.map +1 -1
- package/dist/Quiz/index.d.mts +25 -2
- package/dist/Quiz/index.d.ts +25 -2
- package/dist/Quiz/index.js +972 -260
- package/dist/Quiz/index.js.map +1 -1
- package/dist/Quiz/index.mjs +968 -261
- package/dist/Quiz/index.mjs.map +1 -1
- package/dist/Quiz/useQuizStore/index.d.mts +44 -12
- package/dist/Quiz/useQuizStore/index.d.ts +44 -12
- package/dist/Quiz/useQuizStore/index.js +206 -85
- package/dist/Quiz/useQuizStore/index.js.map +1 -1
- package/dist/Quiz/useQuizStore/index.mjs +203 -85
- package/dist/Quiz/useQuizStore/index.mjs.map +1 -1
- package/dist/Radio/index.js +36 -6
- package/dist/Radio/index.js.map +1 -1
- package/dist/Radio/index.mjs +36 -6
- package/dist/Radio/index.mjs.map +1 -1
- package/dist/Select/index.js +20 -4
- package/dist/Select/index.js.map +1 -1
- package/dist/Select/index.mjs +20 -4
- package/dist/Select/index.mjs.map +1 -1
- package/dist/SelectionButton/index.js +10 -1
- package/dist/SelectionButton/index.js.map +1 -1
- package/dist/SelectionButton/index.mjs +10 -1
- package/dist/SelectionButton/index.mjs.map +1 -1
- package/dist/Skeleton/index.js +18 -6
- package/dist/Skeleton/index.js.map +1 -1
- package/dist/Skeleton/index.mjs +18 -6
- package/dist/Skeleton/index.mjs.map +1 -1
- package/dist/Stepper/index.js +27 -18
- package/dist/Stepper/index.js.map +1 -1
- package/dist/Stepper/index.mjs +27 -18
- package/dist/Stepper/index.mjs.map +1 -1
- package/dist/Table/index.js +37 -13
- package/dist/Table/index.js.map +1 -1
- package/dist/Table/index.mjs +37 -13
- package/dist/Table/index.mjs.map +1 -1
- package/dist/Text/index.js +10 -1
- package/dist/Text/index.js.map +1 -1
- package/dist/Text/index.mjs +8 -1
- package/dist/Text/index.mjs.map +1 -1
- package/dist/TextArea/index.js +17 -3
- package/dist/TextArea/index.js.map +1 -1
- package/dist/TextArea/index.mjs +17 -3
- package/dist/TextArea/index.mjs.map +1 -1
- package/dist/Toast/Toaster/index.js +15 -1
- package/dist/Toast/Toaster/index.js.map +1 -1
- package/dist/Toast/Toaster/index.mjs +15 -1
- package/dist/Toast/Toaster/index.mjs.map +1 -1
- package/dist/Toast/index.js +15 -1
- package/dist/Toast/index.js.map +1 -1
- package/dist/Toast/index.mjs +15 -1
- package/dist/Toast/index.mjs.map +1 -1
- package/dist/index.css +8 -9
- package/dist/index.css.map +1 -1
- package/dist/index.d.mts +1 -1
- package/dist/index.d.ts +1 -1
- package/dist/index.js +903 -325
- package/dist/index.js.map +1 -1
- package/dist/index.mjs +901 -326
- package/dist/index.mjs.map +1 -1
- package/dist/styles.css +8 -9
- package/dist/styles.css.map +1 -1
- package/package.json +3 -1
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["../../../src/components/Toast/utils/ToastStore.ts","../../../src/components/Toast/Toast.tsx","../../../src/components/Toast/utils/Toaster.tsx"],"sourcesContent":["import { create } from 'zustand';\n\ntype ToastPosition =\n | 'top-left'\n | 'top-center'\n | 'top-right'\n | 'bottom-left'\n | 'bottom-center'\n | 'bottom-right'\n | 'default';\n\ntype ToastData = {\n id: string;\n title: string;\n description?: string;\n variant?: 'solid' | 'outlined';\n action?: 'warning' | 'success' | 'info';\n position?: ToastPosition;\n};\n\ntype ToastStore = {\n toasts: ToastData[];\n addToast: (toast: Omit<ToastData, 'id'>) => void;\n removeToast: (id: string) => void;\n};\n\nconst useToastStore = create<ToastStore>((set) => ({\n toasts: [],\n addToast: (toast) => {\n const id = crypto.randomUUID();\n\n set((state) => ({\n toasts: [...state.toasts, { id, ...toast }],\n }));\n },\n removeToast: (id) => {\n set((state) => ({\n toasts: state.toasts.filter((t) => t.id !== id),\n }));\n },\n}));\n\nexport default useToastStore;\n","import { HTMLAttributes } from 'react';\nimport { CheckCircle, WarningCircle, Info, X } from 'phosphor-react';\n\n/**\n * Lookup table for variant and action class combinations\n */\nconst VARIANT_ACTION_CLASSES = {\n solid: {\n warning:\n 'bg-warning text-warning-600 border-none focus-visible:outline-none',\n success:\n 'bg-success text-success-800 border-none focus-visible:outline-none',\n info: 'bg-info text-info-600 border-none focus-visible:outline-none',\n },\n outlined: {\n warning:\n 'bg-warning text-warning-600 border border-warning-300 focus-visible:outline-none',\n success:\n 'bg-success text-success-800 border border-success-200 focus-visible:outline-none',\n info: 'bg-info text-info-600 border border-info-600 focus-visible:outline-none',\n },\n} as const;\n\ntype ToastPosition =\n | 'top-left'\n | 'top-center'\n | 'top-right'\n | 'bottom-left'\n | 'bottom-center'\n | 'bottom-right'\n | 'default';\n\ntype ToastProps = {\n title: string;\n description?: string;\n onClose: () => void;\n /** Visual variant of the badge */\n variant?: 'solid' | 'outlined';\n /** Action type of the badge */\n action?: 'warning' | 'success' | 'info';\n position?: ToastPosition;\n} & HTMLAttributes<HTMLDivElement>;\n\nconst iconMap = {\n success: CheckCircle,\n info: Info,\n warning: WarningCircle,\n};\n\nconst Toast = ({\n variant = 'outlined',\n action = 'success',\n className = '',\n onClose,\n title,\n description,\n position = 'default',\n ...props\n}: ToastProps) => {\n // Get classes from lookup tables\n const variantClasses = VARIANT_ACTION_CLASSES[variant][action];\n\n const positionClasses: Record<ToastPosition, string> = {\n 'top-left': 'fixed top-4 left-4',\n 'top-center': 'fixed top-4 left-1/2 transform -translate-x-1/2',\n 'top-right': 'fixed top-4 right-4',\n 'bottom-left': 'fixed bottom-4 left-4',\n 'bottom-center': 'fixed bottom-4 left-1/2 transform -translate-x-1/2',\n 'bottom-right': 'fixed bottom-4 right-4',\n default: '',\n };\n\n const IconAction = iconMap[action] || iconMap['success'];\n\n const baseClasses =\n 'max-w-[390px] w-full flex flex-row items-start justify-between shadow-lg rounded-lg border p-4 gap-6 group';\n\n return (\n <div\n role=\"alert\"\n aria-live=\"assertive\"\n aria-atomic=\"true\"\n className={
|
|
1
|
+
{"version":3,"sources":["../../../src/components/Toast/utils/ToastStore.ts","../../../src/components/Toast/Toast.tsx","../../../src/utils/utils.ts","../../../src/components/Toast/utils/Toaster.tsx"],"sourcesContent":["import { create } from 'zustand';\n\ntype ToastPosition =\n | 'top-left'\n | 'top-center'\n | 'top-right'\n | 'bottom-left'\n | 'bottom-center'\n | 'bottom-right'\n | 'default';\n\ntype ToastData = {\n id: string;\n title: string;\n description?: string;\n variant?: 'solid' | 'outlined';\n action?: 'warning' | 'success' | 'info';\n position?: ToastPosition;\n};\n\ntype ToastStore = {\n toasts: ToastData[];\n addToast: (toast: Omit<ToastData, 'id'>) => void;\n removeToast: (id: string) => void;\n};\n\nconst useToastStore = create<ToastStore>((set) => ({\n toasts: [],\n addToast: (toast) => {\n const id = crypto.randomUUID();\n\n set((state) => ({\n toasts: [...state.toasts, { id, ...toast }],\n }));\n },\n removeToast: (id) => {\n set((state) => ({\n toasts: state.toasts.filter((t) => t.id !== id),\n }));\n },\n}));\n\nexport default useToastStore;\n","import { HTMLAttributes } from 'react';\nimport { CheckCircle, WarningCircle, Info, X } from 'phosphor-react';\nimport { cn } from '../../utils/utils';\n\n/**\n * Lookup table for variant and action class combinations\n */\nconst VARIANT_ACTION_CLASSES = {\n solid: {\n warning:\n 'bg-warning text-warning-600 border-none focus-visible:outline-none',\n success:\n 'bg-success text-success-800 border-none focus-visible:outline-none',\n info: 'bg-info text-info-600 border-none focus-visible:outline-none',\n },\n outlined: {\n warning:\n 'bg-warning text-warning-600 border border-warning-300 focus-visible:outline-none',\n success:\n 'bg-success text-success-800 border border-success-200 focus-visible:outline-none',\n info: 'bg-info text-info-600 border border-info-600 focus-visible:outline-none',\n },\n} as const;\n\ntype ToastPosition =\n | 'top-left'\n | 'top-center'\n | 'top-right'\n | 'bottom-left'\n | 'bottom-center'\n | 'bottom-right'\n | 'default';\n\ntype ToastProps = {\n title: string;\n description?: string;\n onClose: () => void;\n /** Visual variant of the badge */\n variant?: 'solid' | 'outlined';\n /** Action type of the badge */\n action?: 'warning' | 'success' | 'info';\n position?: ToastPosition;\n} & HTMLAttributes<HTMLDivElement>;\n\nconst iconMap = {\n success: CheckCircle,\n info: Info,\n warning: WarningCircle,\n};\n\nconst Toast = ({\n variant = 'outlined',\n action = 'success',\n className = '',\n onClose,\n title,\n description,\n position = 'default',\n ...props\n}: ToastProps) => {\n // Get classes from lookup tables\n const variantClasses = VARIANT_ACTION_CLASSES[variant][action];\n\n const positionClasses: Record<ToastPosition, string> = {\n 'top-left': 'fixed top-4 left-4',\n 'top-center': 'fixed top-4 left-1/2 transform -translate-x-1/2',\n 'top-right': 'fixed top-4 right-4',\n 'bottom-left': 'fixed bottom-4 left-4',\n 'bottom-center': 'fixed bottom-4 left-1/2 transform -translate-x-1/2',\n 'bottom-right': 'fixed bottom-4 right-4',\n default: '',\n };\n\n const IconAction = iconMap[action] || iconMap['success'];\n\n const baseClasses =\n 'max-w-[390px] w-full flex flex-row items-start justify-between shadow-lg rounded-lg border p-4 gap-6 group';\n\n return (\n <div\n role=\"alert\"\n aria-live=\"assertive\"\n aria-atomic=\"true\"\n className={cn(\n baseClasses,\n positionClasses[position],\n variantClasses,\n className\n )}\n {...props}\n >\n <div className=\"flex flex-row items-start gap-3\">\n <span className=\"mt-1\" data-testid={`toast-icon-${action}`}>\n <IconAction />\n </span>\n <div className=\"flex flex-col items-start justify-start\">\n <p className=\"font-semibold text-md\">{title}</p>\n {description && (\n <p className=\"text-md text-text-900\">{description}</p>\n )}\n </div>\n </div>\n <button\n onClick={onClose}\n aria-label=\"Dismiss notification\"\n className=\"text-background-500 cursor-pointer opacity-0 group-hover:opacity-100 transition-opacity\"\n >\n <X />\n </button>\n </div>\n );\n};\n\nexport default Toast;\n","import { clsx, type ClassValue } from 'clsx';\nimport { twMerge } from 'tailwind-merge';\n\nexport function cn(...inputs: ClassValue[]) {\n return twMerge(clsx(inputs));\n}\n","import useToastStore from './ToastStore';\nimport Toast from '../Toast';\n\nconst Toaster = () => {\n const toasts = useToastStore((state) => state.toasts);\n const removeToast = useToastStore((state) => state.removeToast);\n\n return (\n <>\n {toasts.map((toast) => (\n <Toast\n key={toast.id}\n title={toast.title}\n description={toast.description}\n variant={toast.variant}\n action={toast.action}\n position={toast.position}\n onClose={() => removeToast(toast.id)}\n />\n ))}\n </>\n );\n};\n\nexport const useToast = () => {\n const addToast = useToastStore((state) => state.addToast);\n const removeToast = useToastStore((state) => state.removeToast);\n\n return { addToast, removeToast };\n};\n\nexport default Toaster;\n"],"mappings":"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","names":["jsx"]}
|
package/dist/Toast/index.js
CHANGED
|
@@ -24,6 +24,15 @@ __export(Toast_exports, {
|
|
|
24
24
|
});
|
|
25
25
|
module.exports = __toCommonJS(Toast_exports);
|
|
26
26
|
var import_phosphor_react = require("phosphor-react");
|
|
27
|
+
|
|
28
|
+
// src/utils/utils.ts
|
|
29
|
+
var import_clsx = require("clsx");
|
|
30
|
+
var import_tailwind_merge = require("tailwind-merge");
|
|
31
|
+
function cn(...inputs) {
|
|
32
|
+
return (0, import_tailwind_merge.twMerge)((0, import_clsx.clsx)(inputs));
|
|
33
|
+
}
|
|
34
|
+
|
|
35
|
+
// src/components/Toast/Toast.tsx
|
|
27
36
|
var import_jsx_runtime = require("react/jsx-runtime");
|
|
28
37
|
var VARIANT_ACTION_CLASSES = {
|
|
29
38
|
solid: {
|
|
@@ -70,7 +79,12 @@ var Toast = ({
|
|
|
70
79
|
role: "alert",
|
|
71
80
|
"aria-live": "assertive",
|
|
72
81
|
"aria-atomic": "true",
|
|
73
|
-
className:
|
|
82
|
+
className: cn(
|
|
83
|
+
baseClasses,
|
|
84
|
+
positionClasses[position],
|
|
85
|
+
variantClasses,
|
|
86
|
+
className
|
|
87
|
+
),
|
|
74
88
|
...props,
|
|
75
89
|
children: [
|
|
76
90
|
/* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { className: "flex flex-row items-start gap-3", children: [
|
package/dist/Toast/index.js.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["../../src/components/Toast/Toast.tsx"],"sourcesContent":["import { HTMLAttributes } from 'react';\nimport { CheckCircle, WarningCircle, Info, X } from 'phosphor-react';\n\n/**\n * Lookup table for variant and action class combinations\n */\nconst VARIANT_ACTION_CLASSES = {\n solid: {\n warning:\n 'bg-warning text-warning-600 border-none focus-visible:outline-none',\n success:\n 'bg-success text-success-800 border-none focus-visible:outline-none',\n info: 'bg-info text-info-600 border-none focus-visible:outline-none',\n },\n outlined: {\n warning:\n 'bg-warning text-warning-600 border border-warning-300 focus-visible:outline-none',\n success:\n 'bg-success text-success-800 border border-success-200 focus-visible:outline-none',\n info: 'bg-info text-info-600 border border-info-600 focus-visible:outline-none',\n },\n} as const;\n\ntype ToastPosition =\n | 'top-left'\n | 'top-center'\n | 'top-right'\n | 'bottom-left'\n | 'bottom-center'\n | 'bottom-right'\n | 'default';\n\ntype ToastProps = {\n title: string;\n description?: string;\n onClose: () => void;\n /** Visual variant of the badge */\n variant?: 'solid' | 'outlined';\n /** Action type of the badge */\n action?: 'warning' | 'success' | 'info';\n position?: ToastPosition;\n} & HTMLAttributes<HTMLDivElement>;\n\nconst iconMap = {\n success: CheckCircle,\n info: Info,\n warning: WarningCircle,\n};\n\nconst Toast = ({\n variant = 'outlined',\n action = 'success',\n className = '',\n onClose,\n title,\n description,\n position = 'default',\n ...props\n}: ToastProps) => {\n // Get classes from lookup tables\n const variantClasses = VARIANT_ACTION_CLASSES[variant][action];\n\n const positionClasses: Record<ToastPosition, string> = {\n 'top-left': 'fixed top-4 left-4',\n 'top-center': 'fixed top-4 left-1/2 transform -translate-x-1/2',\n 'top-right': 'fixed top-4 right-4',\n 'bottom-left': 'fixed bottom-4 left-4',\n 'bottom-center': 'fixed bottom-4 left-1/2 transform -translate-x-1/2',\n 'bottom-right': 'fixed bottom-4 right-4',\n default: '',\n };\n\n const IconAction = iconMap[action] || iconMap['success'];\n\n const baseClasses =\n 'max-w-[390px] w-full flex flex-row items-start justify-between shadow-lg rounded-lg border p-4 gap-6 group';\n\n return (\n <div\n role=\"alert\"\n aria-live=\"assertive\"\n aria-atomic=\"true\"\n className={
|
|
1
|
+
{"version":3,"sources":["../../src/components/Toast/Toast.tsx","../../src/utils/utils.ts"],"sourcesContent":["import { HTMLAttributes } from 'react';\nimport { CheckCircle, WarningCircle, Info, X } from 'phosphor-react';\nimport { cn } from '../../utils/utils';\n\n/**\n * Lookup table for variant and action class combinations\n */\nconst VARIANT_ACTION_CLASSES = {\n solid: {\n warning:\n 'bg-warning text-warning-600 border-none focus-visible:outline-none',\n success:\n 'bg-success text-success-800 border-none focus-visible:outline-none',\n info: 'bg-info text-info-600 border-none focus-visible:outline-none',\n },\n outlined: {\n warning:\n 'bg-warning text-warning-600 border border-warning-300 focus-visible:outline-none',\n success:\n 'bg-success text-success-800 border border-success-200 focus-visible:outline-none',\n info: 'bg-info text-info-600 border border-info-600 focus-visible:outline-none',\n },\n} as const;\n\ntype ToastPosition =\n | 'top-left'\n | 'top-center'\n | 'top-right'\n | 'bottom-left'\n | 'bottom-center'\n | 'bottom-right'\n | 'default';\n\ntype ToastProps = {\n title: string;\n description?: string;\n onClose: () => void;\n /** Visual variant of the badge */\n variant?: 'solid' | 'outlined';\n /** Action type of the badge */\n action?: 'warning' | 'success' | 'info';\n position?: ToastPosition;\n} & HTMLAttributes<HTMLDivElement>;\n\nconst iconMap = {\n success: CheckCircle,\n info: Info,\n warning: WarningCircle,\n};\n\nconst Toast = ({\n variant = 'outlined',\n action = 'success',\n className = '',\n onClose,\n title,\n description,\n position = 'default',\n ...props\n}: ToastProps) => {\n // Get classes from lookup tables\n const variantClasses = VARIANT_ACTION_CLASSES[variant][action];\n\n const positionClasses: Record<ToastPosition, string> = {\n 'top-left': 'fixed top-4 left-4',\n 'top-center': 'fixed top-4 left-1/2 transform -translate-x-1/2',\n 'top-right': 'fixed top-4 right-4',\n 'bottom-left': 'fixed bottom-4 left-4',\n 'bottom-center': 'fixed bottom-4 left-1/2 transform -translate-x-1/2',\n 'bottom-right': 'fixed bottom-4 right-4',\n default: '',\n };\n\n const IconAction = iconMap[action] || iconMap['success'];\n\n const baseClasses =\n 'max-w-[390px] w-full flex flex-row items-start justify-between shadow-lg rounded-lg border p-4 gap-6 group';\n\n return (\n <div\n role=\"alert\"\n aria-live=\"assertive\"\n aria-atomic=\"true\"\n className={cn(\n baseClasses,\n positionClasses[position],\n variantClasses,\n className\n )}\n {...props}\n >\n <div className=\"flex flex-row items-start gap-3\">\n <span className=\"mt-1\" data-testid={`toast-icon-${action}`}>\n <IconAction />\n </span>\n <div className=\"flex flex-col items-start justify-start\">\n <p className=\"font-semibold text-md\">{title}</p>\n {description && (\n <p className=\"text-md text-text-900\">{description}</p>\n )}\n </div>\n </div>\n <button\n onClick={onClose}\n aria-label=\"Dismiss notification\"\n className=\"text-background-500 cursor-pointer opacity-0 group-hover:opacity-100 transition-opacity\"\n >\n <X />\n </button>\n </div>\n );\n};\n\nexport default Toast;\n","import { clsx, type ClassValue } from 'clsx';\nimport { twMerge } from 'tailwind-merge';\n\nexport function cn(...inputs: ClassValue[]) {\n return twMerge(clsx(inputs));\n}\n"],"mappings":";;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AACA,4BAAoD;;;ACDpD,kBAAsC;AACtC,4BAAwB;AAEjB,SAAS,MAAM,QAAsB;AAC1C,aAAO,mCAAQ,kBAAK,MAAM,CAAC;AAC7B;;;ADwFU;AAtFV,IAAM,yBAAyB;AAAA,EAC7B,OAAO;AAAA,IACL,SACE;AAAA,IACF,SACE;AAAA,IACF,MAAM;AAAA,EACR;AAAA,EACA,UAAU;AAAA,IACR,SACE;AAAA,IACF,SACE;AAAA,IACF,MAAM;AAAA,EACR;AACF;AAsBA,IAAM,UAAU;AAAA,EACd,SAAS;AAAA,EACT,MAAM;AAAA,EACN,SAAS;AACX;AAEA,IAAM,QAAQ,CAAC;AAAA,EACb,UAAU;AAAA,EACV,SAAS;AAAA,EACT,YAAY;AAAA,EACZ;AAAA,EACA;AAAA,EACA;AAAA,EACA,WAAW;AAAA,EACX,GAAG;AACL,MAAkB;AAEhB,QAAM,iBAAiB,uBAAuB,OAAO,EAAE,MAAM;AAE7D,QAAM,kBAAiD;AAAA,IACrD,YAAY;AAAA,IACZ,cAAc;AAAA,IACd,aAAa;AAAA,IACb,eAAe;AAAA,IACf,iBAAiB;AAAA,IACjB,gBAAgB;AAAA,IAChB,SAAS;AAAA,EACX;AAEA,QAAM,aAAa,QAAQ,MAAM,KAAK,QAAQ,SAAS;AAEvD,QAAM,cACJ;AAEF,SACE;AAAA,IAAC;AAAA;AAAA,MACC,MAAK;AAAA,MACL,aAAU;AAAA,MACV,eAAY;AAAA,MACZ,WAAW;AAAA,QACT;AAAA,QACA,gBAAgB,QAAQ;AAAA,QACxB;AAAA,QACA;AAAA,MACF;AAAA,MACC,GAAG;AAAA,MAEJ;AAAA,qDAAC,SAAI,WAAU,mCACb;AAAA,sDAAC,UAAK,WAAU,QAAO,eAAa,cAAc,MAAM,IACtD,sDAAC,cAAW,GACd;AAAA,UACA,6CAAC,SAAI,WAAU,2CACb;AAAA,wDAAC,OAAE,WAAU,yBAAyB,iBAAM;AAAA,YAC3C,eACC,4CAAC,OAAE,WAAU,yBAAyB,uBAAY;AAAA,aAEtD;AAAA,WACF;AAAA,QACA;AAAA,UAAC;AAAA;AAAA,YACC,SAAS;AAAA,YACT,cAAW;AAAA,YACX,WAAU;AAAA,YAEV,sDAAC,2BAAE;AAAA;AAAA,QACL;AAAA;AAAA;AAAA,EACF;AAEJ;AAEA,IAAO,gBAAQ;","names":[]}
|
package/dist/Toast/index.mjs
CHANGED
|
@@ -1,5 +1,14 @@
|
|
|
1
1
|
// src/components/Toast/Toast.tsx
|
|
2
2
|
import { CheckCircle, WarningCircle, Info, X } from "phosphor-react";
|
|
3
|
+
|
|
4
|
+
// src/utils/utils.ts
|
|
5
|
+
import { clsx } from "clsx";
|
|
6
|
+
import { twMerge } from "tailwind-merge";
|
|
7
|
+
function cn(...inputs) {
|
|
8
|
+
return twMerge(clsx(inputs));
|
|
9
|
+
}
|
|
10
|
+
|
|
11
|
+
// src/components/Toast/Toast.tsx
|
|
3
12
|
import { jsx, jsxs } from "react/jsx-runtime";
|
|
4
13
|
var VARIANT_ACTION_CLASSES = {
|
|
5
14
|
solid: {
|
|
@@ -46,7 +55,12 @@ var Toast = ({
|
|
|
46
55
|
role: "alert",
|
|
47
56
|
"aria-live": "assertive",
|
|
48
57
|
"aria-atomic": "true",
|
|
49
|
-
className:
|
|
58
|
+
className: cn(
|
|
59
|
+
baseClasses,
|
|
60
|
+
positionClasses[position],
|
|
61
|
+
variantClasses,
|
|
62
|
+
className
|
|
63
|
+
),
|
|
50
64
|
...props,
|
|
51
65
|
children: [
|
|
52
66
|
/* @__PURE__ */ jsxs("div", { className: "flex flex-row items-start gap-3", children: [
|
package/dist/Toast/index.mjs.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["../../src/components/Toast/Toast.tsx"],"sourcesContent":["import { HTMLAttributes } from 'react';\nimport { CheckCircle, WarningCircle, Info, X } from 'phosphor-react';\n\n/**\n * Lookup table for variant and action class combinations\n */\nconst VARIANT_ACTION_CLASSES = {\n solid: {\n warning:\n 'bg-warning text-warning-600 border-none focus-visible:outline-none',\n success:\n 'bg-success text-success-800 border-none focus-visible:outline-none',\n info: 'bg-info text-info-600 border-none focus-visible:outline-none',\n },\n outlined: {\n warning:\n 'bg-warning text-warning-600 border border-warning-300 focus-visible:outline-none',\n success:\n 'bg-success text-success-800 border border-success-200 focus-visible:outline-none',\n info: 'bg-info text-info-600 border border-info-600 focus-visible:outline-none',\n },\n} as const;\n\ntype ToastPosition =\n | 'top-left'\n | 'top-center'\n | 'top-right'\n | 'bottom-left'\n | 'bottom-center'\n | 'bottom-right'\n | 'default';\n\ntype ToastProps = {\n title: string;\n description?: string;\n onClose: () => void;\n /** Visual variant of the badge */\n variant?: 'solid' | 'outlined';\n /** Action type of the badge */\n action?: 'warning' | 'success' | 'info';\n position?: ToastPosition;\n} & HTMLAttributes<HTMLDivElement>;\n\nconst iconMap = {\n success: CheckCircle,\n info: Info,\n warning: WarningCircle,\n};\n\nconst Toast = ({\n variant = 'outlined',\n action = 'success',\n className = '',\n onClose,\n title,\n description,\n position = 'default',\n ...props\n}: ToastProps) => {\n // Get classes from lookup tables\n const variantClasses = VARIANT_ACTION_CLASSES[variant][action];\n\n const positionClasses: Record<ToastPosition, string> = {\n 'top-left': 'fixed top-4 left-4',\n 'top-center': 'fixed top-4 left-1/2 transform -translate-x-1/2',\n 'top-right': 'fixed top-4 right-4',\n 'bottom-left': 'fixed bottom-4 left-4',\n 'bottom-center': 'fixed bottom-4 left-1/2 transform -translate-x-1/2',\n 'bottom-right': 'fixed bottom-4 right-4',\n default: '',\n };\n\n const IconAction = iconMap[action] || iconMap['success'];\n\n const baseClasses =\n 'max-w-[390px] w-full flex flex-row items-start justify-between shadow-lg rounded-lg border p-4 gap-6 group';\n\n return (\n <div\n role=\"alert\"\n aria-live=\"assertive\"\n aria-atomic=\"true\"\n className={
|
|
1
|
+
{"version":3,"sources":["../../src/components/Toast/Toast.tsx","../../src/utils/utils.ts"],"sourcesContent":["import { HTMLAttributes } from 'react';\nimport { CheckCircle, WarningCircle, Info, X } from 'phosphor-react';\nimport { cn } from '../../utils/utils';\n\n/**\n * Lookup table for variant and action class combinations\n */\nconst VARIANT_ACTION_CLASSES = {\n solid: {\n warning:\n 'bg-warning text-warning-600 border-none focus-visible:outline-none',\n success:\n 'bg-success text-success-800 border-none focus-visible:outline-none',\n info: 'bg-info text-info-600 border-none focus-visible:outline-none',\n },\n outlined: {\n warning:\n 'bg-warning text-warning-600 border border-warning-300 focus-visible:outline-none',\n success:\n 'bg-success text-success-800 border border-success-200 focus-visible:outline-none',\n info: 'bg-info text-info-600 border border-info-600 focus-visible:outline-none',\n },\n} as const;\n\ntype ToastPosition =\n | 'top-left'\n | 'top-center'\n | 'top-right'\n | 'bottom-left'\n | 'bottom-center'\n | 'bottom-right'\n | 'default';\n\ntype ToastProps = {\n title: string;\n description?: string;\n onClose: () => void;\n /** Visual variant of the badge */\n variant?: 'solid' | 'outlined';\n /** Action type of the badge */\n action?: 'warning' | 'success' | 'info';\n position?: ToastPosition;\n} & HTMLAttributes<HTMLDivElement>;\n\nconst iconMap = {\n success: CheckCircle,\n info: Info,\n warning: WarningCircle,\n};\n\nconst Toast = ({\n variant = 'outlined',\n action = 'success',\n className = '',\n onClose,\n title,\n description,\n position = 'default',\n ...props\n}: ToastProps) => {\n // Get classes from lookup tables\n const variantClasses = VARIANT_ACTION_CLASSES[variant][action];\n\n const positionClasses: Record<ToastPosition, string> = {\n 'top-left': 'fixed top-4 left-4',\n 'top-center': 'fixed top-4 left-1/2 transform -translate-x-1/2',\n 'top-right': 'fixed top-4 right-4',\n 'bottom-left': 'fixed bottom-4 left-4',\n 'bottom-center': 'fixed bottom-4 left-1/2 transform -translate-x-1/2',\n 'bottom-right': 'fixed bottom-4 right-4',\n default: '',\n };\n\n const IconAction = iconMap[action] || iconMap['success'];\n\n const baseClasses =\n 'max-w-[390px] w-full flex flex-row items-start justify-between shadow-lg rounded-lg border p-4 gap-6 group';\n\n return (\n <div\n role=\"alert\"\n aria-live=\"assertive\"\n aria-atomic=\"true\"\n className={cn(\n baseClasses,\n positionClasses[position],\n variantClasses,\n className\n )}\n {...props}\n >\n <div className=\"flex flex-row items-start gap-3\">\n <span className=\"mt-1\" data-testid={`toast-icon-${action}`}>\n <IconAction />\n </span>\n <div className=\"flex flex-col items-start justify-start\">\n <p className=\"font-semibold text-md\">{title}</p>\n {description && (\n <p className=\"text-md text-text-900\">{description}</p>\n )}\n </div>\n </div>\n <button\n onClick={onClose}\n aria-label=\"Dismiss notification\"\n className=\"text-background-500 cursor-pointer opacity-0 group-hover:opacity-100 transition-opacity\"\n >\n <X />\n </button>\n </div>\n );\n};\n\nexport default Toast;\n","import { clsx, type ClassValue } from 'clsx';\nimport { twMerge } from 'tailwind-merge';\n\nexport function cn(...inputs: ClassValue[]) {\n return twMerge(clsx(inputs));\n}\n"],"mappings":";AACA,SAAS,aAAa,eAAe,MAAM,SAAS;;;ACDpD,SAAS,YAA6B;AACtC,SAAS,eAAe;AAEjB,SAAS,MAAM,QAAsB;AAC1C,SAAO,QAAQ,KAAK,MAAM,CAAC;AAC7B;;;ADwFU,cAEF,YAFE;AAtFV,IAAM,yBAAyB;AAAA,EAC7B,OAAO;AAAA,IACL,SACE;AAAA,IACF,SACE;AAAA,IACF,MAAM;AAAA,EACR;AAAA,EACA,UAAU;AAAA,IACR,SACE;AAAA,IACF,SACE;AAAA,IACF,MAAM;AAAA,EACR;AACF;AAsBA,IAAM,UAAU;AAAA,EACd,SAAS;AAAA,EACT,MAAM;AAAA,EACN,SAAS;AACX;AAEA,IAAM,QAAQ,CAAC;AAAA,EACb,UAAU;AAAA,EACV,SAAS;AAAA,EACT,YAAY;AAAA,EACZ;AAAA,EACA;AAAA,EACA;AAAA,EACA,WAAW;AAAA,EACX,GAAG;AACL,MAAkB;AAEhB,QAAM,iBAAiB,uBAAuB,OAAO,EAAE,MAAM;AAE7D,QAAM,kBAAiD;AAAA,IACrD,YAAY;AAAA,IACZ,cAAc;AAAA,IACd,aAAa;AAAA,IACb,eAAe;AAAA,IACf,iBAAiB;AAAA,IACjB,gBAAgB;AAAA,IAChB,SAAS;AAAA,EACX;AAEA,QAAM,aAAa,QAAQ,MAAM,KAAK,QAAQ,SAAS;AAEvD,QAAM,cACJ;AAEF,SACE;AAAA,IAAC;AAAA;AAAA,MACC,MAAK;AAAA,MACL,aAAU;AAAA,MACV,eAAY;AAAA,MACZ,WAAW;AAAA,QACT;AAAA,QACA,gBAAgB,QAAQ;AAAA,QACxB;AAAA,QACA;AAAA,MACF;AAAA,MACC,GAAG;AAAA,MAEJ;AAAA,6BAAC,SAAI,WAAU,mCACb;AAAA,8BAAC,UAAK,WAAU,QAAO,eAAa,cAAc,MAAM,IACtD,8BAAC,cAAW,GACd;AAAA,UACA,qBAAC,SAAI,WAAU,2CACb;AAAA,gCAAC,OAAE,WAAU,yBAAyB,iBAAM;AAAA,YAC3C,eACC,oBAAC,OAAE,WAAU,yBAAyB,uBAAY;AAAA,aAEtD;AAAA,WACF;AAAA,QACA;AAAA,UAAC;AAAA;AAAA,YACC,SAAS;AAAA,YACT,cAAW;AAAA,YACX,WAAU;AAAA,YAEV,8BAAC,KAAE;AAAA;AAAA,QACL;AAAA;AAAA;AAAA,EACF;AAEJ;AAEA,IAAO,gBAAQ;","names":[]}
|
package/dist/index.css
CHANGED
|
@@ -1901,8 +1901,8 @@
|
|
|
1901
1901
|
.border-warning-950 {
|
|
1902
1902
|
border-color: var(--color-warning-950);
|
|
1903
1903
|
}
|
|
1904
|
-
.border-b-
|
|
1905
|
-
border-bottom-color: var(--color-
|
|
1904
|
+
.border-b-primary-200 {
|
|
1905
|
+
border-bottom-color: var(--color-primary-200);
|
|
1906
1906
|
}
|
|
1907
1907
|
.\!bg-primary-50 {
|
|
1908
1908
|
background-color: var(--color-primary-50) !important;
|
|
@@ -2439,6 +2439,9 @@
|
|
|
2439
2439
|
.p-3 {
|
|
2440
2440
|
padding: calc(var(--spacing) * 3);
|
|
2441
2441
|
}
|
|
2442
|
+
.p-3\.5 {
|
|
2443
|
+
padding: calc(var(--spacing) * 3.5);
|
|
2444
|
+
}
|
|
2442
2445
|
.p-4 {
|
|
2443
2446
|
padding: calc(var(--spacing) * 4);
|
|
2444
2447
|
}
|
|
@@ -2541,6 +2544,9 @@
|
|
|
2541
2544
|
.pb-\[80px\] {
|
|
2542
2545
|
padding-bottom: 80px;
|
|
2543
2546
|
}
|
|
2547
|
+
.pb-\[150px\] {
|
|
2548
|
+
padding-bottom: 150px;
|
|
2549
|
+
}
|
|
2544
2550
|
.pl-8 {
|
|
2545
2551
|
padding-left: calc(var(--spacing) * 8);
|
|
2546
2552
|
}
|
|
@@ -2611,9 +2617,6 @@
|
|
|
2611
2617
|
font-size: var(--text-xs);
|
|
2612
2618
|
line-height: var(--tw-leading, var(--text-xs--line-height));
|
|
2613
2619
|
}
|
|
2614
|
-
.text-\[8px\] {
|
|
2615
|
-
font-size: 8px;
|
|
2616
|
-
}
|
|
2617
2620
|
.leading-4 {
|
|
2618
2621
|
--tw-leading: calc(var(--spacing) * 4);
|
|
2619
2622
|
line-height: calc(var(--spacing) * 4);
|
|
@@ -2626,10 +2629,6 @@
|
|
|
2626
2629
|
--tw-leading: calc(var(--spacing) * 7);
|
|
2627
2630
|
line-height: calc(var(--spacing) * 7);
|
|
2628
2631
|
}
|
|
2629
|
-
.leading-\[9px\] {
|
|
2630
|
-
--tw-leading: 9px;
|
|
2631
|
-
line-height: 9px;
|
|
2632
|
-
}
|
|
2633
2632
|
.leading-\[14px\] {
|
|
2634
2633
|
--tw-leading: 14px;
|
|
2635
2634
|
line-height: 14px;
|