@veeqo/ui 15.3.1-beta-4 → 15.3.1
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/components/Popover/Popover.cjs +1 -11
- package/dist/components/Popover/Popover.cjs.map +1 -1
- package/dist/components/Popover/Popover.js +2 -12
- package/dist/components/Popover/Popover.js.map +1 -1
- package/dist/components/ToastsLayout/components/Toast.module.scss.cjs +2 -2
- package/dist/components/ToastsLayout/components/Toast.module.scss.cjs.map +1 -1
- package/dist/components/ToastsLayout/components/Toast.module.scss.js +2 -2
- package/dist/components/ToastsLayout/components/Toast.module.scss.js.map +1 -1
- package/package.json +2 -2
|
@@ -20,17 +20,7 @@ const Popover = ({ id: passedId, children, zIndex = index.theme.layers.popup, pl
|
|
|
20
20
|
const { refs, floatingStyles, placement: resolvedPlacement } = react.useFloating({
|
|
21
21
|
elements: { reference: anchorElement },
|
|
22
22
|
placement,
|
|
23
|
-
middleware: [
|
|
24
|
-
react.flip({ fallbackAxisSideDirection: 'start' }),
|
|
25
|
-
react.shift({ limiter: react.limitShift() }),
|
|
26
|
-
react.size({
|
|
27
|
-
apply({ availableHeight, elements }) {
|
|
28
|
-
Object.assign(elements.floating.style, {
|
|
29
|
-
maxHeight: `${Math.max(0, availableHeight)}px`,
|
|
30
|
-
});
|
|
31
|
-
},
|
|
32
|
-
}),
|
|
33
|
-
],
|
|
23
|
+
middleware: [react.flip(), react.shift({ limiter: react.limitShift() })],
|
|
34
24
|
whileElementsMounted: react.autoUpdate,
|
|
35
25
|
});
|
|
36
26
|
// Setup popover id to use passed, or generate its' own.
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Popover.cjs","sources":["../../../src/components/Popover/Popover.tsx"],"sourcesContent":["import React, { useMemo } from 'react';\nimport { useFloating, autoUpdate, flip, shift, limitShift
|
|
1
|
+
{"version":3,"file":"Popover.cjs","sources":["../../../src/components/Popover/Popover.tsx"],"sourcesContent":["import React, { useMemo } from 'react';\nimport { useFloating, autoUpdate, flip, shift, limitShift } from '@floating-ui/react';\n\nimport { Portal } from '../Portal';\nimport { theme } from '../../theme';\nimport { buildClassnames, generateId, assignCssVars } from '../../utils';\nimport { useUpdateAriaAnchor } from './hooks/useUpdateAriaAnchor';\nimport { PopoverProps } from './types';\nimport { useHandleFocus } from './hooks/useHandleFocus';\nimport popoverStyles from './Popover.module.scss';\n\nexport const Popover = ({\n id: passedId,\n children,\n zIndex = theme.layers.popup,\n placement = 'bottom',\n anchorElement,\n rootElementRef,\n onShouldClose,\n style,\n disableFocusLock,\n removeBackdrop = false,\n useAnchorWidth,\n ignoreAriaWarnings,\n className,\n ...dialogProps\n}: PopoverProps) => {\n // Set up Floating UI positioning\n const { refs, floatingStyles, placement: resolvedPlacement } = useFloating({\n elements: { reference: anchorElement },\n placement,\n middleware: [flip(), shift({ limiter: limitShift() })],\n whileElementsMounted: autoUpdate,\n });\n\n // Setup popover id to use passed, or generate its' own.\n const id = useMemo(() => passedId || generateId('popover'), [passedId]);\n\n // Check and update aria for anchor, only works once this has rendered for the first time though.\n useUpdateAriaAnchor({ anchorElement, popoverId: id, ignoreAriaWarnings });\n\n const onClose = () => {\n anchorElement?.focus();\n onShouldClose?.();\n };\n\n const { handleKeyDown } = useHandleFocus({\n popperElement: refs.floating.current as HTMLDialogElement | null,\n anchorElement,\n onClose,\n disableFocusLock,\n });\n\n return (\n <Portal rootElementRef={rootElementRef}>\n {!removeBackdrop && (\n <div\n className={popoverStyles.backdrop}\n style={assignCssVars({ zIndex })}\n onClick={onClose}\n data-testid=\"popover-backdrop\"\n />\n )}\n <dialog\n open\n id={id}\n data-dialog-type=\"popover\"\n data-placement={resolvedPlacement}\n className={buildClassnames([popoverStyles.dialog, className])}\n ref={refs.setFloating}\n style={{\n ...assignCssVars({ zIndex: zIndex + 1 }),\n ...floatingStyles,\n ...style,\n ...(useAnchorWidth ? { minWidth: anchorElement?.clientWidth } : {}),\n }}\n onKeyDown={handleKeyDown}\n {...dialogProps}\n >\n {children}\n </dialog>\n </Portal>\n );\n};\n"],"names":["theme","useFloating","flip","shift","limitShift","autoUpdate","useMemo","generateId","useUpdateAriaAnchor","useHandleFocus","React","Portal","popoverStyles","assignCssVars","buildClassnames"],"mappings":";;;;;;;;;;;;;;;;;MAWa,OAAO,GAAG,CAAC,EACtB,EAAE,EAAE,QAAQ,EACZ,QAAQ,EACR,MAAM,GAAGA,WAAK,CAAC,MAAM,CAAC,KAAK,EAC3B,SAAS,GAAG,QAAQ,EACpB,aAAa,EACb,cAAc,EACd,aAAa,EACb,KAAK,EACL,gBAAgB,EAChB,cAAc,GAAG,KAAK,EACtB,cAAc,EACd,kBAAkB,EAClB,SAAS,EACT,GAAG,WAAW,EACD,KAAI;;IAEjB,MAAM,EAAE,IAAI,EAAE,cAAc,EAAE,SAAS,EAAE,iBAAiB,EAAE,GAAGC,iBAAW,CAAC;AACzE,QAAA,QAAQ,EAAE,EAAE,SAAS,EAAE,aAAa,EAAE;QACtC,SAAS;AACT,QAAA,UAAU,EAAE,CAACC,UAAI,EAAE,EAAEC,WAAK,CAAC,EAAE,OAAO,EAAEC,gBAAU,EAAE,EAAE,CAAC,CAAC;AACtD,QAAA,oBAAoB,EAAEC,gBAAU;AACjC,KAAA,CAAC;;AAGF,IAAA,MAAM,EAAE,GAAGC,aAAO,CAAC,MAAM,QAAQ,IAAIC,qBAAU,CAAC,SAAS,CAAC,EAAE,CAAC,QAAQ,CAAC,CAAC;;IAGvEC,uCAAmB,CAAC,EAAE,aAAa,EAAE,SAAS,EAAE,EAAE,EAAE,kBAAkB,EAAE,CAAC;IAEzE,MAAM,OAAO,GAAG,MAAK;AACnB,QAAA,aAAa,aAAb,aAAa,KAAA,MAAA,GAAA,MAAA,GAAb,aAAa,CAAE,KAAK,EAAE;AACtB,QAAA,aAAa,KAAA,IAAA,IAAb,aAAa,KAAA,MAAA,GAAA,MAAA,GAAb,aAAa,EAAI;AACnB,IAAA,CAAC;AAED,IAAA,MAAM,EAAE,aAAa,EAAE,GAAGC,6BAAc,CAAC;AACvC,QAAA,aAAa,EAAE,IAAI,CAAC,QAAQ,CAAC,OAAmC;QAChE,aAAa;QACb,OAAO;QACP,gBAAgB;AACjB,KAAA,CAAC;AAEF,IAAA,QACEC,sBAAA,CAAA,aAAA,CAACC,aAAM,EAAA,EAAC,cAAc,EAAE,cAAc,EAAA;QACnC,CAAC,cAAc,KACdD,sBAAA,CAAA,aAAA,CAAA,KAAA,EAAA,EACE,SAAS,EAAEE,cAAa,CAAC,QAAQ,EACjC,KAAK,EAAEC,2BAAa,CAAC,EAAE,MAAM,EAAE,CAAC,EAChC,OAAO,EAAE,OAAO,EAAA,aAAA,EACJ,kBAAkB,EAAA,CAC9B,CACH;AACD,QAAAH,sBAAA,CAAA,aAAA,CAAA,QAAA,EAAA,EACE,IAAI,EAAA,IAAA,EACJ,EAAE,EAAE,EAAE,EAAA,kBAAA,EACW,SAAS,EAAA,gBAAA,EACV,iBAAiB,EACjC,SAAS,EAAEI,+BAAe,CAAC,CAACF,cAAa,CAAC,MAAM,EAAE,SAAS,CAAC,CAAC,EAC7D,GAAG,EAAE,IAAI,CAAC,WAAW,EACrB,KAAK,EAAE;gBACL,GAAGC,2BAAa,CAAC,EAAE,MAAM,EAAE,MAAM,GAAG,CAAC,EAAE,CAAC;AACxC,gBAAA,GAAG,cAAc;AACjB,gBAAA,GAAG,KAAK;gBACR,IAAI,cAAc,GAAG,EAAE,QAAQ,EAAE,aAAa,KAAA,IAAA,IAAb,aAAa,KAAA,MAAA,GAAA,MAAA,GAAb,aAAa,CAAE,WAAW,EAAE,GAAG,EAAE,CAAC;aACpE,EACD,SAAS,EAAE,aAAa,EAAA,GACpB,WAAW,IAEd,QAAQ,CACF,CACF;AAEb;;;;"}
|
|
@@ -1,5 +1,5 @@
|
|
|
1
1
|
import React__default, { useMemo } from 'react';
|
|
2
|
-
import { useFloating, autoUpdate, flip, shift, limitShift
|
|
2
|
+
import { useFloating, autoUpdate, flip, shift, limitShift } from '@floating-ui/react';
|
|
3
3
|
import { Portal } from '../Portal/Portal.js';
|
|
4
4
|
import { theme } from '../../theme/index.js';
|
|
5
5
|
import { buildClassnames } from '../../utils/buildClassnames.js';
|
|
@@ -14,17 +14,7 @@ const Popover = ({ id: passedId, children, zIndex = theme.layers.popup, placemen
|
|
|
14
14
|
const { refs, floatingStyles, placement: resolvedPlacement } = useFloating({
|
|
15
15
|
elements: { reference: anchorElement },
|
|
16
16
|
placement,
|
|
17
|
-
middleware: [
|
|
18
|
-
flip({ fallbackAxisSideDirection: 'start' }),
|
|
19
|
-
shift({ limiter: limitShift() }),
|
|
20
|
-
size({
|
|
21
|
-
apply({ availableHeight, elements }) {
|
|
22
|
-
Object.assign(elements.floating.style, {
|
|
23
|
-
maxHeight: `${Math.max(0, availableHeight)}px`,
|
|
24
|
-
});
|
|
25
|
-
},
|
|
26
|
-
}),
|
|
27
|
-
],
|
|
17
|
+
middleware: [flip(), shift({ limiter: limitShift() })],
|
|
28
18
|
whileElementsMounted: autoUpdate,
|
|
29
19
|
});
|
|
30
20
|
// Setup popover id to use passed, or generate its' own.
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Popover.js","sources":["../../../src/components/Popover/Popover.tsx"],"sourcesContent":["import React, { useMemo } from 'react';\nimport { useFloating, autoUpdate, flip, shift, limitShift
|
|
1
|
+
{"version":3,"file":"Popover.js","sources":["../../../src/components/Popover/Popover.tsx"],"sourcesContent":["import React, { useMemo } from 'react';\nimport { useFloating, autoUpdate, flip, shift, limitShift } from '@floating-ui/react';\n\nimport { Portal } from '../Portal';\nimport { theme } from '../../theme';\nimport { buildClassnames, generateId, assignCssVars } from '../../utils';\nimport { useUpdateAriaAnchor } from './hooks/useUpdateAriaAnchor';\nimport { PopoverProps } from './types';\nimport { useHandleFocus } from './hooks/useHandleFocus';\nimport popoverStyles from './Popover.module.scss';\n\nexport const Popover = ({\n id: passedId,\n children,\n zIndex = theme.layers.popup,\n placement = 'bottom',\n anchorElement,\n rootElementRef,\n onShouldClose,\n style,\n disableFocusLock,\n removeBackdrop = false,\n useAnchorWidth,\n ignoreAriaWarnings,\n className,\n ...dialogProps\n}: PopoverProps) => {\n // Set up Floating UI positioning\n const { refs, floatingStyles, placement: resolvedPlacement } = useFloating({\n elements: { reference: anchorElement },\n placement,\n middleware: [flip(), shift({ limiter: limitShift() })],\n whileElementsMounted: autoUpdate,\n });\n\n // Setup popover id to use passed, or generate its' own.\n const id = useMemo(() => passedId || generateId('popover'), [passedId]);\n\n // Check and update aria for anchor, only works once this has rendered for the first time though.\n useUpdateAriaAnchor({ anchorElement, popoverId: id, ignoreAriaWarnings });\n\n const onClose = () => {\n anchorElement?.focus();\n onShouldClose?.();\n };\n\n const { handleKeyDown } = useHandleFocus({\n popperElement: refs.floating.current as HTMLDialogElement | null,\n anchorElement,\n onClose,\n disableFocusLock,\n });\n\n return (\n <Portal rootElementRef={rootElementRef}>\n {!removeBackdrop && (\n <div\n className={popoverStyles.backdrop}\n style={assignCssVars({ zIndex })}\n onClick={onClose}\n data-testid=\"popover-backdrop\"\n />\n )}\n <dialog\n open\n id={id}\n data-dialog-type=\"popover\"\n data-placement={resolvedPlacement}\n className={buildClassnames([popoverStyles.dialog, className])}\n ref={refs.setFloating}\n style={{\n ...assignCssVars({ zIndex: zIndex + 1 }),\n ...floatingStyles,\n ...style,\n ...(useAnchorWidth ? { minWidth: anchorElement?.clientWidth } : {}),\n }}\n onKeyDown={handleKeyDown}\n {...dialogProps}\n >\n {children}\n </dialog>\n </Portal>\n );\n};\n"],"names":["React"],"mappings":";;;;;;;;;;;MAWa,OAAO,GAAG,CAAC,EACtB,EAAE,EAAE,QAAQ,EACZ,QAAQ,EACR,MAAM,GAAG,KAAK,CAAC,MAAM,CAAC,KAAK,EAC3B,SAAS,GAAG,QAAQ,EACpB,aAAa,EACb,cAAc,EACd,aAAa,EACb,KAAK,EACL,gBAAgB,EAChB,cAAc,GAAG,KAAK,EACtB,cAAc,EACd,kBAAkB,EAClB,SAAS,EACT,GAAG,WAAW,EACD,KAAI;;IAEjB,MAAM,EAAE,IAAI,EAAE,cAAc,EAAE,SAAS,EAAE,iBAAiB,EAAE,GAAG,WAAW,CAAC;AACzE,QAAA,QAAQ,EAAE,EAAE,SAAS,EAAE,aAAa,EAAE;QACtC,SAAS;AACT,QAAA,UAAU,EAAE,CAAC,IAAI,EAAE,EAAE,KAAK,CAAC,EAAE,OAAO,EAAE,UAAU,EAAE,EAAE,CAAC,CAAC;AACtD,QAAA,oBAAoB,EAAE,UAAU;AACjC,KAAA,CAAC;;AAGF,IAAA,MAAM,EAAE,GAAG,OAAO,CAAC,MAAM,QAAQ,IAAI,UAAU,CAAC,SAAS,CAAC,EAAE,CAAC,QAAQ,CAAC,CAAC;;IAGvE,mBAAmB,CAAC,EAAE,aAAa,EAAE,SAAS,EAAE,EAAE,EAAE,kBAAkB,EAAE,CAAC;IAEzE,MAAM,OAAO,GAAG,MAAK;AACnB,QAAA,aAAa,aAAb,aAAa,KAAA,MAAA,GAAA,MAAA,GAAb,aAAa,CAAE,KAAK,EAAE;AACtB,QAAA,aAAa,KAAA,IAAA,IAAb,aAAa,KAAA,MAAA,GAAA,MAAA,GAAb,aAAa,EAAI;AACnB,IAAA,CAAC;AAED,IAAA,MAAM,EAAE,aAAa,EAAE,GAAG,cAAc,CAAC;AACvC,QAAA,aAAa,EAAE,IAAI,CAAC,QAAQ,CAAC,OAAmC;QAChE,aAAa;QACb,OAAO;QACP,gBAAgB;AACjB,KAAA,CAAC;AAEF,IAAA,QACEA,cAAA,CAAA,aAAA,CAAC,MAAM,EAAA,EAAC,cAAc,EAAE,cAAc,EAAA;QACnC,CAAC,cAAc,KACdA,cAAA,CAAA,aAAA,CAAA,KAAA,EAAA,EACE,SAAS,EAAE,aAAa,CAAC,QAAQ,EACjC,KAAK,EAAE,aAAa,CAAC,EAAE,MAAM,EAAE,CAAC,EAChC,OAAO,EAAE,OAAO,EAAA,aAAA,EACJ,kBAAkB,EAAA,CAC9B,CACH;AACD,QAAAA,cAAA,CAAA,aAAA,CAAA,QAAA,EAAA,EACE,IAAI,EAAA,IAAA,EACJ,EAAE,EAAE,EAAE,EAAA,kBAAA,EACW,SAAS,EAAA,gBAAA,EACV,iBAAiB,EACjC,SAAS,EAAE,eAAe,CAAC,CAAC,aAAa,CAAC,MAAM,EAAE,SAAS,CAAC,CAAC,EAC7D,GAAG,EAAE,IAAI,CAAC,WAAW,EACrB,KAAK,EAAE;gBACL,GAAG,aAAa,CAAC,EAAE,MAAM,EAAE,MAAM,GAAG,CAAC,EAAE,CAAC;AACxC,gBAAA,GAAG,cAAc;AACjB,gBAAA,GAAG,KAAK;gBACR,IAAI,cAAc,GAAG,EAAE,QAAQ,EAAE,aAAa,KAAA,IAAA,IAAb,aAAa,KAAA,MAAA,GAAA,MAAA,GAAb,aAAa,CAAE,WAAW,EAAE,GAAG,EAAE,CAAC;aACpE,EACD,SAAS,EAAE,aAAa,EAAA,GACpB,WAAW,IAEd,QAAQ,CACF,CACF;AAEb;;;;"}
|
|
@@ -2,8 +2,8 @@
|
|
|
2
2
|
|
|
3
3
|
var ___$insertStyle = require('../../../_virtual/____insertStyle.cjs');
|
|
4
4
|
|
|
5
|
-
___$insertStyle("@charset \"UTF-8\";\n._toast-
|
|
6
|
-
var toastStyles = {"toast-container":"_toast-
|
|
5
|
+
___$insertStyle("@charset \"UTF-8\";\n._toast-container_10po3_2 {\n --toast-local-z-index: 40;\n background-color: var(--colors-neutral-ink-dark);\n padding: var(--sizes-3);\n box-shadow: var(--shadows-md);\n border-radius: var(--radius-base);\n pointer-events: auto;\n z-index: var(--toast-local-z-index);\n min-width: min(var(--min-width, 50vw), 80vw);\n max-width: 80vw;\n transition: transform 500ms ease, opacity 500ms ease;\n}\n._toast-container_10po3_2._merge-variant_10po3_14 {\n --variant-color: var(--colors-secondary-purple-base);\n}\n._toast-container_10po3_2._info-variant_10po3_17 {\n --variant-color: var(--colors-secondary-blue-base);\n}\n._toast-container_10po3_2._error-variant_10po3_20 {\n --variant-color: var(--colors-secondary-red-base);\n}\n._toast-container_10po3_2._success-variant_10po3_23 {\n --variant-color: var(--colors-secondary-green-base);\n}\n\n/* Transition classes — co-located with .last so compound selectors hash correctly */\n._enter_10po3_28 {\n transform: translateY(var(--sizes-3));\n opacity: 0;\n}\n\n._enterActive_10po3_33 {\n transform: translateY(0);\n opacity: 1;\n}\n\n._exit_10po3_38 {\n transform: translateX(0);\n opacity: 1;\n}\n\n/*\n * .last modifier — applied to the bottom-most (oldest visible) toast.\n * Non-last toasts exit by sliding right (translateX) so the stack above\n * them collapses gracefully into the freed space. The last toast exits\n * by sliding down (translateY) off the bottom of the viewport since\n * there's nothing below it to displace.\n */\n._last_10po3_27._exit_10po3_38 {\n transform: translateY(0);\n opacity: 1;\n}\n\n._exitActive_10po3_55 {\n transform: translateX(var(--sizes-3));\n opacity: 0;\n}\n\n._last_10po3_27._exitActive_10po3_55 {\n transform: translateY(var(--sizes-3));\n opacity: 0;\n}\n\n._icon-wrap_10po3_65 {\n flex-shrink: 0;\n height: var(--sizes-10);\n width: var(--sizes-10);\n color: white;\n border-radius: var(--radius-base);\n background-color: var(--variant-color);\n}\n._icon-wrap_10po3_65 svg {\n width: var(--sizes-md);\n height: var(--sizes-md);\n}\n\n._text_10po3_78 {\n color: white;\n}\n\n._closeAction_10po3_82 {\n padding-left: var(--sizes-md);\n}\n._closeAction_10po3_82 svg {\n width: var(--sizes-md);\n height: var(--sizes-md);\n}\n\n._toast-container_10po3_2 ._closeAction_10po3_82._closeAction_10po3_82:hover,\n._toast-container_10po3_2 ._closeAction_10po3_82._closeAction_10po3_82:active,\n._toast-container_10po3_2 ._closeAction_10po3_82._closeAction_10po3_82:focus-visible {\n background-color: color-mix(in srgb, white 15%, var(--colors-neutral-ink-dark));\n}");
|
|
6
|
+
var toastStyles = {"toast-container":"_toast-container_10po3_2","merge-variant":"_merge-variant_10po3_14","info-variant":"_info-variant_10po3_17","error-variant":"_error-variant_10po3_20","success-variant":"_success-variant_10po3_23","enter":"_enter_10po3_28","enterActive":"_enterActive_10po3_33","exit":"_exit_10po3_38","last":"_last_10po3_27","exitActive":"_exitActive_10po3_55","icon-wrap":"_icon-wrap_10po3_65","text":"_text_10po3_78","closeAction":"_closeAction_10po3_82"};
|
|
7
7
|
|
|
8
8
|
module.exports = toastStyles;
|
|
9
9
|
//# sourceMappingURL=Toast.module.scss.cjs.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Toast.module.scss.cjs","sources":["../../../../src/components/ToastsLayout/components/Toast.module.scss"],"sourcesContent":[".toast-container {\n --toast-local-z-index: 40;\n\n background-color: var(--colors-neutral-ink-dark);\n padding: var(--sizes-3);\n box-shadow: var(--shadows-md);\n border-radius: var(--radius-base);\n pointer-events: auto;\n z-index: var(--toast-local-z-index);\n min-width: min(var(--min-width, 50vw), 80vw);\n max-width: 80vw;\n transition:\n transform 500ms ease,\n opacity 500ms ease;\n\n &.merge-variant {\n --variant-color: var(--colors-secondary-purple-base);\n }\n &.info-variant {\n --variant-color: var(--colors-secondary-blue-base);\n }\n &.error-variant {\n --variant-color: var(--colors-secondary-red-base);\n }\n &.success-variant {\n --variant-color: var(--colors-secondary-green-base);\n }\n}\n\n/* Transition classes — co-located with .last so compound selectors hash correctly */\n.enter {\n transform: translateY(var(--sizes-3));\n opacity: 0;\n}\n\n.enterActive {\n transform: translateY(0);\n opacity: 1;\n}\n\n.exit {\n transform: translateX(0);\n opacity: 1;\n}\n\n/*\n * .last modifier — applied to the bottom-most (oldest visible) toast.\n * Non-last toasts exit by sliding right (translateX) so the stack above\n * them collapses gracefully into the freed space. The last toast exits\n * by sliding down (translateY) off the bottom of the viewport since\n * there's nothing below it to displace.\n */\n.last.exit {\n transform: translateY(0);\n opacity: 1;\n}\n\n.exitActive {\n transform: translateX(var(--sizes-3));\n opacity: 0;\n}\n\n.last.exitActive {\n transform: translateY(var(--sizes-3));\n opacity: 0;\n}\n\n.icon-wrap {\n flex-shrink: 0;\n height: var(--sizes-10);\n width: var(--sizes-10);\n color: white;\n border-radius: var(--radius-base);\n background-color: var(--variant-color);\n\n svg {\n width: var(--sizes-md);\n height: var(--sizes-md);\n }\n}\n.text {\n color: white;\n}\n.closeAction {\n padding-left: var(--sizes-md);\n\n svg {\n width: var(--sizes-md);\n height: var(--sizes-md);\n }\n}\n\n.toast-container .closeAction:hover,\n.toast-container .closeAction:active,\n.toast-container .closeAction:focus-visible {\n background-color: color-mix(in srgb, white 15%, var(--colors-neutral-ink-dark));\n}\n"],"names":[],"mappings":";;;;AAAA,eAAA,CAAA,
|
|
1
|
+
{"version":3,"file":"Toast.module.scss.cjs","sources":["../../../../src/components/ToastsLayout/components/Toast.module.scss"],"sourcesContent":[".toast-container {\n --toast-local-z-index: 40;\n\n background-color: var(--colors-neutral-ink-dark);\n padding: var(--sizes-3);\n box-shadow: var(--shadows-md);\n border-radius: var(--radius-base);\n pointer-events: auto;\n z-index: var(--toast-local-z-index);\n min-width: min(var(--min-width, 50vw), 80vw);\n max-width: 80vw;\n transition:\n transform 500ms ease,\n opacity 500ms ease;\n\n &.merge-variant {\n --variant-color: var(--colors-secondary-purple-base);\n }\n &.info-variant {\n --variant-color: var(--colors-secondary-blue-base);\n }\n &.error-variant {\n --variant-color: var(--colors-secondary-red-base);\n }\n &.success-variant {\n --variant-color: var(--colors-secondary-green-base);\n }\n}\n\n/* Transition classes — co-located with .last so compound selectors hash correctly */\n.enter {\n transform: translateY(var(--sizes-3));\n opacity: 0;\n}\n\n.enterActive {\n transform: translateY(0);\n opacity: 1;\n}\n\n.exit {\n transform: translateX(0);\n opacity: 1;\n}\n\n/*\n * .last modifier — applied to the bottom-most (oldest visible) toast.\n * Non-last toasts exit by sliding right (translateX) so the stack above\n * them collapses gracefully into the freed space. The last toast exits\n * by sliding down (translateY) off the bottom of the viewport since\n * there's nothing below it to displace.\n */\n.last.exit {\n transform: translateY(0);\n opacity: 1;\n}\n\n.exitActive {\n transform: translateX(var(--sizes-3));\n opacity: 0;\n}\n\n.last.exitActive {\n transform: translateY(var(--sizes-3));\n opacity: 0;\n}\n\n.icon-wrap {\n flex-shrink: 0;\n height: var(--sizes-10);\n width: var(--sizes-10);\n color: white;\n border-radius: var(--radius-base);\n background-color: var(--variant-color);\n\n svg {\n width: var(--sizes-md);\n height: var(--sizes-md);\n }\n}\n.text {\n color: white;\n}\n.closeAction {\n padding-left: var(--sizes-md);\n\n svg {\n width: var(--sizes-md);\n height: var(--sizes-md);\n }\n}\n\n.toast-container .closeAction.closeAction:hover,\n.toast-container .closeAction.closeAction:active,\n.toast-container .closeAction.closeAction:focus-visible {\n background-color: color-mix(in srgb, white 15%, var(--colors-neutral-ink-dark));\n}\n"],"names":[],"mappings":";;;;AAAA,eAAA,CAAA,ujFAAA;AACE,kBAAA,CAAA,iBAAA,CAAA,0BAAA,CAAA,eAAA,CAAA,yBAAA,CAAA,cAAA,CAAA,wBAAA,CAAA,eAAA,CAAA,yBAAA,CAAA,iBAAA,CAAA,2BAAA,CAAA,OAAA,CAAA,iBAAA,CAAA,aAAA,CAAA,uBAAA,CAAA,MAAA,CAAA,gBAAA,CAAA,MAAA,CAAA,gBAAA,CAAA,YAAA,CAAA,sBAAA,CAAA,WAAA,CAAA,qBAAA,CAAA,MAAA,CAAA,gBAAA,CAAA,aAAA,CAAA,uBAAA;;;;"}
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
import insertStyle from '../../../_virtual/____insertStyle.js';
|
|
2
2
|
|
|
3
|
-
insertStyle("@charset \"UTF-8\";\n._toast-
|
|
4
|
-
var toastStyles = {"toast-container":"_toast-
|
|
3
|
+
insertStyle("@charset \"UTF-8\";\n._toast-container_10po3_2 {\n --toast-local-z-index: 40;\n background-color: var(--colors-neutral-ink-dark);\n padding: var(--sizes-3);\n box-shadow: var(--shadows-md);\n border-radius: var(--radius-base);\n pointer-events: auto;\n z-index: var(--toast-local-z-index);\n min-width: min(var(--min-width, 50vw), 80vw);\n max-width: 80vw;\n transition: transform 500ms ease, opacity 500ms ease;\n}\n._toast-container_10po3_2._merge-variant_10po3_14 {\n --variant-color: var(--colors-secondary-purple-base);\n}\n._toast-container_10po3_2._info-variant_10po3_17 {\n --variant-color: var(--colors-secondary-blue-base);\n}\n._toast-container_10po3_2._error-variant_10po3_20 {\n --variant-color: var(--colors-secondary-red-base);\n}\n._toast-container_10po3_2._success-variant_10po3_23 {\n --variant-color: var(--colors-secondary-green-base);\n}\n\n/* Transition classes — co-located with .last so compound selectors hash correctly */\n._enter_10po3_28 {\n transform: translateY(var(--sizes-3));\n opacity: 0;\n}\n\n._enterActive_10po3_33 {\n transform: translateY(0);\n opacity: 1;\n}\n\n._exit_10po3_38 {\n transform: translateX(0);\n opacity: 1;\n}\n\n/*\n * .last modifier — applied to the bottom-most (oldest visible) toast.\n * Non-last toasts exit by sliding right (translateX) so the stack above\n * them collapses gracefully into the freed space. The last toast exits\n * by sliding down (translateY) off the bottom of the viewport since\n * there's nothing below it to displace.\n */\n._last_10po3_27._exit_10po3_38 {\n transform: translateY(0);\n opacity: 1;\n}\n\n._exitActive_10po3_55 {\n transform: translateX(var(--sizes-3));\n opacity: 0;\n}\n\n._last_10po3_27._exitActive_10po3_55 {\n transform: translateY(var(--sizes-3));\n opacity: 0;\n}\n\n._icon-wrap_10po3_65 {\n flex-shrink: 0;\n height: var(--sizes-10);\n width: var(--sizes-10);\n color: white;\n border-radius: var(--radius-base);\n background-color: var(--variant-color);\n}\n._icon-wrap_10po3_65 svg {\n width: var(--sizes-md);\n height: var(--sizes-md);\n}\n\n._text_10po3_78 {\n color: white;\n}\n\n._closeAction_10po3_82 {\n padding-left: var(--sizes-md);\n}\n._closeAction_10po3_82 svg {\n width: var(--sizes-md);\n height: var(--sizes-md);\n}\n\n._toast-container_10po3_2 ._closeAction_10po3_82._closeAction_10po3_82:hover,\n._toast-container_10po3_2 ._closeAction_10po3_82._closeAction_10po3_82:active,\n._toast-container_10po3_2 ._closeAction_10po3_82._closeAction_10po3_82:focus-visible {\n background-color: color-mix(in srgb, white 15%, var(--colors-neutral-ink-dark));\n}");
|
|
4
|
+
var toastStyles = {"toast-container":"_toast-container_10po3_2","merge-variant":"_merge-variant_10po3_14","info-variant":"_info-variant_10po3_17","error-variant":"_error-variant_10po3_20","success-variant":"_success-variant_10po3_23","enter":"_enter_10po3_28","enterActive":"_enterActive_10po3_33","exit":"_exit_10po3_38","last":"_last_10po3_27","exitActive":"_exitActive_10po3_55","icon-wrap":"_icon-wrap_10po3_65","text":"_text_10po3_78","closeAction":"_closeAction_10po3_82"};
|
|
5
5
|
|
|
6
6
|
export { toastStyles as default };
|
|
7
7
|
//# sourceMappingURL=Toast.module.scss.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Toast.module.scss.js","sources":["../../../../src/components/ToastsLayout/components/Toast.module.scss"],"sourcesContent":[".toast-container {\n --toast-local-z-index: 40;\n\n background-color: var(--colors-neutral-ink-dark);\n padding: var(--sizes-3);\n box-shadow: var(--shadows-md);\n border-radius: var(--radius-base);\n pointer-events: auto;\n z-index: var(--toast-local-z-index);\n min-width: min(var(--min-width, 50vw), 80vw);\n max-width: 80vw;\n transition:\n transform 500ms ease,\n opacity 500ms ease;\n\n &.merge-variant {\n --variant-color: var(--colors-secondary-purple-base);\n }\n &.info-variant {\n --variant-color: var(--colors-secondary-blue-base);\n }\n &.error-variant {\n --variant-color: var(--colors-secondary-red-base);\n }\n &.success-variant {\n --variant-color: var(--colors-secondary-green-base);\n }\n}\n\n/* Transition classes — co-located with .last so compound selectors hash correctly */\n.enter {\n transform: translateY(var(--sizes-3));\n opacity: 0;\n}\n\n.enterActive {\n transform: translateY(0);\n opacity: 1;\n}\n\n.exit {\n transform: translateX(0);\n opacity: 1;\n}\n\n/*\n * .last modifier — applied to the bottom-most (oldest visible) toast.\n * Non-last toasts exit by sliding right (translateX) so the stack above\n * them collapses gracefully into the freed space. The last toast exits\n * by sliding down (translateY) off the bottom of the viewport since\n * there's nothing below it to displace.\n */\n.last.exit {\n transform: translateY(0);\n opacity: 1;\n}\n\n.exitActive {\n transform: translateX(var(--sizes-3));\n opacity: 0;\n}\n\n.last.exitActive {\n transform: translateY(var(--sizes-3));\n opacity: 0;\n}\n\n.icon-wrap {\n flex-shrink: 0;\n height: var(--sizes-10);\n width: var(--sizes-10);\n color: white;\n border-radius: var(--radius-base);\n background-color: var(--variant-color);\n\n svg {\n width: var(--sizes-md);\n height: var(--sizes-md);\n }\n}\n.text {\n color: white;\n}\n.closeAction {\n padding-left: var(--sizes-md);\n\n svg {\n width: var(--sizes-md);\n height: var(--sizes-md);\n }\n}\n\n.toast-container .closeAction:hover,\n.toast-container .closeAction:active,\n.toast-container .closeAction:focus-visible {\n background-color: color-mix(in srgb, white 15%, var(--colors-neutral-ink-dark));\n}\n"],"names":["___$insertStyle"],"mappings":";;AAAAA,WAAA,CAAA,
|
|
1
|
+
{"version":3,"file":"Toast.module.scss.js","sources":["../../../../src/components/ToastsLayout/components/Toast.module.scss"],"sourcesContent":[".toast-container {\n --toast-local-z-index: 40;\n\n background-color: var(--colors-neutral-ink-dark);\n padding: var(--sizes-3);\n box-shadow: var(--shadows-md);\n border-radius: var(--radius-base);\n pointer-events: auto;\n z-index: var(--toast-local-z-index);\n min-width: min(var(--min-width, 50vw), 80vw);\n max-width: 80vw;\n transition:\n transform 500ms ease,\n opacity 500ms ease;\n\n &.merge-variant {\n --variant-color: var(--colors-secondary-purple-base);\n }\n &.info-variant {\n --variant-color: var(--colors-secondary-blue-base);\n }\n &.error-variant {\n --variant-color: var(--colors-secondary-red-base);\n }\n &.success-variant {\n --variant-color: var(--colors-secondary-green-base);\n }\n}\n\n/* Transition classes — co-located with .last so compound selectors hash correctly */\n.enter {\n transform: translateY(var(--sizes-3));\n opacity: 0;\n}\n\n.enterActive {\n transform: translateY(0);\n opacity: 1;\n}\n\n.exit {\n transform: translateX(0);\n opacity: 1;\n}\n\n/*\n * .last modifier — applied to the bottom-most (oldest visible) toast.\n * Non-last toasts exit by sliding right (translateX) so the stack above\n * them collapses gracefully into the freed space. The last toast exits\n * by sliding down (translateY) off the bottom of the viewport since\n * there's nothing below it to displace.\n */\n.last.exit {\n transform: translateY(0);\n opacity: 1;\n}\n\n.exitActive {\n transform: translateX(var(--sizes-3));\n opacity: 0;\n}\n\n.last.exitActive {\n transform: translateY(var(--sizes-3));\n opacity: 0;\n}\n\n.icon-wrap {\n flex-shrink: 0;\n height: var(--sizes-10);\n width: var(--sizes-10);\n color: white;\n border-radius: var(--radius-base);\n background-color: var(--variant-color);\n\n svg {\n width: var(--sizes-md);\n height: var(--sizes-md);\n }\n}\n.text {\n color: white;\n}\n.closeAction {\n padding-left: var(--sizes-md);\n\n svg {\n width: var(--sizes-md);\n height: var(--sizes-md);\n }\n}\n\n.toast-container .closeAction.closeAction:hover,\n.toast-container .closeAction.closeAction:active,\n.toast-container .closeAction.closeAction:focus-visible {\n background-color: color-mix(in srgb, white 15%, var(--colors-neutral-ink-dark));\n}\n"],"names":["___$insertStyle"],"mappings":";;AAAAA,WAAA,CAAA,ujFAAA;AACE,kBAAA,CAAA,iBAAA,CAAA,0BAAA,CAAA,eAAA,CAAA,yBAAA,CAAA,cAAA,CAAA,wBAAA,CAAA,eAAA,CAAA,yBAAA,CAAA,iBAAA,CAAA,2BAAA,CAAA,OAAA,CAAA,iBAAA,CAAA,aAAA,CAAA,uBAAA,CAAA,MAAA,CAAA,gBAAA,CAAA,MAAA,CAAA,gBAAA,CAAA,YAAA,CAAA,sBAAA,CAAA,WAAA,CAAA,qBAAA,CAAA,MAAA,CAAA,gBAAA,CAAA,aAAA,CAAA,uBAAA;;;;"}
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@veeqo/ui",
|
|
3
|
-
"version": "15.3.1
|
|
3
|
+
"version": "15.3.1",
|
|
4
4
|
"description": "New optimised component library for Veeqo.",
|
|
5
5
|
"author": "Robert Wealthall",
|
|
6
6
|
"license": "ISC",
|
|
@@ -57,7 +57,7 @@
|
|
|
57
57
|
"@figma-export/cli": "^6.2.2",
|
|
58
58
|
"@figma-export/output-components-as-svg": "^6.2.2",
|
|
59
59
|
"@figma-export/transform-svg-with-svgo": "^6.2.2",
|
|
60
|
-
"@figma/code-connect": "^1.4.
|
|
60
|
+
"@figma/code-connect": "^1.4.8",
|
|
61
61
|
"@floating-ui/react": "^0.27.19",
|
|
62
62
|
"@rollup/plugin-commonjs": "^28.0.2",
|
|
63
63
|
"@rollup/plugin-node-resolve": "^16.0.0",
|