analytica-frontend-lib 1.0.84 → 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.js +300 -111
- package/dist/Quiz/index.js.map +1 -1
- package/dist/Quiz/index.mjs +300 -111
- package/dist/Quiz/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 +5 -12
- package/dist/index.css.map +1 -1
- package/dist/index.js +452 -223
- package/dist/index.js.map +1 -1
- package/dist/index.mjs +452 -223
- package/dist/index.mjs.map +1 -1
- package/dist/styles.css +5 -12
- 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;
|
|
@@ -2523,9 +2523,6 @@
|
|
|
2523
2523
|
.pr-10 {
|
|
2524
2524
|
padding-right: calc(var(--spacing) * 10);
|
|
2525
2525
|
}
|
|
2526
|
-
.\!pb-\[150px\] {
|
|
2527
|
-
padding-bottom: 150px !important;
|
|
2528
|
-
}
|
|
2529
2526
|
.pb-2 {
|
|
2530
2527
|
padding-bottom: calc(var(--spacing) * 2);
|
|
2531
2528
|
}
|
|
@@ -2547,6 +2544,9 @@
|
|
|
2547
2544
|
.pb-\[80px\] {
|
|
2548
2545
|
padding-bottom: 80px;
|
|
2549
2546
|
}
|
|
2547
|
+
.pb-\[150px\] {
|
|
2548
|
+
padding-bottom: 150px;
|
|
2549
|
+
}
|
|
2550
2550
|
.pl-8 {
|
|
2551
2551
|
padding-left: calc(var(--spacing) * 8);
|
|
2552
2552
|
}
|
|
@@ -2617,9 +2617,6 @@
|
|
|
2617
2617
|
font-size: var(--text-xs);
|
|
2618
2618
|
line-height: var(--tw-leading, var(--text-xs--line-height));
|
|
2619
2619
|
}
|
|
2620
|
-
.text-\[8px\] {
|
|
2621
|
-
font-size: 8px;
|
|
2622
|
-
}
|
|
2623
2620
|
.leading-4 {
|
|
2624
2621
|
--tw-leading: calc(var(--spacing) * 4);
|
|
2625
2622
|
line-height: calc(var(--spacing) * 4);
|
|
@@ -2632,10 +2629,6 @@
|
|
|
2632
2629
|
--tw-leading: calc(var(--spacing) * 7);
|
|
2633
2630
|
line-height: calc(var(--spacing) * 7);
|
|
2634
2631
|
}
|
|
2635
|
-
.leading-\[9px\] {
|
|
2636
|
-
--tw-leading: 9px;
|
|
2637
|
-
line-height: 9px;
|
|
2638
|
-
}
|
|
2639
2632
|
.leading-\[14px\] {
|
|
2640
2633
|
--tw-leading: 14px;
|
|
2641
2634
|
line-height: 14px;
|