@tachui/modifiers 0.8.0-alpha → 0.8.5-alpha
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/README.md +19 -9
- package/dist/animation/index.d.ts +11 -0
- package/dist/animation/index.d.ts.map +1 -0
- package/dist/appearance/background.d.ts +23 -6
- package/dist/appearance/background.d.ts.map +1 -1
- package/dist/appearance/border.d.ts +2 -2
- package/dist/appearance/border.d.ts.map +1 -1
- package/dist/appearance/clip-shape.d.ts +2 -2
- package/dist/appearance/clip-shape.d.ts.map +1 -1
- package/dist/appearance/clipped.d.ts +2 -2
- package/dist/appearance/clipped.d.ts.map +1 -1
- package/dist/appearance/foreground.d.ts +14 -5
- package/dist/appearance/foreground.d.ts.map +1 -1
- package/dist/appearance/index.js +11 -12
- package/dist/appearance/reactive-factories.d.ts +20 -0
- package/dist/appearance/reactive-factories.d.ts.map +1 -0
- package/dist/attributes/accessibility.d.ts +10 -0
- package/dist/attributes/accessibility.d.ts.map +1 -0
- package/dist/attributes/aria.d.ts +2 -2
- package/dist/attributes/aria.d.ts.map +1 -1
- package/dist/attributes/css-properties.d.ts +2 -2
- package/dist/attributes/css-properties.d.ts.map +1 -1
- package/dist/attributes/html.d.ts +2 -2
- package/dist/attributes/html.d.ts.map +1 -1
- package/dist/attributes/index.d.ts +1 -0
- package/dist/attributes/index.d.ts.map +1 -1
- package/dist/base.d.ts +6 -7
- package/dist/base.d.ts.map +1 -1
- package/dist/base.js +9 -840
- package/dist/basic/animation.d.ts +41 -0
- package/dist/basic/animation.d.ts.map +1 -0
- package/dist/basic/base.d.ts +7 -8
- package/dist/basic/base.d.ts.map +1 -1
- package/dist/basic/index.d.ts +19 -2
- package/dist/basic/index.d.ts.map +1 -1
- package/dist/basic/index.js +252 -0
- package/dist/basic/margin.d.ts +2 -2
- package/dist/basic/margin.d.ts.map +1 -1
- package/dist/basic/margin.js +13 -158
- package/dist/basic/padding.d.ts +2 -2
- package/dist/basic/padding.d.ts.map +1 -1
- package/dist/basic/padding.js +13 -153
- package/dist/basic/size.d.ts +2 -2
- package/dist/basic/size.d.ts.map +1 -1
- package/dist/basic/size.js +10 -76
- package/dist/effects/backdrop/index.d.ts +60 -0
- package/dist/effects/backdrop/index.d.ts.map +1 -0
- package/dist/effects/backdrop/index.js +118 -0
- package/dist/effects/effects/index.d.ts +190 -0
- package/dist/effects/effects/index.d.ts.map +1 -0
- package/dist/effects/filters/index.d.ts +297 -0
- package/dist/effects/filters/index.d.ts.map +1 -0
- package/dist/effects/filters/index.js +234 -0
- package/dist/effects/index.d.ts +14 -0
- package/dist/effects/index.d.ts.map +1 -0
- package/dist/effects/index.js +373 -0
- package/dist/effects/internal-exports.d.ts +9 -0
- package/dist/effects/internal-exports.d.ts.map +1 -0
- package/dist/effects/shadows/index.d.ts +316 -0
- package/dist/effects/shadows/index.d.ts.map +1 -0
- package/dist/effects/shadows/index.js +405 -0
- package/dist/effects/transforms/index.d.ts +316 -0
- package/dist/effects/transforms/index.d.ts.map +1 -0
- package/dist/effects/transforms/index.js +193 -0
- package/dist/elements/pseudo-elements.d.ts +2 -2
- package/dist/elements/pseudo-elements.d.ts.map +1 -1
- package/dist/essential-manifest.d.ts +5 -0
- package/dist/essential-manifest.d.ts.map +1 -0
- package/dist/index.d.ts +10 -3
- package/dist/index.d.ts.map +1 -1
- package/dist/index.js +273 -881
- package/dist/interaction/allows-hit-testing.d.ts +1 -1
- package/dist/interaction/allows-hit-testing.d.ts.map +1 -1
- package/dist/interaction/dom-events.d.ts +35 -0
- package/dist/interaction/dom-events.d.ts.map +1 -0
- package/dist/interaction/focus-events.d.ts +54 -0
- package/dist/interaction/focus-events.d.ts.map +1 -0
- package/dist/interaction/focusable.d.ts +1 -1
- package/dist/interaction/focusable.d.ts.map +1 -1
- package/dist/interaction/focused.d.ts +1 -1
- package/dist/interaction/focused.d.ts.map +1 -1
- package/dist/interaction/index.d.ts +5 -0
- package/dist/interaction/index.d.ts.map +1 -1
- package/dist/interaction/index.js +75 -28
- package/dist/interaction/keyboard-events.d.ts +69 -0
- package/dist/interaction/keyboard-events.d.ts.map +1 -0
- package/dist/interaction/keyboard-shortcut.d.ts +1 -1
- package/dist/interaction/keyboard-shortcut.d.ts.map +1 -1
- package/dist/interaction/mouse-events.d.ts +125 -0
- package/dist/interaction/mouse-events.d.ts.map +1 -0
- package/dist/interaction/on-continuous-hover.d.ts +1 -1
- package/dist/interaction/on-continuous-hover.d.ts.map +1 -1
- package/dist/interaction/on-hover.d.ts +30 -0
- package/dist/interaction/on-hover.d.ts.map +1 -0
- package/dist/interaction/on-long-press-gesture.d.ts +1 -1
- package/dist/interaction/on-long-press-gesture.d.ts.map +1 -1
- package/dist/interaction/scroll.d.ts +2 -2
- package/dist/interaction/scroll.d.ts.map +1 -1
- package/dist/layout/aspect-ratio.d.ts +2 -2
- package/dist/layout/aspect-ratio.d.ts.map +1 -1
- package/dist/layout/fixed-size.d.ts +2 -2
- package/dist/layout/fixed-size.d.ts.map +1 -1
- package/dist/layout/flexbox.d.ts +2 -2
- package/dist/layout/flexbox.d.ts.map +1 -1
- package/dist/layout/frame.d.ts +13 -0
- package/dist/layout/frame.d.ts.map +1 -0
- package/dist/layout/index.d.ts +2 -0
- package/dist/layout/index.d.ts.map +1 -1
- package/dist/layout/index.js +25 -22
- package/dist/layout/offset.d.ts +2 -2
- package/dist/layout/offset.d.ts.map +1 -1
- package/dist/layout/overlay.d.ts +1 -1
- package/dist/layout/overlay.d.ts.map +1 -1
- package/dist/layout/position.d.ts +2 -2
- package/dist/layout/position.d.ts.map +1 -1
- package/dist/layout/resizable.d.ts +6 -0
- package/dist/layout/resizable.d.ts.map +1 -0
- package/dist/layout/scale-effect.d.ts +6 -5
- package/dist/layout/scale-effect.d.ts.map +1 -1
- package/dist/layout/z-index.d.ts +2 -2
- package/dist/layout/z-index.d.ts.map +1 -1
- package/dist/lifecycle/index.d.ts +6 -0
- package/dist/lifecycle/index.d.ts.map +1 -0
- package/dist/modifiers-basic-DLmE749_.js +5604 -0
- package/dist/navigation/index.d.ts +12 -0
- package/dist/navigation/index.d.ts.map +1 -0
- package/dist/preload/backdrop.d.ts +5 -0
- package/dist/preload/backdrop.d.ts.map +1 -0
- package/dist/preload/backdrop.js +7 -0
- package/dist/preload/basic.d.ts +7 -0
- package/dist/preload/basic.d.ts.map +1 -0
- package/dist/preload/basic.js +251 -0
- package/dist/preload/effects.d.ts +6 -0
- package/dist/preload/effects.d.ts.map +1 -0
- package/dist/preload/effects.js +95 -0
- package/dist/preload/filters.d.ts +6 -0
- package/dist/preload/filters.d.ts.map +1 -0
- package/dist/preload/filters.js +31 -0
- package/dist/preload/shadows.d.ts +5 -0
- package/dist/preload/shadows.d.ts.map +1 -0
- package/dist/preload/shadows.js +27 -0
- package/dist/preload/transforms.d.ts +5 -0
- package/dist/preload/transforms.d.ts.map +1 -0
- package/dist/preload/transforms.js +30 -0
- package/dist/types.d.ts +7 -6
- package/dist/types.d.ts.map +1 -1
- package/dist/types.js +0 -1
- package/dist/typography/font.d.ts +5 -2
- package/dist/typography/font.d.ts.map +1 -1
- package/dist/typography/index.d.ts +1 -0
- package/dist/typography/index.d.ts.map +1 -1
- package/dist/typography/index.js +26 -28
- package/dist/typography/text.d.ts +2 -2
- package/dist/typography/text.d.ts.map +1 -1
- package/dist/typography/text.js +9 -127
- package/dist/typography/typography.d.ts +6 -4
- package/dist/typography/typography.d.ts.map +1 -1
- package/dist/utility/as-html-validator.d.ts +20 -0
- package/dist/utility/as-html-validator.d.ts.map +1 -0
- package/dist/utility/as-html.d.ts +65 -0
- package/dist/utility/as-html.d.ts.map +1 -0
- package/dist/utility/basic-sanitizer.d.ts +54 -0
- package/dist/utility/basic-sanitizer.d.ts.map +1 -0
- package/dist/utility/css.d.ts +2 -2
- package/dist/utility/css.d.ts.map +1 -1
- package/dist/utility/index.d.ts +3 -0
- package/dist/utility/index.d.ts.map +1 -1
- package/dist/utility/index.js +19 -15
- package/dist/utility/utility.d.ts +2 -2
- package/dist/utility/utility.d.ts.map +1 -1
- package/dist/version.d.ts +14 -0
- package/dist/version.d.ts.map +1 -0
- package/package.json +59 -4
- package/dist/allows-hit-testing-DscPrcOw.js +0 -464
- package/dist/allows-hit-testing-DscPrcOw.js.map +0 -1
- package/dist/appearance/index.js.map +0 -1
- package/dist/base-CkGf4b9G.js +0 -786
- package/dist/base-CkGf4b9G.js.map +0 -1
- package/dist/base.js.map +0 -1
- package/dist/basic/margin.js.map +0 -1
- package/dist/basic/padding.js.map +0 -1
- package/dist/basic/size.js.map +0 -1
- package/dist/clipped-CCW8gJqJ.js +0 -282
- package/dist/clipped-CCW8gJqJ.js.map +0 -1
- package/dist/css-CJEXRr6H.js +0 -124
- package/dist/css-CJEXRr6H.js.map +0 -1
- package/dist/font-3qM2Z97N.js +0 -135
- package/dist/font-3qM2Z97N.js.map +0 -1
- package/dist/index.js.map +0 -1
- package/dist/interaction/index.js.map +0 -1
- package/dist/layout/index.js.map +0 -1
- package/dist/overlay-DDiSLprp.js +0 -774
- package/dist/overlay-DDiSLprp.js.map +0 -1
- package/dist/types.js.map +0 -1
- package/dist/typography/index.js.map +0 -1
- package/dist/typography/text.js.map +0 -1
- package/dist/utility/index.js.map +0 -1
|
@@ -0,0 +1,297 @@
|
|
|
1
|
+
/**
|
|
2
|
+
* Filter Modifiers - CSS filter effects system
|
|
3
|
+
*
|
|
4
|
+
* Provides comprehensive CSS filter capabilities including blur, brightness,
|
|
5
|
+
* contrast, saturation, and other visual effects for enhanced styling.
|
|
6
|
+
*/
|
|
7
|
+
import type { DOMNode } from '@tachui/types/runtime';
|
|
8
|
+
import { BaseModifier } from '@tachui/core/modifiers/base';
|
|
9
|
+
import type { ModifierContext, ReactiveModifierProps } from '@tachui/types/modifiers';
|
|
10
|
+
export interface FilterConfig {
|
|
11
|
+
blur?: number;
|
|
12
|
+
brightness?: number;
|
|
13
|
+
contrast?: number;
|
|
14
|
+
saturate?: number;
|
|
15
|
+
sepia?: number;
|
|
16
|
+
hueRotate?: string;
|
|
17
|
+
invert?: number;
|
|
18
|
+
opacity?: number;
|
|
19
|
+
dropShadow?: string;
|
|
20
|
+
grayscale?: number;
|
|
21
|
+
}
|
|
22
|
+
export interface FilterOptions {
|
|
23
|
+
filter?: FilterConfig | string;
|
|
24
|
+
}
|
|
25
|
+
export type ReactiveFilterOptions = ReactiveModifierProps<FilterOptions>;
|
|
26
|
+
export declare class FilterModifier extends BaseModifier<FilterOptions> {
|
|
27
|
+
readonly type = "filter";
|
|
28
|
+
readonly priority = 30;
|
|
29
|
+
constructor(options: ReactiveFilterOptions);
|
|
30
|
+
apply(_node: DOMNode, context: ModifierContext): DOMNode | undefined;
|
|
31
|
+
private computeFilterStyles;
|
|
32
|
+
private generateFilterCSS;
|
|
33
|
+
}
|
|
34
|
+
/**
|
|
35
|
+
* General filter modifier with flexible configuration
|
|
36
|
+
*
|
|
37
|
+
* @example
|
|
38
|
+
* ```typescript
|
|
39
|
+
* .filter({ blur: 5, brightness: 1.2, contrast: 1.1 })
|
|
40
|
+
* .filter('blur(3px) sepia(0.8)') // Direct CSS filter string
|
|
41
|
+
* ```
|
|
42
|
+
*/
|
|
43
|
+
export declare function filter(config: FilterConfig | string): FilterModifier;
|
|
44
|
+
/**
|
|
45
|
+
* Blur filter effect
|
|
46
|
+
*
|
|
47
|
+
* @example
|
|
48
|
+
* ```typescript
|
|
49
|
+
* .blur(5) // 5px blur
|
|
50
|
+
* .blur(0.5) // Subtle 0.5px blur
|
|
51
|
+
* .blur(10) // Heavy 10px blur
|
|
52
|
+
* ```
|
|
53
|
+
*/
|
|
54
|
+
export declare function blur(radius: number): FilterModifier;
|
|
55
|
+
/**
|
|
56
|
+
* Brightness adjustment filter
|
|
57
|
+
*
|
|
58
|
+
* @example
|
|
59
|
+
* ```typescript
|
|
60
|
+
* .brightness(1.2) // 20% brighter
|
|
61
|
+
* .brightness(0.8) // 20% darker
|
|
62
|
+
* .brightness(2.0) // Double brightness
|
|
63
|
+
* ```
|
|
64
|
+
*/
|
|
65
|
+
export declare function brightness(value: number): FilterModifier;
|
|
66
|
+
/**
|
|
67
|
+
* Contrast adjustment filter
|
|
68
|
+
*
|
|
69
|
+
* @example
|
|
70
|
+
* ```typescript
|
|
71
|
+
* .contrast(1.5) // 50% more contrast
|
|
72
|
+
* .contrast(0.7) // 30% less contrast
|
|
73
|
+
* .contrast(2.0) // Double contrast
|
|
74
|
+
* ```
|
|
75
|
+
*/
|
|
76
|
+
export declare function contrast(value: number): FilterModifier;
|
|
77
|
+
/**
|
|
78
|
+
* Saturation adjustment filter
|
|
79
|
+
*
|
|
80
|
+
* @example
|
|
81
|
+
* ```typescript
|
|
82
|
+
* .saturate(1.5) // 50% more saturated
|
|
83
|
+
* .saturate(0.5) // 50% less saturated
|
|
84
|
+
* .saturate(0) // Completely desaturated (grayscale)
|
|
85
|
+
* .saturate(2.0) // Double saturation
|
|
86
|
+
* ```
|
|
87
|
+
*/
|
|
88
|
+
export declare function saturate(value: number): FilterModifier;
|
|
89
|
+
/**
|
|
90
|
+
* Grayscale filter effect
|
|
91
|
+
*
|
|
92
|
+
* @example
|
|
93
|
+
* ```typescript
|
|
94
|
+
* .grayscale(1) // Full grayscale
|
|
95
|
+
* .grayscale(0.5) // 50% grayscale
|
|
96
|
+
* .grayscale(0) // No grayscale (full color)
|
|
97
|
+
* ```
|
|
98
|
+
*/
|
|
99
|
+
export declare function grayscale(value: number): FilterModifier;
|
|
100
|
+
/**
|
|
101
|
+
* Sepia filter effect for vintage look
|
|
102
|
+
*
|
|
103
|
+
* @example
|
|
104
|
+
* ```typescript
|
|
105
|
+
* .sepia(1) // Full sepia effect
|
|
106
|
+
* .sepia(0.6) // 60% sepia effect
|
|
107
|
+
* .sepia(0) // No sepia effect
|
|
108
|
+
* ```
|
|
109
|
+
*/
|
|
110
|
+
export declare function sepia(value: number): FilterModifier;
|
|
111
|
+
/**
|
|
112
|
+
* Hue rotation filter effect
|
|
113
|
+
*
|
|
114
|
+
* @example
|
|
115
|
+
* ```typescript
|
|
116
|
+
* .hueRotate('90deg') // Rotate hue by 90 degrees
|
|
117
|
+
* .hueRotate('0.25turn') // Quarter turn hue rotation
|
|
118
|
+
* .hueRotate('180deg') // Half rotation (complementary colors)
|
|
119
|
+
* ```
|
|
120
|
+
*/
|
|
121
|
+
export declare function hueRotate(angle: string): FilterModifier;
|
|
122
|
+
/**
|
|
123
|
+
* Opacity filter effect
|
|
124
|
+
*
|
|
125
|
+
* @example
|
|
126
|
+
* ```typescript
|
|
127
|
+
* .opacity(0.5) // 50% opacity
|
|
128
|
+
* .opacity(0.8) // 80% opacity
|
|
129
|
+
* .opacity(1.0) // Fully opaque
|
|
130
|
+
* .opacity(0) // Fully transparent
|
|
131
|
+
* ```
|
|
132
|
+
*/
|
|
133
|
+
export declare function opacity(value: number): FilterModifier;
|
|
134
|
+
/**
|
|
135
|
+
* Backdrop filter effect
|
|
136
|
+
*
|
|
137
|
+
* @example
|
|
138
|
+
* ```typescript
|
|
139
|
+
* .backdropFilter({ blur: 5, brightness: 1.2 }) // Backdrop blur + brightness
|
|
140
|
+
* .backdropFilter('blur(3px) sepia(0.8)') // Direct CSS backdrop-filter string
|
|
141
|
+
* ```
|
|
142
|
+
*/
|
|
143
|
+
export declare function backdropFilter(config: FilterConfig | string): FilterModifier;
|
|
144
|
+
/**
|
|
145
|
+
* Invert colors filter
|
|
146
|
+
*
|
|
147
|
+
* @example
|
|
148
|
+
* ```typescript
|
|
149
|
+
* .invert(1) // Full color inversion
|
|
150
|
+
* .invert(0.5) // 50% color inversion
|
|
151
|
+
* .invert(0) // No inversion (normal colors)
|
|
152
|
+
* ```
|
|
153
|
+
*/
|
|
154
|
+
export declare function invert(value: number): FilterModifier;
|
|
155
|
+
/**
|
|
156
|
+
* Drop shadow filter (alternative to box-shadow)
|
|
157
|
+
*
|
|
158
|
+
* @example
|
|
159
|
+
* ```typescript
|
|
160
|
+
* .filterDropShadow('2px 2px 4px rgba(0,0,0,0.3)')
|
|
161
|
+
* .filterDropShadow('0 4px 8px #000')
|
|
162
|
+
* .filterDropShadow('inset 0 0 10px rgba(255,255,255,0.5)')
|
|
163
|
+
* ```
|
|
164
|
+
*/
|
|
165
|
+
export declare function filterDropShadow(shadow: string): FilterModifier;
|
|
166
|
+
/**
|
|
167
|
+
* Vintage photo effect - sepia + contrast + slight blur
|
|
168
|
+
*
|
|
169
|
+
* @example
|
|
170
|
+
* ```typescript
|
|
171
|
+
* .vintagePhoto() // Default vintage effect
|
|
172
|
+
* .vintagePhoto(0.8, 1.2) // Custom sepia and contrast
|
|
173
|
+
* ```
|
|
174
|
+
*/
|
|
175
|
+
export declare function vintagePhoto(sepiaAmount?: number, contrastAmount?: number): FilterModifier;
|
|
176
|
+
/**
|
|
177
|
+
* High contrast black and white effect
|
|
178
|
+
*
|
|
179
|
+
* @example
|
|
180
|
+
* ```typescript
|
|
181
|
+
* .blackAndWhite() // Full grayscale with high contrast
|
|
182
|
+
* .blackAndWhite(1.5) // Custom contrast level
|
|
183
|
+
* ```
|
|
184
|
+
*/
|
|
185
|
+
export declare function blackAndWhite(contrastAmount?: number): FilterModifier;
|
|
186
|
+
/**
|
|
187
|
+
* Vibrant color enhancement
|
|
188
|
+
*
|
|
189
|
+
* @example
|
|
190
|
+
* ```typescript
|
|
191
|
+
* .vibrant() // Enhanced saturation and contrast
|
|
192
|
+
* .vibrant(1.4, 1.1) // Custom saturation and contrast
|
|
193
|
+
* ```
|
|
194
|
+
*/
|
|
195
|
+
export declare function vibrant(saturationAmount?: number, contrastAmount?: number): FilterModifier;
|
|
196
|
+
/**
|
|
197
|
+
* Warm color temperature effect
|
|
198
|
+
*
|
|
199
|
+
* @example
|
|
200
|
+
* ```typescript
|
|
201
|
+
* .warmTone() // Warm hue shift with brightness
|
|
202
|
+
* .warmTone('15deg') // Custom hue rotation
|
|
203
|
+
* ```
|
|
204
|
+
*/
|
|
205
|
+
export declare function warmTone(hueShift?: string): FilterModifier;
|
|
206
|
+
/**
|
|
207
|
+
* Cool color temperature effect
|
|
208
|
+
*
|
|
209
|
+
* @example
|
|
210
|
+
* ```typescript
|
|
211
|
+
* .coolTone() // Cool hue shift
|
|
212
|
+
* .coolTone('-20deg') // Custom hue rotation
|
|
213
|
+
* ```
|
|
214
|
+
*/
|
|
215
|
+
export declare function coolTone(hueShift?: string): FilterModifier;
|
|
216
|
+
/**
|
|
217
|
+
* Faded/washed out effect
|
|
218
|
+
*
|
|
219
|
+
* @example
|
|
220
|
+
* ```typescript
|
|
221
|
+
* .faded() // Reduced contrast and saturation
|
|
222
|
+
* .faded(0.8, 0.7) // Custom contrast and saturation
|
|
223
|
+
* ```
|
|
224
|
+
*/
|
|
225
|
+
export declare function faded(contrastAmount?: number, saturationAmount?: number): FilterModifier;
|
|
226
|
+
/**
|
|
227
|
+
* High-key photography effect - bright and airy
|
|
228
|
+
*
|
|
229
|
+
* @example
|
|
230
|
+
* ```typescript
|
|
231
|
+
* .highKey() // Bright, airy effect
|
|
232
|
+
* .highKey(1.3, 0.9) // Custom brightness and contrast
|
|
233
|
+
* ```
|
|
234
|
+
*/
|
|
235
|
+
export declare function highKey(brightnessAmount?: number, contrastAmount?: number): FilterModifier;
|
|
236
|
+
/**
|
|
237
|
+
* Low-key photography effect - dark and moody
|
|
238
|
+
*
|
|
239
|
+
* @example
|
|
240
|
+
* ```typescript
|
|
241
|
+
* .lowKey() // Dark, moody effect
|
|
242
|
+
* .lowKey(0.8, 1.4) // Custom brightness and contrast
|
|
243
|
+
* ```
|
|
244
|
+
*/
|
|
245
|
+
export declare function lowKey(brightnessAmount?: number, contrastAmount?: number): FilterModifier;
|
|
246
|
+
/**
|
|
247
|
+
* Soft focus effect - subtle blur with brightness
|
|
248
|
+
*
|
|
249
|
+
* @example
|
|
250
|
+
* ```typescript
|
|
251
|
+
* .softFocus() // Subtle blur with glow effect
|
|
252
|
+
* .softFocus(1.5) // Custom blur amount
|
|
253
|
+
* ```
|
|
254
|
+
*/
|
|
255
|
+
export declare function softFocus(blurAmount?: number): FilterModifier;
|
|
256
|
+
/**
|
|
257
|
+
* High contrast mode for accessibility
|
|
258
|
+
*/
|
|
259
|
+
export declare function highContrastMode(): FilterModifier;
|
|
260
|
+
/**
|
|
261
|
+
* Reduced motion safe blur (very subtle)
|
|
262
|
+
*/
|
|
263
|
+
export declare function subtleBlur(): FilterModifier;
|
|
264
|
+
/**
|
|
265
|
+
* Dark mode invert filter
|
|
266
|
+
*/
|
|
267
|
+
export declare function darkModeInvert(): FilterModifier;
|
|
268
|
+
/**
|
|
269
|
+
* SwiftUI-compatible colorInvert modifier (full color inversion)
|
|
270
|
+
*
|
|
271
|
+
* @example
|
|
272
|
+
* ```typescript
|
|
273
|
+
* .colorInvert() // Full color inversion (equivalent to .invert(1))
|
|
274
|
+
* ```
|
|
275
|
+
*/
|
|
276
|
+
export declare function colorInvert(): FilterModifier;
|
|
277
|
+
/**
|
|
278
|
+
* SwiftUI-compatible saturation modifier (alias for saturate)
|
|
279
|
+
*
|
|
280
|
+
* @example
|
|
281
|
+
* ```typescript
|
|
282
|
+
* .saturation(1.5) // 50% more saturated
|
|
283
|
+
* .saturation(0) // Completely desaturated (grayscale)
|
|
284
|
+
* ```
|
|
285
|
+
*/
|
|
286
|
+
export declare function saturation(amount: number): FilterModifier;
|
|
287
|
+
/**
|
|
288
|
+
* SwiftUI-compatible hueRotation modifier (alias for hueRotate)
|
|
289
|
+
*
|
|
290
|
+
* @example
|
|
291
|
+
* ```typescript
|
|
292
|
+
* .hueRotation('90deg') // Rotate hue by 90 degrees
|
|
293
|
+
* .hueRotation('0.25turn') // Quarter turn hue rotation
|
|
294
|
+
* ```
|
|
295
|
+
*/
|
|
296
|
+
export declare function hueRotation(angle: string): FilterModifier;
|
|
297
|
+
//# sourceMappingURL=index.d.ts.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/effects/filters/index.ts"],"names":[],"mappings":"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"}
|
|
@@ -0,0 +1,234 @@
|
|
|
1
|
+
var a = Object.defineProperty;
|
|
2
|
+
var c = (t, n, s) => n in t ? a(t, n, { enumerable: !0, configurable: !0, writable: !0, value: s }) : t[n] = s;
|
|
3
|
+
var u = (t, n, s) => c(t, typeof n != "symbol" ? n + "" : n, s);
|
|
4
|
+
import { BaseModifier as f } from "@tachui/core/modifiers/base";
|
|
5
|
+
class e extends f {
|
|
6
|
+
constructor(s) {
|
|
7
|
+
const r = {};
|
|
8
|
+
for (const [o, i] of Object.entries(s))
|
|
9
|
+
typeof i == "function" && "peek" in i ? r[o] = i.peek() : r[o] = i;
|
|
10
|
+
super(r);
|
|
11
|
+
u(this, "type", "filter");
|
|
12
|
+
u(this, "priority", 30);
|
|
13
|
+
}
|
|
14
|
+
apply(s, r) {
|
|
15
|
+
if (!r.element) return;
|
|
16
|
+
const o = this.computeFilterStyles(this.properties);
|
|
17
|
+
this.applyStyles(r.element, o);
|
|
18
|
+
}
|
|
19
|
+
computeFilterStyles(s) {
|
|
20
|
+
const r = {};
|
|
21
|
+
if (s.filter) {
|
|
22
|
+
const o = typeof s.filter == "string" ? s.filter : this.generateFilterCSS(s.filter);
|
|
23
|
+
r.filter = o;
|
|
24
|
+
}
|
|
25
|
+
return r;
|
|
26
|
+
}
|
|
27
|
+
generateFilterCSS(s) {
|
|
28
|
+
const r = [];
|
|
29
|
+
return Object.entries(s).forEach(([o, i]) => {
|
|
30
|
+
switch (o) {
|
|
31
|
+
case "blur":
|
|
32
|
+
r.push(`blur(${i}px)`);
|
|
33
|
+
break;
|
|
34
|
+
case "brightness":
|
|
35
|
+
r.push(`brightness(${i})`);
|
|
36
|
+
break;
|
|
37
|
+
case "contrast":
|
|
38
|
+
r.push(`contrast(${i})`);
|
|
39
|
+
break;
|
|
40
|
+
case "saturate":
|
|
41
|
+
r.push(`saturate(${i})`);
|
|
42
|
+
break;
|
|
43
|
+
case "sepia":
|
|
44
|
+
r.push(`sepia(${i})`);
|
|
45
|
+
break;
|
|
46
|
+
case "hueRotate":
|
|
47
|
+
r.push(`hue-rotate(${i})`);
|
|
48
|
+
break;
|
|
49
|
+
case "invert":
|
|
50
|
+
r.push(`invert(${i})`);
|
|
51
|
+
break;
|
|
52
|
+
case "opacity":
|
|
53
|
+
r.push(`opacity(${i})`);
|
|
54
|
+
break;
|
|
55
|
+
case "dropShadow":
|
|
56
|
+
r.push(`drop-shadow(${i})`);
|
|
57
|
+
break;
|
|
58
|
+
case "grayscale":
|
|
59
|
+
r.push(`grayscale(${i})`);
|
|
60
|
+
break;
|
|
61
|
+
}
|
|
62
|
+
}), r.join(" ");
|
|
63
|
+
}
|
|
64
|
+
}
|
|
65
|
+
function g(t) {
|
|
66
|
+
return new e({ filter: t });
|
|
67
|
+
}
|
|
68
|
+
function d(t) {
|
|
69
|
+
return new e({ filter: { blur: t } });
|
|
70
|
+
}
|
|
71
|
+
function y(t) {
|
|
72
|
+
return new e({ filter: { brightness: t } });
|
|
73
|
+
}
|
|
74
|
+
function k(t) {
|
|
75
|
+
return new e({ filter: { contrast: t } });
|
|
76
|
+
}
|
|
77
|
+
function l(t) {
|
|
78
|
+
return new e({ filter: { saturate: t } });
|
|
79
|
+
}
|
|
80
|
+
function S(t) {
|
|
81
|
+
return new e({ filter: { grayscale: t } });
|
|
82
|
+
}
|
|
83
|
+
function $(t) {
|
|
84
|
+
return new e({ filter: { sepia: t } });
|
|
85
|
+
}
|
|
86
|
+
function h(t) {
|
|
87
|
+
return new e({ filter: { hueRotate: t } });
|
|
88
|
+
}
|
|
89
|
+
function m(t) {
|
|
90
|
+
return new e({ filter: { opacity: t } });
|
|
91
|
+
}
|
|
92
|
+
function F(t) {
|
|
93
|
+
return new e({ filter: t });
|
|
94
|
+
}
|
|
95
|
+
function p(t) {
|
|
96
|
+
return new e({ filter: { invert: t } });
|
|
97
|
+
}
|
|
98
|
+
function R(t) {
|
|
99
|
+
return new e({ filter: { dropShadow: t } });
|
|
100
|
+
}
|
|
101
|
+
function M(t = 0.7, n = 1.1) {
|
|
102
|
+
return new e({
|
|
103
|
+
filter: {
|
|
104
|
+
sepia: t,
|
|
105
|
+
contrast: n,
|
|
106
|
+
blur: 0.3
|
|
107
|
+
}
|
|
108
|
+
});
|
|
109
|
+
}
|
|
110
|
+
function j(t = 1.3) {
|
|
111
|
+
return new e({
|
|
112
|
+
filter: {
|
|
113
|
+
grayscale: 1,
|
|
114
|
+
contrast: t
|
|
115
|
+
}
|
|
116
|
+
});
|
|
117
|
+
}
|
|
118
|
+
function v(t = 1.3, n = 1.05) {
|
|
119
|
+
return new e({
|
|
120
|
+
filter: {
|
|
121
|
+
saturate: t,
|
|
122
|
+
contrast: n
|
|
123
|
+
}
|
|
124
|
+
});
|
|
125
|
+
}
|
|
126
|
+
function C(t = "10deg") {
|
|
127
|
+
return new e({
|
|
128
|
+
filter: {
|
|
129
|
+
hueRotate: t,
|
|
130
|
+
brightness: 1.05,
|
|
131
|
+
saturate: 1.1
|
|
132
|
+
}
|
|
133
|
+
});
|
|
134
|
+
}
|
|
135
|
+
function O(t = "-15deg") {
|
|
136
|
+
return new e({
|
|
137
|
+
filter: {
|
|
138
|
+
hueRotate: t,
|
|
139
|
+
brightness: 0.98,
|
|
140
|
+
saturate: 1.05
|
|
141
|
+
}
|
|
142
|
+
});
|
|
143
|
+
}
|
|
144
|
+
function x(t = 0.85, n = 0.75) {
|
|
145
|
+
return new e({
|
|
146
|
+
filter: {
|
|
147
|
+
contrast: t,
|
|
148
|
+
saturate: n,
|
|
149
|
+
brightness: 1.1
|
|
150
|
+
}
|
|
151
|
+
});
|
|
152
|
+
}
|
|
153
|
+
function B(t = 1.2, n = 0.85) {
|
|
154
|
+
return new e({
|
|
155
|
+
filter: {
|
|
156
|
+
brightness: t,
|
|
157
|
+
contrast: n
|
|
158
|
+
}
|
|
159
|
+
});
|
|
160
|
+
}
|
|
161
|
+
function I(t = 0.85, n = 1.3) {
|
|
162
|
+
return new e({
|
|
163
|
+
filter: {
|
|
164
|
+
brightness: t,
|
|
165
|
+
contrast: n
|
|
166
|
+
}
|
|
167
|
+
});
|
|
168
|
+
}
|
|
169
|
+
function K(t = 1) {
|
|
170
|
+
return new e({
|
|
171
|
+
filter: {
|
|
172
|
+
blur: t,
|
|
173
|
+
brightness: 1.05
|
|
174
|
+
}
|
|
175
|
+
});
|
|
176
|
+
}
|
|
177
|
+
function T() {
|
|
178
|
+
return new e({
|
|
179
|
+
filter: {
|
|
180
|
+
contrast: 2,
|
|
181
|
+
brightness: 1.1
|
|
182
|
+
}
|
|
183
|
+
});
|
|
184
|
+
}
|
|
185
|
+
function A() {
|
|
186
|
+
return new e({ filter: { blur: 0.5 } });
|
|
187
|
+
}
|
|
188
|
+
function D() {
|
|
189
|
+
return new e({
|
|
190
|
+
filter: {
|
|
191
|
+
invert: 1,
|
|
192
|
+
hueRotate: "180deg"
|
|
193
|
+
}
|
|
194
|
+
});
|
|
195
|
+
}
|
|
196
|
+
function E() {
|
|
197
|
+
return p(1);
|
|
198
|
+
}
|
|
199
|
+
function P(t) {
|
|
200
|
+
return l(t);
|
|
201
|
+
}
|
|
202
|
+
function V(t) {
|
|
203
|
+
return h(t);
|
|
204
|
+
}
|
|
205
|
+
export {
|
|
206
|
+
e as FilterModifier,
|
|
207
|
+
F as backdropFilter,
|
|
208
|
+
j as blackAndWhite,
|
|
209
|
+
d as blur,
|
|
210
|
+
y as brightness,
|
|
211
|
+
E as colorInvert,
|
|
212
|
+
k as contrast,
|
|
213
|
+
O as coolTone,
|
|
214
|
+
D as darkModeInvert,
|
|
215
|
+
x as faded,
|
|
216
|
+
g as filter,
|
|
217
|
+
R as filterDropShadow,
|
|
218
|
+
S as grayscale,
|
|
219
|
+
T as highContrastMode,
|
|
220
|
+
B as highKey,
|
|
221
|
+
h as hueRotate,
|
|
222
|
+
V as hueRotation,
|
|
223
|
+
p as invert,
|
|
224
|
+
I as lowKey,
|
|
225
|
+
m as opacity,
|
|
226
|
+
l as saturate,
|
|
227
|
+
P as saturation,
|
|
228
|
+
$ as sepia,
|
|
229
|
+
K as softFocus,
|
|
230
|
+
A as subtleBlur,
|
|
231
|
+
v as vibrant,
|
|
232
|
+
M as vintagePhoto,
|
|
233
|
+
C as warmTone
|
|
234
|
+
};
|
|
@@ -0,0 +1,14 @@
|
|
|
1
|
+
/**
|
|
2
|
+
* @tachui/modifiers/effects - Visual effects and advanced modifiers
|
|
3
|
+
*
|
|
4
|
+
* This package provides comprehensive visual effects including filters,
|
|
5
|
+
* transforms, backdrop effects, shadows, and interactive hover effects.
|
|
6
|
+
*
|
|
7
|
+
* Segmented preload: Synchronously imports and registers all effects.
|
|
8
|
+
*/
|
|
9
|
+
export { blur, brightness, contrast, filter, saturate, grayscale, sepia, hueRotate, invert, filterDropShadow, vintagePhoto, blackAndWhite, vibrant, warmTone, coolTone, faded, highKey, lowKey, softFocus, highContrastMode, subtleBlur, darkModeInvert, colorInvert, saturation, hueRotation, } from './filters';
|
|
10
|
+
export { transform, rotate, scale, translate, skew, rotateX, rotateY, rotateZ, perspective, advancedTransform, matrix, matrix3d, rotate3d, scale3d, translate3d, scaleX, scaleY, scaleZ, translateX, translateY, translateZ, perspectiveOrigin, transformStyle, backfaceVisibility, } from './transforms';
|
|
11
|
+
export { shadow, textShadow, dropShadow, insetShadow, elevationShadow, glowEffect, neonEffect, neumorphism, neumorphismPressed, layeredShadow, textShadowSubtle, textShadowStrong, textOutline, textEmbossed, textEngraved, swiftUIShadow, reactiveShadow, animatedShadow, } from './shadows';
|
|
12
|
+
export { hover, active, focus, pressed, hoverEffect, hoverWithTransition, conditionalHover, interactiveCursor, draggableCursor, textCursor, disabledCursor, loadingCursor, helpCursor, zoomCursor, buttonHover, cardHover, linkHover, imageHover, } from './effects';
|
|
13
|
+
export { backdropFilter, glassmorphism, customGlassmorphism } from './backdrop';
|
|
14
|
+
//# sourceMappingURL=index.d.ts.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/effects/index.ts"],"names":[],"mappings":"AAAA;;;;;;;GAOG;AAmNH,OAAO,EACL,IAAI,EACJ,UAAU,EACV,QAAQ,EACR,MAAM,EACN,QAAQ,EACR,SAAS,EACT,KAAK,EACL,SAAS,EACT,MAAM,EACN,gBAAgB,EAChB,YAAY,EACZ,aAAa,EACb,OAAO,EACP,QAAQ,EACR,QAAQ,EACR,KAAK,EACL,OAAO,EACP,MAAM,EACN,SAAS,EACT,gBAAgB,EAChB,UAAU,EACV,cAAc,EACd,WAAW,EACX,UAAU,EACV,WAAW,GACZ,MAAM,WAAW,CAAA;AAClB,OAAO,EACL,SAAS,EACT,MAAM,EACN,KAAK,EACL,SAAS,EACT,IAAI,EACJ,OAAO,EACP,OAAO,EACP,OAAO,EACP,WAAW,EACX,iBAAiB,EACjB,MAAM,EACN,QAAQ,EACR,QAAQ,EACR,OAAO,EACP,WAAW,EACX,MAAM,EACN,MAAM,EACN,MAAM,EACN,UAAU,EACV,UAAU,EACV,UAAU,EACV,iBAAiB,EACjB,cAAc,EACd,kBAAkB,GACnB,MAAM,cAAc,CAAA;AACrB,OAAO,EACL,MAAM,EACN,UAAU,EACV,UAAU,EACV,WAAW,EACX,eAAe,EACf,UAAU,EACV,UAAU,EACV,WAAW,EACX,kBAAkB,EAClB,aAAa,EACb,gBAAgB,EAChB,gBAAgB,EAChB,WAAW,EACX,YAAY,EACZ,YAAY,EACZ,aAAa,EACb,cAAc,EACd,cAAc,GACf,MAAM,WAAW,CAAA;AAClB,OAAO,EACL,KAAK,EACL,MAAM,EACN,KAAK,EACL,OAAO,EACP,WAAW,EACX,mBAAmB,EACnB,gBAAgB,EAChB,iBAAiB,EACjB,eAAe,EACf,UAAU,EACV,cAAc,EACd,aAAa,EACb,UAAU,EACV,UAAU,EACV,WAAW,EACX,SAAS,EACT,SAAS,EACT,UAAU,GACX,MAAM,WAAW,CAAA;AAClB,OAAO,EAAE,cAAc,EAAE,aAAa,EAAE,mBAAmB,EAAE,MAAM,YAAY,CAAA"}
|