syntra-ui 0.3.0 → 0.3.2
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/modal/Modal.d.ts +4 -1
- package/dist/components/modal/index.d.ts +1 -1
- package/dist/components/modal/modal.styles.d.ts +3 -2
- package/dist/components/select/select.styles.d.ts +1 -1
- package/dist/components/toast/toast.styles.d.ts +1 -1
- package/dist/components/tooltip/tooltip.styles.d.ts +1 -1
- package/dist/hooks/useClickOutside.d.ts +1 -1
- package/dist/syntra-ui.cjs +110 -68
- package/dist/syntra-ui.mjs +777 -695
- package/package.json +1 -1
|
@@ -1,13 +1,16 @@
|
|
|
1
1
|
import { CSSProperties, ReactNode } from 'react';
|
|
2
|
-
import { ModalSize } from './modal.styles';
|
|
2
|
+
import { ModalSize, ModalVariant } from './modal.styles';
|
|
3
3
|
interface ModalOwnProps {
|
|
4
4
|
opened: boolean;
|
|
5
5
|
onClose: () => void;
|
|
6
6
|
title?: ReactNode;
|
|
7
|
+
description?: ReactNode;
|
|
8
|
+
variant?: ModalVariant;
|
|
7
9
|
size?: ModalSize;
|
|
8
10
|
closeOnOverlayClick?: boolean;
|
|
9
11
|
closeOnEscape?: boolean;
|
|
10
12
|
showCloseButton?: boolean;
|
|
13
|
+
centered?: boolean;
|
|
11
14
|
children?: ReactNode;
|
|
12
15
|
footer?: ReactNode;
|
|
13
16
|
className?: string;
|
|
@@ -1,6 +1,7 @@
|
|
|
1
1
|
import { CSSProperties } from 'react';
|
|
2
2
|
type ModalSize = 'xs' | 'sm' | 'md' | 'lg' | 'xl' | 'full';
|
|
3
|
-
|
|
3
|
+
type ModalVariant = 'default' | 'confirm' | 'danger' | 'info';
|
|
4
|
+
declare const MODAL_CSS = "\n.syntra-modal-overlay {\n position: fixed;\n inset: 0;\n z-index: 9998;\n display: flex;\n align-items: center;\n justify-content: center;\n padding: 16px;\n background: rgba(0, 0, 0, 0.4);\n animation: syntra-overlay-in 200ms cubic-bezier(0.25, 0.1, 0.25, 1);\n}\n.syntra-modal-overlay[data-exiting] {\n animation: syntra-overlay-out 150ms cubic-bezier(0.25, 0.1, 0.25, 1) forwards;\n}\n@keyframes syntra-overlay-in {\n from { opacity: 0; }\n to { opacity: 1; }\n}\n@keyframes syntra-overlay-out {\n from { opacity: 1; }\n to { opacity: 0; }\n}\n\n.syntra-modal {\n position: relative;\n display: flex;\n flex-direction: column;\n width: var(--_modal-w);\n max-width: var(--_modal-max-w);\n max-height: calc(100vh - 32px);\n background: var(--syntra-color-background-default, #fff);\n border: 1px solid var(--syntra-color-border-default, #e5e5ea);\n border-radius: 12px;\n box-shadow: 0 8px 24px rgba(0, 0, 0, 0.12), 0 2px 6px rgba(0, 0, 0, 0.04);\n outline: none;\n animation: syntra-modal-in 200ms cubic-bezier(0.25, 0.1, 0.25, 1);\n overflow: hidden;\n}\n.syntra-modal-overlay[data-exiting] .syntra-modal {\n animation: syntra-modal-out 150ms cubic-bezier(0.25, 0.1, 0.25, 1) forwards;\n}\n@keyframes syntra-modal-in {\n from { opacity: 0; transform: scale(0.92) translateY(12px); }\n to { opacity: 1; transform: scale(1) translateY(0); }\n}\n@keyframes syntra-modal-out {\n from { opacity: 1; transform: scale(1) translateY(0); }\n to { opacity: 0; transform: scale(0.95) translateY(8px); }\n}\n\n.syntra-modal-header {\n display: flex;\n align-items: center;\n justify-content: space-between;\n padding: 20px 24px 0;\n gap: 12px;\n}\n.syntra-modal-icon {\n display: flex;\n align-items: center;\n justify-content: center;\n width: 40px;\n height: 40px;\n border-radius: 10px;\n flex-shrink: 0;\n margin-bottom: 4px;\n}\n.syntra-modal-icon[data-variant=\"confirm\"] {\n background: rgba(0, 122, 255, 0.1);\n color: #007AFF;\n}\n.syntra-modal-icon[data-variant=\"danger\"] {\n background: rgba(255, 59, 48, 0.1);\n color: #FF3B30;\n}\n.syntra-modal-icon[data-variant=\"info\"] {\n background: rgba(52, 199, 89, 0.1);\n color: #34C759;\n}\n.syntra-modal-header-content {\n flex: 1;\n min-width: 0;\n}\n.syntra-modal-title {\n font-size: 17px;\n font-weight: 600;\n letter-spacing: -0.02em;\n color: var(--syntra-color-foreground-default, #1c1c1e);\n line-height: 1.35;\n margin: 0;\n}\n.syntra-modal-description {\n font-size: 13px;\n color: var(--syntra-color-foreground-muted, #8e8e93);\n line-height: 1.4;\n margin-top: 2px;\n}\n.syntra-modal-close {\n display: flex;\n align-items: center;\n justify-content: center;\n width: 28px;\n height: 28px;\n border: none;\n background: var(--syntra-color-background-emphasis, #f2f2f7);\n padding: 0;\n cursor: pointer;\n color: var(--syntra-color-foreground-muted, #8e8e93);\n border-radius: 50%;\n flex-shrink: 0;\n transition: background 100ms ease, color 100ms ease, transform 100ms ease;\n}\n.syntra-modal-close:hover {\n background: var(--syntra-color-background-subtle, #e5e5ea);\n color: var(--syntra-color-foreground-default, #1c1c1e);\n}\n.syntra-modal-close:active {\n transform: scale(0.9);\n}\n\n.syntra-modal-body {\n padding: 16px 24px;\n overflow-y: auto;\n flex: 1;\n font-size: 14px;\n line-height: 1.55;\n color: var(--syntra-color-foreground-default, #1c1c1e);\n}\n\n.syntra-modal-footer {\n display: flex;\n align-items: center;\n justify-content: flex-end;\n gap: 8px;\n padding: 4px 24px 20px;\n}\n\n/* Centered variant (for confirm/danger/info) */\n.syntra-modal[data-centered] .syntra-modal-header {\n flex-direction: column;\n align-items: center;\n text-align: center;\n}\n.syntra-modal[data-centered] .syntra-modal-body {\n text-align: center;\n}\n.syntra-modal[data-centered] .syntra-modal-footer {\n justify-content: center;\n}\n";
|
|
4
5
|
declare function getModalSizeStyles(size: ModalSize): CSSProperties;
|
|
5
6
|
export { MODAL_CSS, getModalSizeStyles };
|
|
6
|
-
export type { ModalSize };
|
|
7
|
+
export type { ModalSize, ModalVariant };
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
import { CSSProperties } from 'react';
|
|
2
2
|
type SelectVariant = 'outline' | 'filled' | 'unstyled';
|
|
3
3
|
type SelectSize = 'xs' | 'sm' | 'md' | 'lg';
|
|
4
|
-
declare const SELECT_CSS = "\n.syntra-select-wrapper {\n display: inline-flex;\n position: relative;\n width: var(--_select-w, auto);\n}\n.syntra-select-trigger {\n display: inline-flex;\n align-items: center;\n width: 100%;\n min-height: var(--_select-h);\n padding-left: var(--_select-px);\n padding-right: var(--_select-px);\n gap: var(--_select-gap);\n border-radius: var(--_select-radius);\n background: var(--_select-bg);\n border: 1px solid var(--_select-border, transparent);\n font-family: inherit;\n font-size: var(--_select-fz);\n letter-spacing: -0.01em;\n color:
|
|
4
|
+
declare const SELECT_CSS = "\n.syntra-select-wrapper {\n display: inline-flex;\n position: relative;\n width: var(--_select-w, auto);\n}\n.syntra-select-trigger {\n display: inline-flex;\n align-items: center;\n width: 100%;\n min-height: var(--_select-h);\n padding-left: var(--_select-px);\n padding-right: var(--_select-px);\n gap: var(--_select-gap);\n border-radius: var(--_select-radius);\n background: var(--_select-bg);\n border: 1px solid var(--_select-border, transparent);\n font-family: inherit;\n font-size: var(--_select-fz);\n font-weight: 500;\n letter-spacing: -0.01em;\n color: var(--syntra-color-foreground-default);\n cursor: pointer;\n outline: none;\n transition: border-color 200ms cubic-bezier(0.25, 0.1, 0.25, 1),\n box-shadow 200ms cubic-bezier(0.25, 0.1, 0.25, 1),\n background 200ms cubic-bezier(0.25, 0.1, 0.25, 1);\n user-select: none;\n -webkit-tap-highlight-color: transparent;\n}\n.syntra-select-trigger:focus:not([data-disabled]):not([data-variant=\"unstyled\"]) {\n border-color: var(--_select-focus-border);\n box-shadow: 0 0 0 3px color-mix(in srgb, var(--_select-focus-border) 16%, transparent);\n}\n.syntra-select-trigger[data-invalid]:not([data-disabled]) {\n border-color: var(--_select-invalid-border);\n}\n.syntra-select-trigger[data-invalid]:focus:not([data-disabled]) {\n border-color: var(--_select-invalid-border);\n box-shadow: 0 0 0 3px color-mix(in srgb, var(--_select-invalid-border) 16%, transparent);\n}\n.syntra-select-trigger[data-disabled] {\n opacity: 0.4;\n cursor: not-allowed;\n}\n.syntra-select-trigger[data-open] {\n border-color: var(--_select-focus-border);\n box-shadow: 0 0 0 3px color-mix(in srgb, var(--_select-focus-border) 16%, transparent);\n}\n.syntra-select-value {\n flex: 1;\n min-width: 0;\n text-align: left;\n overflow: hidden;\n text-overflow: ellipsis;\n white-space: nowrap;\n color: var(--syntra-color-foreground-default);\n}\n.syntra-select-placeholder {\n color: var(--syntra-color-foreground-subtle);\n}\n.syntra-select-tags {\n flex: 1;\n display: flex;\n flex-wrap: wrap;\n gap: 4px;\n padding: 4px 0;\n min-width: 0;\n}\n.syntra-select-tag {\n display: inline-flex;\n align-items: center;\n gap: 3px;\n padding: 2px 8px;\n border-radius: 6px;\n background: var(--syntra-color-primary-100, rgba(0, 122, 255, 0.1));\n color: var(--syntra-color-primary-600, #007AFF);\n font-size: 0.85em;\n font-weight: 500;\n line-height: 1.4;\n max-width: 160px;\n overflow: hidden;\n text-overflow: ellipsis;\n white-space: nowrap;\n}\n.syntra-select-tag-remove {\n display: inline-flex;\n align-items: center;\n justify-content: center;\n width: 14px;\n height: 14px;\n border: none;\n background: none;\n padding: 0;\n cursor: pointer;\n border-radius: 4px;\n color: var(--syntra-color-primary-400, #007AFF);\n flex-shrink: 0;\n transition: color 100ms ease, background 100ms ease;\n}\n.syntra-select-tag-remove:hover {\n background: var(--syntra-color-primary-200, rgba(0, 122, 255, 0.15));\n color: var(--syntra-color-primary-700, #0056b3);\n}\n.syntra-select-chevron {\n display: flex;\n align-items: center;\n justify-content: center;\n flex-shrink: 0;\n color: var(--syntra-color-foreground-subtle);\n transition: transform 250ms cubic-bezier(0.25, 0.1, 0.25, 1);\n}\n.syntra-select-chevron[data-open] {\n transform: rotate(180deg);\n}\n.syntra-select-clear {\n display: flex;\n align-items: center;\n justify-content: center;\n flex-shrink: 0;\n width: 18px;\n height: 18px;\n border: none;\n background: none;\n padding: 0;\n cursor: pointer;\n color: var(--syntra-color-foreground-subtle);\n border-radius: 50%;\n transition: color 100ms ease, background 100ms ease;\n}\n.syntra-select-clear:hover {\n color: var(--syntra-color-foreground-default);\n background: var(--syntra-color-background-emphasis);\n}\n.syntra-select-dropdown {\n position: fixed;\n z-index: 9999;\n min-width: var(--_dropdown-min-w, 200px);\n max-height: var(--_dropdown-max-h, 250px);\n overflow-y: auto;\n overflow-x: hidden;\n background: var(--syntra-color-background-default);\n border: 1px solid var(--syntra-color-border-default);\n border-radius: 10px;\n box-shadow: 0 4px 16px rgba(0, 0, 0, 0.08), 0 1px 4px rgba(0, 0, 0, 0.04);\n padding: 4px;\n animation: syntra-select-in 180ms cubic-bezier(0.2, 0, 0, 1);\n}\n@keyframes syntra-select-in {\n from { opacity: 0; transform: scale(0.96) translateY(-4px); }\n to { opacity: 1; transform: scale(1) translateY(0); }\n}\n.syntra-select-search {\n display: block;\n width: calc(100% - 8px);\n margin: 4px auto 4px;\n padding: 7px 10px;\n border: 1px solid var(--syntra-color-border-default);\n border-radius: 8px;\n background: var(--syntra-color-background-default);\n font-family: inherit;\n font-size: inherit;\n color: var(--syntra-color-foreground-default);\n outline: none;\n transition: border-color 150ms ease, box-shadow 150ms ease;\n}\n.syntra-select-search:focus {\n border-color: var(--syntra-color-primary-500);\n box-shadow: 0 0 0 3px color-mix(in srgb, var(--syntra-color-primary-500) 12%, transparent);\n}\n.syntra-select-search::placeholder {\n color: var(--syntra-color-foreground-subtle);\n}\n.syntra-select-option {\n display: flex;\n align-items: center;\n gap: 8px;\n width: 100%;\n padding: 8px 10px;\n border: none;\n background: transparent;\n font-family: inherit;\n font-size: inherit;\n font-weight: 400;\n color: var(--syntra-color-foreground-default);\n cursor: pointer;\n border-radius: 8px;\n text-align: left;\n outline: none;\n transition: background 80ms ease, color 80ms ease;\n}\n.syntra-select-option:hover,\n.syntra-select-option[data-focused] {\n background: var(--syntra-color-primary-50, rgba(0, 122, 255, 0.08));\n color: var(--syntra-color-primary-600, #007AFF);\n}\n.syntra-select-option[data-selected] {\n font-weight: 600;\n color: var(--syntra-color-primary-600, #007AFF);\n}\n.syntra-select-option[data-selected]:hover,\n.syntra-select-option[data-selected][data-focused] {\n background: var(--syntra-color-primary-100, rgba(0, 122, 255, 0.12));\n color: var(--syntra-color-primary-700, #0056b3);\n}\n.syntra-select-option[data-disabled] {\n opacity: 0.4;\n cursor: not-allowed;\n}\n.syntra-select-option[data-disabled]:hover {\n background: transparent;\n color: var(--syntra-color-foreground-default);\n}\n.syntra-select-check {\n display: flex;\n align-items: center;\n justify-content: center;\n width: 16px;\n height: 16px;\n flex-shrink: 0;\n color: var(--syntra-color-primary-500);\n}\n.syntra-select-empty {\n padding: 16px 8px;\n text-align: center;\n color: var(--syntra-color-foreground-subtle);\n font-size: 0.9em;\n}\n";
|
|
5
5
|
declare function getSelectSizeStyles(size: SelectSize): CSSProperties;
|
|
6
6
|
declare function getSelectVariantStyles(variant: SelectVariant): CSSProperties;
|
|
7
7
|
export { SELECT_CSS, getSelectSizeStyles, getSelectVariantStyles };
|
|
@@ -1,5 +1,5 @@
|
|
|
1
1
|
type ToastType = 'default' | 'success' | 'error' | 'warning' | 'info';
|
|
2
2
|
type ToastPosition = 'top-right' | 'top-left' | 'top-center' | 'bottom-right' | 'bottom-left' | 'bottom-center';
|
|
3
|
-
declare const TOAST_CSS = "\n.syntra-toaster {\n position: fixed;\n z-index: 99999;\n display: flex;\n flex-direction: column;\n gap: 10px;\n pointer-events: none;\n padding: 20px;\n max-height: 100vh;\n overflow: hidden;\n}\n.syntra-toaster[data-position=\"top-right\"] {\n top: 0; right: 0;\n align-items: flex-end;\n}\n.syntra-toaster[data-position=\"top-left\"] {\n top: 0; left: 0;\n align-items: flex-start;\n}\n.syntra-toaster[data-position=\"top-center\"] {\n top: 0; left: 50%;\n transform: translateX(-50%);\n align-items: center;\n}\n.syntra-toaster[data-position=\"bottom-right\"] {\n bottom: 0; right: 0;\n align-items: flex-end;\n flex-direction: column-reverse;\n}\n.syntra-toaster[data-position=\"bottom-left\"] {\n bottom: 0; left: 0;\n align-items: flex-start;\n flex-direction: column-reverse;\n}\n.syntra-toaster[data-position=\"bottom-center\"] {\n bottom: 0; left: 50%;\n transform: translateX(-50%);\n align-items: center;\n flex-direction: column-reverse;\n}\n\n/* \u2500\u2500 Toast \u2500\u2500 */\n.syntra-toast {\n display: flex;\n align-items: flex-start;\n gap: 12px;\n min-width: 320px;\n max-width: 480px;\n padding: 14px 16px;\n border-radius:
|
|
3
|
+
declare const TOAST_CSS = "\n.syntra-toaster {\n position: fixed;\n z-index: 99999;\n display: flex;\n flex-direction: column;\n gap: 10px;\n pointer-events: none;\n padding: 20px;\n max-height: 100vh;\n overflow: hidden;\n}\n.syntra-toaster[data-position=\"top-right\"] {\n top: 0; right: 0;\n align-items: flex-end;\n}\n.syntra-toaster[data-position=\"top-left\"] {\n top: 0; left: 0;\n align-items: flex-start;\n}\n.syntra-toaster[data-position=\"top-center\"] {\n top: 0; left: 50%;\n transform: translateX(-50%);\n align-items: center;\n}\n.syntra-toaster[data-position=\"bottom-right\"] {\n bottom: 0; right: 0;\n align-items: flex-end;\n flex-direction: column-reverse;\n}\n.syntra-toaster[data-position=\"bottom-left\"] {\n bottom: 0; left: 0;\n align-items: flex-start;\n flex-direction: column-reverse;\n}\n.syntra-toaster[data-position=\"bottom-center\"] {\n bottom: 0; left: 50%;\n transform: translateX(-50%);\n align-items: center;\n flex-direction: column-reverse;\n}\n\n/* \u2500\u2500 Toast \u2500\u2500 */\n.syntra-toast {\n display: flex;\n align-items: flex-start;\n gap: 12px;\n min-width: 320px;\n max-width: 480px;\n padding: 14px 16px;\n border-radius: 10px;\n background: var(--syntra-color-background-default);\n border: 1px solid var(--syntra-color-border-default);\n box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08), 0 1px 3px rgba(0, 0, 0, 0.04);\n pointer-events: auto;\n font-family: inherit;\n font-size: var(--syntra-font-fontSize-sm);\n letter-spacing: -0.01em;\n color: var(--syntra-color-foreground-default);\n animation: syntra-toast-in 300ms cubic-bezier(0.2, 0, 0, 1) forwards;\n}\n.syntra-toast[data-exiting] {\n animation: syntra-toast-out 200ms cubic-bezier(0.4, 0, 1, 1) forwards;\n}\n\n/* Slide directions */\n@keyframes syntra-toast-in {\n from { opacity: 0; transform: translateX(calc(100% + 20px)); }\n to { opacity: 1; transform: translateX(0); }\n}\n@keyframes syntra-toast-out {\n from { opacity: 1; transform: translateX(0); }\n to { opacity: 0; transform: translateX(calc(100% + 20px)); }\n}\n.syntra-toaster[data-position=\"top-left\"] .syntra-toast,\n.syntra-toaster[data-position=\"bottom-left\"] .syntra-toast {\n animation-name: syntra-toast-in-left;\n}\n.syntra-toaster[data-position=\"top-left\"] .syntra-toast[data-exiting],\n.syntra-toaster[data-position=\"bottom-left\"] .syntra-toast[data-exiting] {\n animation-name: syntra-toast-out-left;\n}\n.syntra-toaster[data-position=\"top-center\"] .syntra-toast {\n animation-name: syntra-toast-in-top;\n}\n.syntra-toaster[data-position=\"top-center\"] .syntra-toast[data-exiting] {\n animation-name: syntra-toast-out-top;\n}\n.syntra-toaster[data-position=\"bottom-center\"] .syntra-toast {\n animation-name: syntra-toast-in-bottom;\n}\n.syntra-toaster[data-position=\"bottom-center\"] .syntra-toast[data-exiting] {\n animation-name: syntra-toast-out-bottom;\n}\n\n@keyframes syntra-toast-in-left {\n from { opacity: 0; transform: translateX(calc(-100% - 20px)); }\n to { opacity: 1; transform: translateX(0); }\n}\n@keyframes syntra-toast-out-left {\n from { opacity: 1; transform: translateX(0); }\n to { opacity: 0; transform: translateX(calc(-100% - 20px)); }\n}\n@keyframes syntra-toast-in-top {\n from { opacity: 0; transform: translateY(-100%); }\n to { opacity: 1; transform: translateY(0); }\n}\n@keyframes syntra-toast-out-top {\n from { opacity: 1; transform: translateY(0); }\n to { opacity: 0; transform: translateY(-100%); }\n}\n@keyframes syntra-toast-in-bottom {\n from { opacity: 0; transform: translateY(100%); }\n to { opacity: 1; transform: translateY(0); }\n}\n@keyframes syntra-toast-out-bottom {\n from { opacity: 1; transform: translateY(0); }\n to { opacity: 0; transform: translateY(100%); }\n}\n\n/* \u2500\u2500 Icon \u2500\u2500 */\n.syntra-toast-icon {\n display: flex;\n align-items: center;\n justify-content: center;\n flex-shrink: 0;\n width: 20px;\n height: 20px;\n margin-top: 1px;\n}\n.syntra-toast-icon[data-type=\"success\"] { color: var(--syntra-color-green-500); }\n.syntra-toast-icon[data-type=\"error\"] { color: var(--syntra-color-red-500); }\n.syntra-toast-icon[data-type=\"warning\"] { color: var(--syntra-color-orange-500); }\n.syntra-toast-icon[data-type=\"info\"] { color: var(--syntra-color-blue-500); }\n\n/* \u2500\u2500 Content \u2500\u2500 */\n.syntra-toast-content {\n flex: 1;\n min-width: 0;\n line-height: 1.5;\n padding-top: 1px;\n}\n\n/* \u2500\u2500 Close \u2500\u2500 */\n.syntra-toast-close {\n display: flex;\n align-items: center;\n justify-content: center;\n flex-shrink: 0;\n width: 24px;\n height: 24px;\n border: none;\n background: none;\n padding: 0;\n cursor: pointer;\n color: var(--syntra-color-foreground-subtle);\n border-radius: 6px;\n margin-top: -1px;\n transition: background 100ms ease, color 100ms ease;\n}\n.syntra-toast-close:hover {\n background: var(--syntra-color-background-emphasis);\n color: var(--syntra-color-foreground-default);\n}\n.syntra-toast-close:active {\n transform: scale(0.9);\n}\n";
|
|
4
4
|
export { TOAST_CSS };
|
|
5
5
|
export type { ToastType, ToastPosition };
|
|
@@ -1,4 +1,4 @@
|
|
|
1
1
|
type TooltipPosition = 'top' | 'bottom' | 'left' | 'right';
|
|
2
|
-
declare const TOOLTIP_CSS = "\n.syntra-tooltip-wrapper {\n display: inline-flex;\n position: relative;\n}\n.syntra-tooltip {\n position: fixed;\n z-index: 99999;\n padding: 6px 10px;\n border-radius: 8px;\n background: var(--syntra-color-foreground-default);\n color: var(--syntra-color-background-default);\n font-family: inherit;\n font-size: 12px;\n font-weight: 500;\n letter-spacing: -0.01em;\n line-height: 1.35;\n white-space: nowrap;\n pointer-events: none;\n max-width: 280px;\n box-shadow: 0
|
|
2
|
+
declare const TOOLTIP_CSS = "\n.syntra-tooltip-wrapper {\n display: inline-flex;\n position: relative;\n}\n.syntra-tooltip {\n position: fixed;\n z-index: 99999;\n padding: 6px 10px;\n border-radius: 8px;\n background: var(--syntra-color-foreground-default);\n color: var(--syntra-color-background-default);\n font-family: inherit;\n font-size: 12px;\n font-weight: 500;\n letter-spacing: -0.01em;\n line-height: 1.35;\n white-space: nowrap;\n pointer-events: none;\n max-width: 280px;\n box-shadow: 0 2px 8px rgba(0, 0, 0, 0.12);\n animation: syntra-tooltip-in 150ms cubic-bezier(0.2, 0, 0, 1);\n}\n@keyframes syntra-tooltip-in {\n from { opacity: 0; transform: scale(0.95); }\n to { opacity: 1; transform: scale(1); }\n}\n";
|
|
3
3
|
export { TOOLTIP_CSS };
|
|
4
4
|
export type { TooltipPosition };
|
|
@@ -1,2 +1,2 @@
|
|
|
1
1
|
import { RefObject } from 'react';
|
|
2
|
-
export declare function useClickOutside(ref: RefObject<Element | null>, handler: () => void, enabled?: boolean): void;
|
|
2
|
+
export declare function useClickOutside(ref: RefObject<Element | null>, handler: () => void, enabled?: boolean, ignoreRefs?: RefObject<Element | null>[]): void;
|