syntra-ui 0.3.2 → 0.3.4
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/button/button.styles.d.ts +1 -1
- package/dist/components/checkbox/checkbox.styles.d.ts +1 -1
- package/dist/components/modal/modal.styles.d.ts +1 -1
- package/dist/components/select/select.styles.d.ts +1 -1
- package/dist/components/tabs/tabs.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/syntra-ui.cjs +51 -59
- package/dist/syntra-ui.mjs +768 -764
- package/package.json +1 -1
|
@@ -2,7 +2,7 @@ import { CSSProperties } from 'react';
|
|
|
2
2
|
type ButtonVariant = 'solid' | 'outline' | 'ghost' | 'soft' | 'link';
|
|
3
3
|
type ButtonSize = 'xs' | 'sm' | 'md' | 'lg';
|
|
4
4
|
type ButtonColorScheme = 'primary' | 'neutral' | 'danger' | (string & {});
|
|
5
|
-
declare const BUTTON_CSS = "\n.syntra-button {\n display: inline-flex;\n align-items: center;\n justify-content: center;\n position: relative;\n white-space: nowrap;\n user-select: none;\n vertical-align: middle;\n cursor: pointer;\n font-family: inherit;\n font-weight: var(--_btn-fw);\n font-size: var(--_btn-fz);\n letter-spacing: -0.01em;\n height: var(--_btn-h);\n padding-left: var(--_btn-px);\n padding-right: var(--_btn-px);\n gap: var(--_btn-gap);\n border-radius: var(--_btn-radius);\n background: var(--_btn-bg);\n color: var(--_btn-color);\n border: 1px solid var(--_btn-border, transparent);\n transition:
|
|
5
|
+
declare const BUTTON_CSS = "\n.syntra-button {\n display: inline-flex;\n align-items: center;\n justify-content: center;\n position: relative;\n white-space: nowrap;\n user-select: none;\n vertical-align: middle;\n cursor: pointer;\n font-family: inherit;\n font-weight: var(--_btn-fw);\n font-size: var(--_btn-fz);\n letter-spacing: -0.01em;\n height: var(--_btn-h);\n padding-left: var(--_btn-px);\n padding-right: var(--_btn-px);\n gap: var(--_btn-gap);\n border-radius: var(--_btn-radius);\n background: var(--_btn-bg);\n color: var(--_btn-color);\n border: 1px solid var(--_btn-border, transparent);\n transition: background 150ms ease, border-color 150ms ease, color 150ms ease, transform 100ms ease;\n text-decoration: none;\n outline: none;\n -webkit-tap-highlight-color: transparent;\n}\n.syntra-button:hover:not(:disabled):not([data-loading]) {\n background: var(--_btn-bg-hover);\n border-color: var(--_btn-border-hover, transparent);\n color: var(--_btn-color-hover, var(--_btn-color));\n}\n.syntra-button:active:not(:disabled):not([data-loading]) {\n background: var(--_btn-bg-active);\n transform: scale(0.98);\n}\n.syntra-button:focus-visible {\n outline: 2px solid var(--_btn-ring);\n outline-offset: 2px;\n}\n.syntra-button:disabled,\n.syntra-button[data-loading] {\n opacity: 0.4;\n cursor: not-allowed;\n}\n.syntra-button[data-loading] {\n cursor: wait;\n pointer-events: none;\n}\n.syntra-button[data-full-width] {\n width: 100%;\n}\n.syntra-button[data-variant=\"link\"] {\n height: auto;\n padding-left: 0;\n padding-right: 0;\n background: transparent;\n border-color: transparent;\n}\n.syntra-button[data-variant=\"link\"]:hover:not(:disabled) {\n text-decoration: underline;\n background: transparent;\n}\n.syntra-button[data-variant=\"link\"]:active:not(:disabled) {\n transform: none;\n}\n.syntra-button-label[data-loading] {\n opacity: 0;\n}\n.syntra-button-spinner {\n position: absolute;\n inset: 0;\n display: flex;\n align-items: center;\n justify-content: center;\n}\n";
|
|
6
6
|
declare function getButtonSizeStyles(size: ButtonSize): CSSProperties;
|
|
7
7
|
declare function getButtonVariantStyles(variant: ButtonVariant, colorScheme: ButtonColorScheme): CSSProperties;
|
|
8
8
|
export { BUTTON_CSS, getButtonSizeStyles, getButtonVariantStyles };
|
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
import { CSSProperties } from 'react';
|
|
2
2
|
type CheckboxSize = 'sm' | 'md' | 'lg';
|
|
3
|
-
declare const CHECKBOX_CSS = "\n.syntra-checkbox {\n display: inline-flex;\n align-items: center;\n gap: var(--_cb-gap);\n cursor: pointer;\n user-select: none;\n -webkit-tap-highlight-color: transparent;\n}\n.syntra-checkbox[data-disabled] {\n opacity: 0.4;\n cursor: not-allowed;\n}\n.syntra-checkbox-input {\n position: absolute;\n width: 1px;\n height: 1px;\n overflow: hidden;\n clip: rect(0, 0, 0, 0);\n white-space: nowrap;\n border: 0;\n}\n.syntra-checkbox-control {\n display: flex;\n align-items: center;\n justify-content: center;\n flex-shrink: 0;\n width: var(--_cb-size);\n height: var(--_cb-size);\n border-radius: var(--_cb-radius);\n border: 2px solid var(--syntra-color-border-emphasis);\n background: var(--syntra-color-background-default);\n transition: all 150ms cubic-bezier(0.25, 0.1, 0.25, 1);\n color: #fff;\n}\n.syntra-checkbox-control svg {\n opacity: 0;\n transform: scale(0.5);\n transition: all 150ms cubic-bezier(0.175, 0.885, 0.32, 1.275);\n}\n.syntra-checkbox-input:checked + .syntra-checkbox-control {\n background: var(--syntra-color-primary-500);\n border-color: var(--syntra-color-primary-500);\n}\n.syntra-checkbox-input:checked + .syntra-checkbox-control svg {\n opacity: 1;\n transform: scale(1);\n}\n.syntra-checkbox-input:indeterminate + .syntra-checkbox-control {\n background: var(--syntra-color-primary-500);\n border-color: var(--syntra-color-primary-500);\n}\n.syntra-checkbox-input:indeterminate + .syntra-checkbox-control svg {\n opacity: 1;\n transform: scale(1);\n}\n.syntra-checkbox-input:focus-visible + .syntra-checkbox-control {\n outline: 2px solid var(--syntra-color-primary-500);\n outline-offset: 2px;\n}\n.syntra-checkbox:not([data-disabled]):hover .syntra-checkbox-control {\n border-color: var(--syntra-color-primary-500);\n}\n.syntra-checkbox:not([data-disabled]):active .syntra-checkbox-control {\n transform: scale(0.
|
|
3
|
+
declare const CHECKBOX_CSS = "\n.syntra-checkbox {\n display: inline-flex;\n align-items: center;\n gap: var(--_cb-gap);\n cursor: pointer;\n user-select: none;\n -webkit-tap-highlight-color: transparent;\n}\n.syntra-checkbox[data-disabled] {\n opacity: 0.4;\n cursor: not-allowed;\n}\n.syntra-checkbox-input {\n position: absolute;\n width: 1px;\n height: 1px;\n overflow: hidden;\n clip: rect(0, 0, 0, 0);\n white-space: nowrap;\n border: 0;\n}\n.syntra-checkbox-control {\n display: flex;\n align-items: center;\n justify-content: center;\n flex-shrink: 0;\n width: var(--_cb-size);\n height: var(--_cb-size);\n border-radius: var(--_cb-radius);\n border: 2px solid var(--syntra-color-border-emphasis);\n background: var(--syntra-color-background-default);\n transition: all 150ms cubic-bezier(0.25, 0.1, 0.25, 1);\n color: #fff;\n}\n.syntra-checkbox-control svg {\n opacity: 0;\n transform: scale(0.5);\n transition: all 150ms cubic-bezier(0.175, 0.885, 0.32, 1.275);\n}\n.syntra-checkbox-input:checked + .syntra-checkbox-control {\n background: var(--syntra-color-primary-500);\n border-color: var(--syntra-color-primary-500);\n}\n.syntra-checkbox-input:checked + .syntra-checkbox-control svg {\n opacity: 1;\n transform: scale(1);\n}\n.syntra-checkbox-input:indeterminate + .syntra-checkbox-control {\n background: var(--syntra-color-primary-500);\n border-color: var(--syntra-color-primary-500);\n}\n.syntra-checkbox-input:indeterminate + .syntra-checkbox-control svg {\n opacity: 1;\n transform: scale(1);\n}\n.syntra-checkbox-input:focus-visible + .syntra-checkbox-control {\n outline: 2px solid var(--syntra-color-primary-500);\n outline-offset: 2px;\n}\n.syntra-checkbox:not([data-disabled]):hover .syntra-checkbox-control {\n border-color: var(--syntra-color-primary-500);\n}\n.syntra-checkbox:not([data-disabled]):active .syntra-checkbox-control {\n transform: scale(0.92);\n}\n.syntra-checkbox-label {\n font-family: inherit;\n font-size: var(--_cb-fz);\n letter-spacing: -0.01em;\n color: var(--syntra-color-foreground-default);\n line-height: 1.4;\n}\n.syntra-checkbox-description {\n font-size: calc(var(--_cb-fz) * 0.9);\n color: var(--syntra-color-foreground-muted);\n line-height: 1.4;\n margin-top: 1px;\n}\n";
|
|
4
4
|
declare function getCheckboxSizeStyles(size: CheckboxSize): CSSProperties;
|
|
5
5
|
declare function getCheckboxIconSize(size: CheckboxSize): number;
|
|
6
6
|
export { CHECKBOX_CSS, getCheckboxSizeStyles, getCheckboxIconSize };
|
|
@@ -1,7 +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.
|
|
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.92);\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";
|
|
5
5
|
declare function getModalSizeStyles(size: ModalSize): CSSProperties;
|
|
6
6
|
export { MODAL_CSS, getModalSizeStyles };
|
|
7
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 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
|
|
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 150ms ease, box-shadow 150ms ease, background 150ms ease;\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: 4px;\n background: var(--syntra-color-background-emphasis);\n color: var(--syntra-color-foreground-default);\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-foreground-muted);\n flex-shrink: 0;\n transition: color 100ms ease;\n}\n.syntra-select-tag-remove:hover {\n color: var(--syntra-color-foreground-default);\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 200ms ease;\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;\n}\n.syntra-select-clear:hover {\n color: var(--syntra-color-foreground-default);\n}\n\n/* \u2500\u2500 Dropdown \u2500\u2500 */\n.syntra-select-dropdown {\n position: fixed;\n z-index: 9999;\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: 8px;\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 120ms ease-out;\n}\n@keyframes syntra-select-in {\n from { opacity: 0; }\n to { opacity: 1; }\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: 6px;\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\n/* \u2500\u2500 Option \u2500\u2500 */\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: 6px;\n text-align: left;\n outline: none;\n transition: background 80ms ease;\n}\n.syntra-select-option:hover,\n.syntra-select-option[data-focused] {\n background: var(--syntra-color-background-emphasis);\n}\n.syntra-select-option[data-selected] {\n font-weight: 500;\n color: var(--syntra-color-primary-500);\n}\n.syntra-select-option[data-selected]:hover,\n.syntra-select-option[data-selected][data-focused] {\n background: var(--syntra-color-background-emphasis);\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}\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 };
|
|
@@ -2,7 +2,7 @@ import { CSSProperties } from 'react';
|
|
|
2
2
|
type TabsVariant = 'line' | 'pills' | 'enclosed';
|
|
3
3
|
type TabsSize = 'sm' | 'md' | 'lg';
|
|
4
4
|
type TabsOrientation = 'horizontal' | 'vertical';
|
|
5
|
-
declare const TABS_CSS = "\n.syntra-tabs {\n display: flex;\n flex-direction: column;\n width: 100%;\n}\n.syntra-tabs[data-orientation=\"vertical\"] {\n flex-direction: row;\n}\n\n/* \u2500\u2500 TabList \u2500\u2500 */\n.syntra-tab-list {\n display: flex;\n align-items: center;\n position: relative;\n gap: var(--_tabs-gap);\n}\n.syntra-tab-list[data-orientation=\"vertical\"] {\n flex-direction: column;\n align-items: stretch;\n}\n\n/* line variant */\n.syntra-tab-list[data-variant=\"line\"] {\n border-bottom: 1px solid var(--syntra-color-border-muted);\n}\n.syntra-tab-list[data-variant=\"line\"][data-orientation=\"vertical\"] {\n border-bottom: none;\n border-right: 1px solid var(--syntra-color-border-muted);\n}\n\n/* pills variant \u2014 Apple segmented control style */\n.syntra-tab-list[data-variant=\"pills\"] {\n background: var(--syntra-color-background-emphasis);\n border-radius: 10px;\n padding: 3px;\n gap: 2px;\n}\n\n/* enclosed variant */\n.syntra-tab-list[data-variant=\"enclosed\"] {\n border-bottom: 1px solid var(--syntra-color-border-muted);\n}\n.syntra-tab-list[data-variant=\"enclosed\"][data-orientation=\"vertical\"] {\n border-bottom: none;\n border-right: 1px solid var(--syntra-color-border-muted);\n}\n\n/* \u2500\u2500 Indicator (line variant) \u2500\u2500 */\n.syntra-tab-indicator {\n position: absolute;\n bottom: -1px;\n left: var(--_indicator-left, 0);\n width: var(--_indicator-width, 0);\n height: 2px;\n background: var(--syntra-color-primary-500);\n border-radius: 1px;\n transition: left 280ms cubic-bezier(0.4, 0, 0.2, 1),\n width 280ms cubic-bezier(0.4, 0, 0.2, 1),\n top 280ms cubic-bezier(0.4, 0, 0.2, 1),\n height 280ms cubic-bezier(0.4, 0, 0.2, 1);\n}\n.syntra-tab-list[data-orientation=\"vertical\"] .syntra-tab-indicator {\n bottom: auto;\n right: -1px;\n left: auto;\n top: var(--_indicator-top, 0);\n width: 2px;\n height: var(--_indicator-height, 0);\n}\n\n/* \u2500\u2500 Tab \u2500\u2500 */\n.syntra-tab {\n display: inline-flex;\n align-items: center;\n justify-content: center;\n gap: 6px;\n position: relative;\n white-space: nowrap;\n cursor: pointer;\n user-select: none;\n border: none;\n outline: none;\n font-family: inherit;\n font-weight: 500;\n font-size: var(--_tab-fz);\n letter-spacing: -0.01em;\n padding: var(--_tab-py) var(--_tab-px);\n color: var(--syntra-color-foreground-muted);\n background: transparent;\n transition:
|
|
5
|
+
declare const TABS_CSS = "\n.syntra-tabs {\n display: flex;\n flex-direction: column;\n width: 100%;\n}\n.syntra-tabs[data-orientation=\"vertical\"] {\n flex-direction: row;\n}\n\n/* \u2500\u2500 TabList \u2500\u2500 */\n.syntra-tab-list {\n display: flex;\n align-items: center;\n position: relative;\n gap: var(--_tabs-gap);\n}\n.syntra-tab-list[data-orientation=\"vertical\"] {\n flex-direction: column;\n align-items: stretch;\n}\n\n/* line variant */\n.syntra-tab-list[data-variant=\"line\"] {\n border-bottom: 1px solid var(--syntra-color-border-muted);\n}\n.syntra-tab-list[data-variant=\"line\"][data-orientation=\"vertical\"] {\n border-bottom: none;\n border-right: 1px solid var(--syntra-color-border-muted);\n}\n\n/* pills variant \u2014 Apple segmented control style */\n.syntra-tab-list[data-variant=\"pills\"] {\n background: var(--syntra-color-background-emphasis);\n border-radius: 10px;\n padding: 3px;\n gap: 2px;\n}\n\n/* enclosed variant */\n.syntra-tab-list[data-variant=\"enclosed\"] {\n border-bottom: 1px solid var(--syntra-color-border-muted);\n}\n.syntra-tab-list[data-variant=\"enclosed\"][data-orientation=\"vertical\"] {\n border-bottom: none;\n border-right: 1px solid var(--syntra-color-border-muted);\n}\n\n/* \u2500\u2500 Indicator (line variant) \u2500\u2500 */\n.syntra-tab-indicator {\n position: absolute;\n bottom: -1px;\n left: var(--_indicator-left, 0);\n width: var(--_indicator-width, 0);\n height: 2px;\n background: var(--syntra-color-primary-500);\n border-radius: 1px;\n transition: left 280ms cubic-bezier(0.4, 0, 0.2, 1),\n width 280ms cubic-bezier(0.4, 0, 0.2, 1),\n top 280ms cubic-bezier(0.4, 0, 0.2, 1),\n height 280ms cubic-bezier(0.4, 0, 0.2, 1);\n}\n.syntra-tab-list[data-orientation=\"vertical\"] .syntra-tab-indicator {\n bottom: auto;\n right: -1px;\n left: auto;\n top: var(--_indicator-top, 0);\n width: 2px;\n height: var(--_indicator-height, 0);\n}\n\n/* \u2500\u2500 Tab \u2500\u2500 */\n.syntra-tab {\n display: inline-flex;\n align-items: center;\n justify-content: center;\n gap: 6px;\n position: relative;\n white-space: nowrap;\n cursor: pointer;\n user-select: none;\n border: none;\n outline: none;\n font-family: inherit;\n font-weight: 500;\n font-size: var(--_tab-fz);\n letter-spacing: -0.01em;\n padding: var(--_tab-py) var(--_tab-px);\n color: var(--syntra-color-foreground-muted);\n background: transparent;\n transition: background 150ms ease, color 150ms ease, transform 100ms ease;\n -webkit-tap-highlight-color: transparent;\n}\n.syntra-tab:hover:not(:disabled) {\n color: var(--syntra-color-foreground-default);\n}\n.syntra-tab:active:not(:disabled) {\n transform: scale(0.98);\n}\n.syntra-tab:focus-visible {\n outline: 2px solid var(--syntra-color-primary-500);\n outline-offset: -2px;\n border-radius: 8px;\n}\n.syntra-tab:disabled {\n opacity: 0.4;\n cursor: not-allowed;\n}\n\n/* line variant tab */\n.syntra-tab[data-variant=\"line\"][data-selected] {\n color: var(--syntra-color-primary-500);\n}\n\n/* pills variant tab \u2014 Apple segmented control */\n.syntra-tab[data-variant=\"pills\"] {\n border-radius: 7px;\n padding: var(--_tab-py) var(--_tab-px);\n}\n.syntra-tab[data-variant=\"pills\"][data-selected] {\n background: var(--syntra-color-background-default);\n color: var(--syntra-color-foreground-default);\n font-weight: 600;\n box-shadow: 0 1px 3px rgba(0, 0, 0, 0.08), 0 1px 2px rgba(0, 0, 0, 0.04);\n}\n.syntra-tab[data-variant=\"pills\"]:active:not(:disabled) {\n transform: scale(0.98);\n}\n\n/* enclosed variant tab */\n.syntra-tab[data-variant=\"enclosed\"] {\n border: 1px solid transparent;\n border-bottom: none;\n border-radius: 8px 8px 0 0;\n margin-bottom: -1px;\n}\n.syntra-tab[data-variant=\"enclosed\"][data-selected] {\n background: var(--syntra-color-background-default);\n border-color: var(--syntra-color-border-muted);\n color: var(--syntra-color-foreground-default);\n font-weight: 600;\n}\n.syntra-tab[data-variant=\"enclosed\"][data-orientation=\"vertical\"] {\n border-bottom: 1px solid transparent;\n border-right: none;\n border-radius: 8px 0 0 8px;\n margin-bottom: 0;\n margin-right: -1px;\n}\n.syntra-tab[data-variant=\"enclosed\"][data-orientation=\"vertical\"][data-selected] {\n border-color: var(--syntra-color-border-muted);\n border-right-color: var(--syntra-color-background-default);\n}\n\n/* \u2500\u2500 TabPanel \u2500\u2500 */\n.syntra-tab-panel {\n padding: var(--_tabs-panel-py) 0;\n outline: none;\n}\n.syntra-tab-panel:focus-visible {\n outline: 2px solid var(--syntra-color-primary-500);\n outline-offset: 2px;\n border-radius: 8px;\n}\n";
|
|
6
6
|
declare function getTabsSizeStyles(size: TabsSize): CSSProperties;
|
|
7
7
|
export { TABS_CSS, getTabsSizeStyles };
|
|
8
8
|
export type { TabsVariant, TabsSize, TabsOrientation };
|
|
@@ -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: 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.
|
|
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.92);\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:
|
|
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: 6px;\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 opacity: 0;\n transition: opacity 150ms ease;\n}\n.syntra-tooltip[data-visible] {\n opacity: 1;\n}\n";
|
|
3
3
|
export { TOOLTIP_CSS };
|
|
4
4
|
export type { TooltipPosition };
|