syntra-ui 0.3.0 → 0.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/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/hooks/useClickOutside.d.ts +1 -1
- package/dist/syntra-ui.cjs +108 -59
- package/dist/syntra-ui.mjs +767 -678
- 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.35);\n backdrop-filter: blur(8px);\n -webkit-backdrop-filter: blur(8px);\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: 16px;\n box-shadow:\n 0 0 0 1px rgba(0, 0, 0, 0.03),\n 0 24px 48px rgba(0, 0, 0, 0.12),\n 0 8px 16px rgba(0, 0, 0, 0.06);\n outline: none;\n animation: syntra-modal-in 280ms cubic-bezier(0.175, 0.885, 0.32, 1.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: 12px;\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: 12px;\n box-shadow: 0 8px 30px rgba(0, 0, 0, 0.12), 0 2px 8px rgba(0, 0, 0, 0.06);\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,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;
|