@ansh-ui/react 0.2.0
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/LICENSE +21 -0
- package/dist/chunk-5CFQFMP5.js +178 -0
- package/dist/chunk-5CFQFMP5.js.map +1 -0
- package/dist/chunk-6VRF7X5C.cjs +164 -0
- package/dist/chunk-6VRF7X5C.cjs.map +1 -0
- package/dist/chunk-AVPEA5PB.cjs +718 -0
- package/dist/chunk-AVPEA5PB.cjs.map +1 -0
- package/dist/chunk-C32LKF23.cjs +198 -0
- package/dist/chunk-C32LKF23.cjs.map +1 -0
- package/dist/chunk-C5JG6TMM.cjs +1200 -0
- package/dist/chunk-C5JG6TMM.cjs.map +1 -0
- package/dist/chunk-DATBU46V.cjs +614 -0
- package/dist/chunk-DATBU46V.cjs.map +1 -0
- package/dist/chunk-EGG4CP7C.js +320 -0
- package/dist/chunk-EGG4CP7C.js.map +1 -0
- package/dist/chunk-H34OXXJU.js +55 -0
- package/dist/chunk-H34OXXJU.js.map +1 -0
- package/dist/chunk-HO2YSF5O.js +187 -0
- package/dist/chunk-HO2YSF5O.js.map +1 -0
- package/dist/chunk-HPGCILO4.js +760 -0
- package/dist/chunk-HPGCILO4.js.map +1 -0
- package/dist/chunk-IBXLC5IE.js +154 -0
- package/dist/chunk-IBXLC5IE.js.map +1 -0
- package/dist/chunk-LDCZQP3R.js +1185 -0
- package/dist/chunk-LDCZQP3R.js.map +1 -0
- package/dist/chunk-LXCIXR5T.js +27 -0
- package/dist/chunk-LXCIXR5T.js.map +1 -0
- package/dist/chunk-O2PX54KX.js +94 -0
- package/dist/chunk-O2PX54KX.js.map +1 -0
- package/dist/chunk-OHBWBXLO.cjs +101 -0
- package/dist/chunk-OHBWBXLO.cjs.map +1 -0
- package/dist/chunk-OJN5JBNP.cjs +776 -0
- package/dist/chunk-OJN5JBNP.cjs.map +1 -0
- package/dist/chunk-OLTS6G5M.js +606 -0
- package/dist/chunk-OLTS6G5M.js.map +1 -0
- package/dist/chunk-PO5DU3FU.cjs +29 -0
- package/dist/chunk-PO5DU3FU.cjs.map +1 -0
- package/dist/chunk-QO3E7TJS.js +2940 -0
- package/dist/chunk-QO3E7TJS.js.map +1 -0
- package/dist/chunk-RHTLNSVW.cjs +2976 -0
- package/dist/chunk-RHTLNSVW.cjs.map +1 -0
- package/dist/chunk-SFU5EPSN.cjs +61 -0
- package/dist/chunk-SFU5EPSN.cjs.map +1 -0
- package/dist/chunk-T4AK2KLM.js +699 -0
- package/dist/chunk-T4AK2KLM.js.map +1 -0
- package/dist/chunk-WGYNCSTP.cjs +333 -0
- package/dist/chunk-WGYNCSTP.cjs.map +1 -0
- package/dist/chunk-XEP6P7E6.js +279 -0
- package/dist/chunk-XEP6P7E6.js.map +1 -0
- package/dist/chunk-XMXECSQO.cjs +286 -0
- package/dist/chunk-XMXECSQO.cjs.map +1 -0
- package/dist/chunk-ZWAFLHC2.cjs +181 -0
- package/dist/chunk-ZWAFLHC2.cjs.map +1 -0
- package/dist/data.cjs +71 -0
- package/dist/data.cjs.map +1 -0
- package/dist/data.d.cts +316 -0
- package/dist/data.d.ts +316 -0
- package/dist/data.js +6 -0
- package/dist/data.js.map +1 -0
- package/dist/form.cjs +153 -0
- package/dist/form.cjs.map +1 -0
- package/dist/form.d.cts +660 -0
- package/dist/form.d.ts +660 -0
- package/dist/form.js +8 -0
- package/dist/form.js.map +1 -0
- package/dist/index.cjs +1641 -0
- package/dist/index.cjs.map +1 -0
- package/dist/index.d.cts +552 -0
- package/dist/index.d.ts +552 -0
- package/dist/index.js +956 -0
- package/dist/index.js.map +1 -0
- package/dist/layout.cjs +68 -0
- package/dist/layout.cjs.map +1 -0
- package/dist/layout.d.cts +169 -0
- package/dist/layout.d.ts +169 -0
- package/dist/layout.js +7 -0
- package/dist/layout.js.map +1 -0
- package/dist/motion-CQmCq6_k.d.ts +395 -0
- package/dist/motion-CSX4g2N8.d.cts +395 -0
- package/dist/motion.cjs +79 -0
- package/dist/motion.cjs.map +1 -0
- package/dist/motion.d.cts +4 -0
- package/dist/motion.d.ts +4 -0
- package/dist/motion.js +6 -0
- package/dist/motion.js.map +1 -0
- package/dist/navigation.cjs +48 -0
- package/dist/navigation.cjs.map +1 -0
- package/dist/navigation.d.cts +210 -0
- package/dist/navigation.d.ts +210 -0
- package/dist/navigation.js +7 -0
- package/dist/navigation.js.map +1 -0
- package/dist/overlay.cjs +69 -0
- package/dist/overlay.cjs.map +1 -0
- package/dist/overlay.d.cts +330 -0
- package/dist/overlay.d.ts +330 -0
- package/dist/overlay.js +8 -0
- package/dist/overlay.js.map +1 -0
- package/dist/position-DVScKcaa.d.cts +66 -0
- package/dist/position-DVScKcaa.d.ts +66 -0
- package/dist/primitives.cjs +162 -0
- package/dist/primitives.cjs.map +1 -0
- package/dist/primitives.d.cts +294 -0
- package/dist/primitives.d.ts +294 -0
- package/dist/primitives.js +9 -0
- package/dist/primitives.js.map +1 -0
- package/dist/sidebar-D-PafAXw.d.cts +71 -0
- package/dist/sidebar-D-PafAXw.d.ts +71 -0
- package/dist/styles.css +5575 -0
- package/dist/use-observers-B9qtimrk.d.cts +99 -0
- package/dist/use-observers-B9qtimrk.d.ts +99 -0
- package/package.json +92 -0
|
@@ -0,0 +1,395 @@
|
|
|
1
|
+
import * as react from 'react';
|
|
2
|
+
import { ReactNode, CSSProperties, ElementType, ForwardRefExoticComponent, ComponentPropsWithoutRef, RefAttributes } from 'react';
|
|
3
|
+
import * as _ansh_ui_core from '@ansh-ui/core';
|
|
4
|
+
import { EasingInput, SpringOptions, springs, StaggerFrom, resolvePalette, BaseBehaviourOptions, BehaviourDefinition, ReducedMotionMode } from '@ansh-ui/core';
|
|
5
|
+
import './use-observers-B9qtimrk.cjs';
|
|
6
|
+
|
|
7
|
+
/**
|
|
8
|
+
* Declarative motion.
|
|
9
|
+
*
|
|
10
|
+
* A deliberately **small** subset of what a full motion library does: transform properties and
|
|
11
|
+
* opacity, animated from `initial` to `animate`, plus hover and press states and an exit animation
|
|
12
|
+
* when paired with `AnimatePresence`.
|
|
13
|
+
*
|
|
14
|
+
* That scope is a decision, not a gap. Layout animation (FLIP), shared-element transitions and
|
|
15
|
+
* variant propagation each need machinery an order of magnitude larger than this file, and a
|
|
16
|
+
* half-implementation of them is worse than none — it works in the demo and fails on the real page.
|
|
17
|
+
* For those, use a dedicated library; for the 90% case of "fade this in, slide that up, spring the
|
|
18
|
+
* card on hover", this costs a fraction of the bundle.
|
|
19
|
+
*
|
|
20
|
+
* Values are written straight to the element's `style` from the ticker's write phase. React never
|
|
21
|
+
* re-renders during an animation.
|
|
22
|
+
*/
|
|
23
|
+
interface MotionValues {
|
|
24
|
+
opacity?: number;
|
|
25
|
+
x?: number;
|
|
26
|
+
y?: number;
|
|
27
|
+
scale?: number;
|
|
28
|
+
scaleX?: number;
|
|
29
|
+
scaleY?: number;
|
|
30
|
+
rotate?: number;
|
|
31
|
+
/** Blur radius in px. */
|
|
32
|
+
blur?: number;
|
|
33
|
+
}
|
|
34
|
+
interface MotionTransition {
|
|
35
|
+
/** Seconds. Ignored when `spring` is set. Default `0.4`. */
|
|
36
|
+
duration?: number;
|
|
37
|
+
/** Seconds to wait. Default `0`. */
|
|
38
|
+
delay?: number;
|
|
39
|
+
easing?: EasingInput;
|
|
40
|
+
/** Use a spring instead of a tween. `true` uses the `smooth` preset. */
|
|
41
|
+
spring?: boolean | SpringOptions | keyof typeof springs;
|
|
42
|
+
}
|
|
43
|
+
type MotionElementProps = {
|
|
44
|
+
as?: ElementType;
|
|
45
|
+
/** Starting values. Applied before the first paint. */
|
|
46
|
+
initial?: MotionValues;
|
|
47
|
+
/** Target values. Changing these animates to the new target. */
|
|
48
|
+
animate?: MotionValues;
|
|
49
|
+
/** Values to animate to when removed by `AnimatePresence`. */
|
|
50
|
+
exit?: MotionValues;
|
|
51
|
+
transition?: MotionTransition;
|
|
52
|
+
whileHover?: MotionValues;
|
|
53
|
+
whileTap?: MotionValues;
|
|
54
|
+
/** Animate to `animate` only once scrolled into view. */
|
|
55
|
+
whileInView?: boolean;
|
|
56
|
+
/** Fraction visible before `whileInView` triggers. Default `0.2`. */
|
|
57
|
+
inViewAmount?: number;
|
|
58
|
+
className?: string;
|
|
59
|
+
style?: CSSProperties;
|
|
60
|
+
children?: ReactNode;
|
|
61
|
+
};
|
|
62
|
+
/**
|
|
63
|
+
* An animated element.
|
|
64
|
+
*
|
|
65
|
+
* ```tsx
|
|
66
|
+
* <Motion initial={{ opacity: 0, y: 24 }} animate={{ opacity: 1, y: 0 }} whileInView>
|
|
67
|
+
* <Card />
|
|
68
|
+
* </Motion>
|
|
69
|
+
* ```
|
|
70
|
+
*/
|
|
71
|
+
declare function Motion({ as: Component, initial, animate: target, exit: _exit, transition, whileHover, whileTap, whileInView, inViewAmount, className, style, children, ...rest }: MotionElementProps & Record<string, unknown>): react.JSX.Element;
|
|
72
|
+
interface AnimatePresenceProps {
|
|
73
|
+
children: ReactNode;
|
|
74
|
+
/** Seconds to keep a removed child mounted. Default `0.35`. */
|
|
75
|
+
exitDuration?: number;
|
|
76
|
+
}
|
|
77
|
+
/**
|
|
78
|
+
* Keep removed children mounted long enough to animate out.
|
|
79
|
+
*
|
|
80
|
+
* React unmounts immediately when a child disappears from the tree, so an exit animation never gets
|
|
81
|
+
* a chance to run. This holds departing children in its own state, plays their `exit` values, then
|
|
82
|
+
* drops them.
|
|
83
|
+
*
|
|
84
|
+
* Children **must** have stable `key`s — that is how removals are detected at all. Without keys,
|
|
85
|
+
* React reuses element positions and this sees no removal to animate.
|
|
86
|
+
*/
|
|
87
|
+
declare function AnimatePresence({ children, exitDuration }: AnimatePresenceProps): react.JSX.Element;
|
|
88
|
+
interface DraggableProps {
|
|
89
|
+
/** Constrain movement. */
|
|
90
|
+
axis?: 'x' | 'y' | 'both';
|
|
91
|
+
/** Bounds relative to the starting position, in px. */
|
|
92
|
+
bounds?: {
|
|
93
|
+
left?: number;
|
|
94
|
+
right?: number;
|
|
95
|
+
top?: number;
|
|
96
|
+
bottom?: number;
|
|
97
|
+
};
|
|
98
|
+
/** Spring back to the origin on release. */
|
|
99
|
+
snapBack?: boolean;
|
|
100
|
+
/** Carry momentum after release. Default `true` when not snapping back. */
|
|
101
|
+
momentum?: boolean;
|
|
102
|
+
onDragStart?: () => void;
|
|
103
|
+
onDragEnd?: (offset: {
|
|
104
|
+
x: number;
|
|
105
|
+
y: number;
|
|
106
|
+
}) => void;
|
|
107
|
+
className?: string;
|
|
108
|
+
style?: CSSProperties;
|
|
109
|
+
children: ReactNode;
|
|
110
|
+
}
|
|
111
|
+
/**
|
|
112
|
+
* A draggable surface with inertia.
|
|
113
|
+
*
|
|
114
|
+
* The momentum on release is what separates a drag that feels physical from one that stops dead.
|
|
115
|
+
* Velocity is measured over the last few pointer samples rather than the last two — a single pair
|
|
116
|
+
* of events is dominated by whatever jitter the final sample had, which produces a flick in the
|
|
117
|
+
* wrong direction often enough to be noticeable.
|
|
118
|
+
*/
|
|
119
|
+
declare function Draggable({ axis, bounds, snapBack, momentum, onDragStart, onDragEnd, className, style, children, }: DraggableProps): react.JSX.Element;
|
|
120
|
+
|
|
121
|
+
interface GradientTextProps {
|
|
122
|
+
children: string;
|
|
123
|
+
/** Any number of colours, or a built-in palette name. */
|
|
124
|
+
colors?: readonly string[] | Parameters<typeof resolvePalette>[0];
|
|
125
|
+
/** Gradient angle in degrees. Default `100`. */
|
|
126
|
+
angle?: number;
|
|
127
|
+
/** Seconds for one full cycle. `0` holds a static gradient. Default `0` (static). */
|
|
128
|
+
duration?: number;
|
|
129
|
+
/** Interpolated stops handed to CSS. More is smoother. Default `16`. */
|
|
130
|
+
stops?: number;
|
|
131
|
+
as?: ElementType;
|
|
132
|
+
className?: string;
|
|
133
|
+
style?: React.CSSProperties;
|
|
134
|
+
}
|
|
135
|
+
/**
|
|
136
|
+
* Text filled with a perceptual gradient.
|
|
137
|
+
*
|
|
138
|
+
* Uses `background-clip: text`, and the stops are generated through the OKLab interpolator rather
|
|
139
|
+
* than handed to CSS as two endpoints. That is the whole point: a CSS
|
|
140
|
+
* `linear-gradient(#0275f4, #9f0550)` passes through a desaturated grey-brown at its midpoint,
|
|
141
|
+
* which on text — where the gradient crosses a narrow band — is exactly where the eye lands.
|
|
142
|
+
*
|
|
143
|
+
* Animation is a CSS `background-position` shift rather than a JS loop, because for a single
|
|
144
|
+
* property with no interaction the browser's own compositor is strictly better than anything we
|
|
145
|
+
* could do on the main thread.
|
|
146
|
+
*/
|
|
147
|
+
declare function GradientText({ children, colors, angle, duration, stops, as: Component, className, style, }: GradientTextProps): react.JSX.Element;
|
|
148
|
+
interface AnimatedTextProps {
|
|
149
|
+
children: string;
|
|
150
|
+
/** Split granularity. Default `'chars'`. */
|
|
151
|
+
by?: 'chars' | 'words';
|
|
152
|
+
/** Seconds per unit's animation. Default `0.6`. */
|
|
153
|
+
duration?: number;
|
|
154
|
+
/** Seconds between units. Default `0.03`. */
|
|
155
|
+
each?: number;
|
|
156
|
+
/** Where the reveal wave begins. Default `'first'`. */
|
|
157
|
+
from?: StaggerFrom;
|
|
158
|
+
easing?: EasingInput;
|
|
159
|
+
/** Distance each unit travels into place, in pixels. Default `18`. */
|
|
160
|
+
distance?: number;
|
|
161
|
+
/** Starting blur in pixels — the "focus in" look. Default `0`. */
|
|
162
|
+
blur?: number;
|
|
163
|
+
/** Starting rotation in degrees. Default `0`. */
|
|
164
|
+
rotate?: number;
|
|
165
|
+
/** Clip each unit so it rises from behind a mask. Default `false`. */
|
|
166
|
+
mask?: boolean;
|
|
167
|
+
/** Wait until scrolled into view. Default `true`. */
|
|
168
|
+
whenInView?: boolean;
|
|
169
|
+
/** Replay every time it re-enters the viewport. Default `false`. */
|
|
170
|
+
repeat?: boolean;
|
|
171
|
+
/** Seconds to wait before starting. Default `0`. */
|
|
172
|
+
delay?: number;
|
|
173
|
+
as?: ElementType;
|
|
174
|
+
className?: string;
|
|
175
|
+
style?: React.CSSProperties;
|
|
176
|
+
onComplete?: () => void;
|
|
177
|
+
}
|
|
178
|
+
/**
|
|
179
|
+
* Text that reveals unit by unit.
|
|
180
|
+
*
|
|
181
|
+
* The split happens in React (so the markup is server-rendered and present in the HTML source for
|
|
182
|
+
* SEO and for no-JS readers) while the animation runs on the shared ticker (so a page full of these
|
|
183
|
+
* shares one clock and cannot drift).
|
|
184
|
+
*
|
|
185
|
+
* Under `prefers-reduced-motion` the text renders in its final state immediately — no hidden
|
|
186
|
+
* frame, no fade.
|
|
187
|
+
*/
|
|
188
|
+
declare function AnimatedText({ children, by, duration, each, from, easing, distance, blur, rotate, mask, whenInView, repeat, delay, as: Component, className, style, onComplete, }: AnimatedTextProps): react.JSX.Element;
|
|
189
|
+
|
|
190
|
+
/**
|
|
191
|
+
* Turn a {@link BehaviourDefinition} into a React component.
|
|
192
|
+
*
|
|
193
|
+
* The DOM counterpart of {@link import('./create-effect-component').createEffectComponent}. The
|
|
194
|
+
* difference in the API is deliberate and small: a behaviour component renders its children
|
|
195
|
+
* *directly* rather than wrapping them in a positioned layer, because a behaviour manipulates the
|
|
196
|
+
* host element itself and inserting a wrapper would break the author's layout.
|
|
197
|
+
*
|
|
198
|
+
* ```tsx
|
|
199
|
+
* export const MagneticButton = createBehaviourComponent(magnetic, 'MagneticButton', 'button')
|
|
200
|
+
* ```
|
|
201
|
+
*/
|
|
202
|
+
interface BehaviourComponentBaseProps {
|
|
203
|
+
as?: ElementType;
|
|
204
|
+
className?: string;
|
|
205
|
+
style?: React.CSSProperties;
|
|
206
|
+
children?: ReactNode;
|
|
207
|
+
}
|
|
208
|
+
type BehaviourComponentProps<Options extends BaseBehaviourOptions> = Options & BehaviourComponentBaseProps & Omit<ComponentPropsWithoutRef<'div'>, keyof Options | 'style' | 'className' | 'children'> &
|
|
209
|
+
/**
|
|
210
|
+
* Attributes that only make sense on the elements `as` is actually used with.
|
|
211
|
+
*
|
|
212
|
+
* `as="a"` without this is a type error on `href`, which makes the prop useless for the case it
|
|
213
|
+
* exists for — turning a magnetic button into a link. Full polymorphic typing (`as` as a generic
|
|
214
|
+
* that rewrites the whole prop set) is the textbook answer and it collapses inference for every
|
|
215
|
+
* behaviour option in the intersection, producing error messages nobody can read. Naming the two
|
|
216
|
+
* element types `as` is realistically pointed at is the trade that keeps both working.
|
|
217
|
+
*/
|
|
218
|
+
Partial<Pick<ComponentPropsWithoutRef<'a'>, 'href' | 'target' | 'rel' | 'download'>> & Partial<Pick<ComponentPropsWithoutRef<'button'>, 'type' | 'disabled' | 'form' | 'name' | 'value'>>;
|
|
219
|
+
/** The type of a component produced by {@link createBehaviourComponent}. */
|
|
220
|
+
type BehaviourComponent<Options extends BaseBehaviourOptions, El extends HTMLElement = HTMLElement> = ForwardRefExoticComponent<BehaviourComponentProps<Options> & RefAttributes<El>>;
|
|
221
|
+
declare function createBehaviourComponent<Options extends BaseBehaviourOptions, El extends HTMLElement = HTMLElement>(definition: BehaviourDefinition<Options, El>, displayName?: string, defaultElement?: ElementType): BehaviourComponent<Options, El>;
|
|
222
|
+
/**
|
|
223
|
+
* Attach a behaviour to an element you already have a ref to.
|
|
224
|
+
*
|
|
225
|
+
* The hook form, for when a component's own element must carry the behaviour rather than being
|
|
226
|
+
* wrapped — which is most of the time when integrating with an existing design system.
|
|
227
|
+
*
|
|
228
|
+
* ```tsx
|
|
229
|
+
* const ref = useRef<HTMLButtonElement>(null)
|
|
230
|
+
* useBehaviour(ref, magnetic, { strength: 16 })
|
|
231
|
+
* ```
|
|
232
|
+
*/
|
|
233
|
+
declare function useBehaviour<Options extends BaseBehaviourOptions, El extends HTMLElement>(ref: React.RefObject<El | null>, definition: BehaviourDefinition<Options, El>, options?: Partial<Options>): void;
|
|
234
|
+
|
|
235
|
+
interface MotionConfigValue {
|
|
236
|
+
reducedMotion: ReducedMotionMode;
|
|
237
|
+
/** Global playback rate. `0.5` is slow motion across every animation on the page. */
|
|
238
|
+
timeScale: number;
|
|
239
|
+
/** Pin adaptive quality, or `null` to let the frame budget decide. */
|
|
240
|
+
quality: number | null;
|
|
241
|
+
}
|
|
242
|
+
interface MotionConfigProps extends Partial<MotionConfigValue> {
|
|
243
|
+
/**
|
|
244
|
+
* Pause every animation while the document is hidden. Default `true`.
|
|
245
|
+
*
|
|
246
|
+
* Leave this on. Animating a background tab burns battery and spins fans for output nobody can
|
|
247
|
+
* see, and it is the most common performance complaint about animation-heavy sites.
|
|
248
|
+
*/
|
|
249
|
+
pauseWhenHidden?: boolean;
|
|
250
|
+
/** Also pause when the window loses focus. Default `false` — a visible unfocused window still
|
|
251
|
+
* expects to animate. */
|
|
252
|
+
pauseWhenBlurred?: boolean;
|
|
253
|
+
/** Reduce quality on low battery where the platform exposes it. Default `true`. */
|
|
254
|
+
respectBattery?: boolean;
|
|
255
|
+
children?: ReactNode;
|
|
256
|
+
}
|
|
257
|
+
/**
|
|
258
|
+
* Application-level motion configuration.
|
|
259
|
+
*
|
|
260
|
+
* Optional — every component works without it. Mount it once at the root when you need
|
|
261
|
+
* app-wide control:
|
|
262
|
+
*
|
|
263
|
+
* ```tsx
|
|
264
|
+
* <MotionConfig reducedMotion={userPrefersCalm ? 'always' : 'auto'}>
|
|
265
|
+
* <App />
|
|
266
|
+
* </MotionConfig>
|
|
267
|
+
* ```
|
|
268
|
+
*
|
|
269
|
+
* `reducedMotion="always"` is genuinely useful in production, as the backing for an in-app
|
|
270
|
+
* "reduce motion" setting — many users who want calmer interfaces have never found the OS toggle.
|
|
271
|
+
*/
|
|
272
|
+
declare function MotionConfig({ reducedMotion, timeScale, quality, pauseWhenHidden, pauseWhenBlurred, respectBattery, children, }: MotionConfigProps): react.JSX.Element;
|
|
273
|
+
/** Read the nearest {@link MotionConfig}. Returns sensible defaults with no provider present. */
|
|
274
|
+
declare function useMotionConfig(): MotionConfigValue;
|
|
275
|
+
type ThemeSetting = 'light' | 'dark' | 'system';
|
|
276
|
+
interface ThemeContextValue {
|
|
277
|
+
/** What was requested, including `'system'`. */
|
|
278
|
+
theme: ThemeSetting;
|
|
279
|
+
/** What is actually rendering. `'system'` is resolved to one or the other. */
|
|
280
|
+
resolved: 'light' | 'dark';
|
|
281
|
+
setTheme: (theme: ThemeSetting) => void;
|
|
282
|
+
}
|
|
283
|
+
interface ThemeProviderProps {
|
|
284
|
+
/** Initial setting. Default `'system'`. */
|
|
285
|
+
defaultTheme?: ThemeSetting;
|
|
286
|
+
/** Persist the choice under this `localStorage` key. Pass `null` to disable. Default `'ansh-theme'`. */
|
|
287
|
+
storageKey?: string | null;
|
|
288
|
+
children?: ReactNode;
|
|
289
|
+
}
|
|
290
|
+
/**
|
|
291
|
+
* Theme control over the `@ansh-ui/tokens` stylesheet.
|
|
292
|
+
*
|
|
293
|
+
* Sets `data-theme` on `<html>`, which the token stylesheet already understands. Two details that
|
|
294
|
+
* are easy to get wrong and are handled here:
|
|
295
|
+
*
|
|
296
|
+
* **`'system'` removes the attribute rather than writing a resolved value.** The token stylesheet
|
|
297
|
+
* guards its `prefers-color-scheme` rule with `:root:not([data-theme])`, so removing the attribute
|
|
298
|
+
* hands control back to the OS — and, importantly, means the theme keeps following the OS if the
|
|
299
|
+
* user changes it while the page is open.
|
|
300
|
+
*
|
|
301
|
+
* **The initial render always reports `'light'`.** Reading `localStorage` during render would be a
|
|
302
|
+
* hydration mismatch, since the server has no access to it. The stored value is applied in an
|
|
303
|
+
* effect. To avoid a flash of the wrong theme, ship the small inline script from
|
|
304
|
+
* {@link themeScript} in your document `<head>` — that is the only way to set the attribute before
|
|
305
|
+
* first paint, and it is what every correct implementation does.
|
|
306
|
+
*/
|
|
307
|
+
declare function ThemeProvider({ defaultTheme, storageKey, children, }: ThemeProviderProps): react.JSX.Element;
|
|
308
|
+
declare function useTheme(): ThemeContextValue;
|
|
309
|
+
/**
|
|
310
|
+
* The blocking script that prevents a theme flash.
|
|
311
|
+
*
|
|
312
|
+
* Inject this in `<head>`, before any stylesheet. It reads the stored preference and sets
|
|
313
|
+
* `data-theme` synchronously, before the browser paints — which is the only point at which it can
|
|
314
|
+
* be done without a visible flash. It is deliberately tiny and dependency-free.
|
|
315
|
+
*
|
|
316
|
+
* ```tsx
|
|
317
|
+
* // Next.js app/layout.tsx
|
|
318
|
+
* <head>
|
|
319
|
+
* <script dangerouslySetInnerHTML={{ __html: themeScript() }} />
|
|
320
|
+
* </head>
|
|
321
|
+
* ```
|
|
322
|
+
*/
|
|
323
|
+
declare function themeScript(storageKey?: string): string;
|
|
324
|
+
|
|
325
|
+
/**
|
|
326
|
+
* DOM behaviour components.
|
|
327
|
+
*
|
|
328
|
+
* Unlike the canvas backgrounds these render their children directly — no wrapper, no positioned
|
|
329
|
+
* layer — because a behaviour manipulates the host element and inserting a wrapper would break the
|
|
330
|
+
* author's layout.
|
|
331
|
+
*/
|
|
332
|
+
/**
|
|
333
|
+
* An element that leans toward the pointer, spring-driven.
|
|
334
|
+
*
|
|
335
|
+
* Renders a `<button>` by default so it is keyboard-focusable and announced correctly. Pass
|
|
336
|
+
* `as="a"` or `as="div"` when it isn't a button — but if it *acts* like a button, leave it.
|
|
337
|
+
*
|
|
338
|
+
* ```tsx
|
|
339
|
+
* <MagneticButton strength={16} scale={1.04} onClick={submit}>
|
|
340
|
+
* Get started
|
|
341
|
+
* </MagneticButton>
|
|
342
|
+
* ```
|
|
343
|
+
*/
|
|
344
|
+
declare const MagneticButton: BehaviourComponent<_ansh_ui_core.MagneticOptions, HTMLElement>;
|
|
345
|
+
/**
|
|
346
|
+
* A card that rotates in 3D toward the pointer, with a moving specular highlight.
|
|
347
|
+
*
|
|
348
|
+
* The `perspective()` is baked into the transform as its first function, so no parent wrapper is
|
|
349
|
+
* needed — which is the usual reason tilt implementations come out looking sheared rather than 3D.
|
|
350
|
+
*/
|
|
351
|
+
declare const TiltCard: BehaviourComponent<_ansh_ui_core.TiltOptions, HTMLElement>;
|
|
352
|
+
/**
|
|
353
|
+
* A wave that expands from the point of contact.
|
|
354
|
+
*
|
|
355
|
+
* Also fires on Enter and Space, so keyboard activation gets the same feedback as a click. The
|
|
356
|
+
* ripple layer inherits the host's `border-radius`, so a pill button clips its ripple to a pill
|
|
357
|
+
* with no extra configuration.
|
|
358
|
+
*/
|
|
359
|
+
declare const Ripple: BehaviourComponent<_ansh_ui_core.RippleOptions, HTMLElement>;
|
|
360
|
+
/**
|
|
361
|
+
* Seamless infinite scrolling content.
|
|
362
|
+
*
|
|
363
|
+
* Speed is in **pixels per second**, not a duration, so adding an item to a logo strip doesn't
|
|
364
|
+
* change how fast it scrolls. Content is duplicated as many times as needed to cover the
|
|
365
|
+
* container, and clones are `aria-hidden` so a screen reader reads the list once.
|
|
366
|
+
*
|
|
367
|
+
* ```tsx
|
|
368
|
+
* <Marquee speed={40} fadeEdges={64} pauseOnHover>
|
|
369
|
+
* {logos.map((logo) => <img key={logo.id} src={logo.src} alt={logo.name} />)}
|
|
370
|
+
* </Marquee>
|
|
371
|
+
* ```
|
|
372
|
+
*/
|
|
373
|
+
declare const Marquee: BehaviourComponent<_ansh_ui_core.MarqueeOptions, HTMLElement>;
|
|
374
|
+
/**
|
|
375
|
+
* Reveal content as it enters the viewport.
|
|
376
|
+
*
|
|
377
|
+
* The hidden starting state is applied **in JavaScript**, not CSS. If the script never runs, the
|
|
378
|
+
* content is simply visible — degraded but readable. A CSS-hidden initial state means content that
|
|
379
|
+
* is permanently invisible when JavaScript fails, which has shipped to production on a lot of
|
|
380
|
+
* marketing sites.
|
|
381
|
+
*
|
|
382
|
+
* Pass `children=".selector"` to stagger descendants instead of revealing the host as one block.
|
|
383
|
+
*/
|
|
384
|
+
declare const ScrollReveal: BehaviourComponent<_ansh_ui_core.ScrollRevealOptions, HTMLElement>;
|
|
385
|
+
/**
|
|
386
|
+
* Move an element at a different rate from the scroll.
|
|
387
|
+
*
|
|
388
|
+
* All measurement happens in the ticker's `read` phase, so fifty parallax elements cost one layout
|
|
389
|
+
* read per frame between them rather than one per scroll event each. Disabled outright under
|
|
390
|
+
* `prefers-reduced-motion` — parallax is the canonical vestibular trigger, and a slow parallax is
|
|
391
|
+
* still parallax.
|
|
392
|
+
*/
|
|
393
|
+
declare const Parallax: BehaviourComponent<_ansh_ui_core.ParallaxOptions, HTMLElement>;
|
|
394
|
+
|
|
395
|
+
export { AnimatePresence as A, type BehaviourComponent as B, Draggable as D, GradientText as G, MagneticButton as M, Parallax as P, Ripple as R, ScrollReveal as S, type ThemeContextValue as T, type AnimatePresenceProps as a, AnimatedText as b, type AnimatedTextProps as c, type BehaviourComponentBaseProps as d, type BehaviourComponentProps as e, type DraggableProps as f, type GradientTextProps as g, Marquee as h, Motion as i, MotionConfig as j, type MotionConfigProps as k, type MotionConfigValue as l, type MotionTransition as m, type MotionValues as n, ThemeProvider as o, type ThemeProviderProps as p, type ThemeSetting as q, TiltCard as r, createBehaviourComponent as s, themeScript as t, useBehaviour as u, useMotionConfig as v, useTheme as w };
|
package/dist/motion.cjs
ADDED
|
@@ -0,0 +1,79 @@
|
|
|
1
|
+
'use client';
|
|
2
|
+
'use strict';
|
|
3
|
+
|
|
4
|
+
var chunkAVPEA5PB_cjs = require('./chunk-AVPEA5PB.cjs');
|
|
5
|
+
var chunk6VRF7X5C_cjs = require('./chunk-6VRF7X5C.cjs');
|
|
6
|
+
require('./chunk-SFU5EPSN.cjs');
|
|
7
|
+
|
|
8
|
+
|
|
9
|
+
|
|
10
|
+
Object.defineProperty(exports, "AnimatePresence", {
|
|
11
|
+
enumerable: true,
|
|
12
|
+
get: function () { return chunkAVPEA5PB_cjs.AnimatePresence; }
|
|
13
|
+
});
|
|
14
|
+
Object.defineProperty(exports, "AnimatedText", {
|
|
15
|
+
enumerable: true,
|
|
16
|
+
get: function () { return chunkAVPEA5PB_cjs.AnimatedText; }
|
|
17
|
+
});
|
|
18
|
+
Object.defineProperty(exports, "Draggable", {
|
|
19
|
+
enumerable: true,
|
|
20
|
+
get: function () { return chunkAVPEA5PB_cjs.Draggable; }
|
|
21
|
+
});
|
|
22
|
+
Object.defineProperty(exports, "GradientText", {
|
|
23
|
+
enumerable: true,
|
|
24
|
+
get: function () { return chunkAVPEA5PB_cjs.GradientText; }
|
|
25
|
+
});
|
|
26
|
+
Object.defineProperty(exports, "MagneticButton", {
|
|
27
|
+
enumerable: true,
|
|
28
|
+
get: function () { return chunkAVPEA5PB_cjs.MagneticButton; }
|
|
29
|
+
});
|
|
30
|
+
Object.defineProperty(exports, "Marquee", {
|
|
31
|
+
enumerable: true,
|
|
32
|
+
get: function () { return chunkAVPEA5PB_cjs.Marquee; }
|
|
33
|
+
});
|
|
34
|
+
Object.defineProperty(exports, "Motion", {
|
|
35
|
+
enumerable: true,
|
|
36
|
+
get: function () { return chunkAVPEA5PB_cjs.Motion; }
|
|
37
|
+
});
|
|
38
|
+
Object.defineProperty(exports, "MotionConfig", {
|
|
39
|
+
enumerable: true,
|
|
40
|
+
get: function () { return chunkAVPEA5PB_cjs.MotionConfig; }
|
|
41
|
+
});
|
|
42
|
+
Object.defineProperty(exports, "Parallax", {
|
|
43
|
+
enumerable: true,
|
|
44
|
+
get: function () { return chunkAVPEA5PB_cjs.Parallax; }
|
|
45
|
+
});
|
|
46
|
+
Object.defineProperty(exports, "Ripple", {
|
|
47
|
+
enumerable: true,
|
|
48
|
+
get: function () { return chunkAVPEA5PB_cjs.Ripple; }
|
|
49
|
+
});
|
|
50
|
+
Object.defineProperty(exports, "ScrollReveal", {
|
|
51
|
+
enumerable: true,
|
|
52
|
+
get: function () { return chunkAVPEA5PB_cjs.ScrollReveal; }
|
|
53
|
+
});
|
|
54
|
+
Object.defineProperty(exports, "ThemeProvider", {
|
|
55
|
+
enumerable: true,
|
|
56
|
+
get: function () { return chunkAVPEA5PB_cjs.ThemeProvider; }
|
|
57
|
+
});
|
|
58
|
+
Object.defineProperty(exports, "TiltCard", {
|
|
59
|
+
enumerable: true,
|
|
60
|
+
get: function () { return chunkAVPEA5PB_cjs.TiltCard; }
|
|
61
|
+
});
|
|
62
|
+
Object.defineProperty(exports, "themeScript", {
|
|
63
|
+
enumerable: true,
|
|
64
|
+
get: function () { return chunkAVPEA5PB_cjs.themeScript; }
|
|
65
|
+
});
|
|
66
|
+
Object.defineProperty(exports, "useMotionConfig", {
|
|
67
|
+
enumerable: true,
|
|
68
|
+
get: function () { return chunkAVPEA5PB_cjs.useMotionConfig; }
|
|
69
|
+
});
|
|
70
|
+
Object.defineProperty(exports, "useTheme", {
|
|
71
|
+
enumerable: true,
|
|
72
|
+
get: function () { return chunkAVPEA5PB_cjs.useTheme; }
|
|
73
|
+
});
|
|
74
|
+
Object.defineProperty(exports, "useMergedRef", {
|
|
75
|
+
enumerable: true,
|
|
76
|
+
get: function () { return chunk6VRF7X5C_cjs.useMergedRef; }
|
|
77
|
+
});
|
|
78
|
+
//# sourceMappingURL=motion.cjs.map
|
|
79
|
+
//# sourceMappingURL=motion.cjs.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"sources":[],"names":[],"mappings":"","file":"motion.cjs"}
|
|
@@ -0,0 +1,4 @@
|
|
|
1
|
+
export { A as AnimatePresence, a as AnimatePresenceProps, b as AnimatedText, c as AnimatedTextProps, D as Draggable, f as DraggableProps, G as GradientText, g as GradientTextProps, M as MagneticButton, h as Marquee, i as Motion, j as MotionConfig, k as MotionConfigProps, l as MotionConfigValue, m as MotionTransition, n as MotionValues, P as Parallax, R as Ripple, S as ScrollReveal, T as ThemeContextValue, o as ThemeProvider, p as ThemeProviderProps, q as ThemeSetting, r as TiltCard, t as themeScript, v as useMotionConfig, w as useTheme } from './motion-CSX4g2N8.cjs';
|
|
2
|
+
export { c as useMergedRef } from './use-observers-B9qtimrk.cjs';
|
|
3
|
+
import 'react';
|
|
4
|
+
import '@ansh-ui/core';
|
package/dist/motion.d.ts
ADDED
|
@@ -0,0 +1,4 @@
|
|
|
1
|
+
export { A as AnimatePresence, a as AnimatePresenceProps, b as AnimatedText, c as AnimatedTextProps, D as Draggable, f as DraggableProps, G as GradientText, g as GradientTextProps, M as MagneticButton, h as Marquee, i as Motion, j as MotionConfig, k as MotionConfigProps, l as MotionConfigValue, m as MotionTransition, n as MotionValues, P as Parallax, R as Ripple, S as ScrollReveal, T as ThemeContextValue, o as ThemeProvider, p as ThemeProviderProps, q as ThemeSetting, r as TiltCard, t as themeScript, v as useMotionConfig, w as useTheme } from './motion-CQmCq6_k.js';
|
|
2
|
+
export { c as useMergedRef } from './use-observers-B9qtimrk.js';
|
|
3
|
+
import 'react';
|
|
4
|
+
import '@ansh-ui/core';
|
package/dist/motion.js
ADDED
|
@@ -0,0 +1,6 @@
|
|
|
1
|
+
'use client';
|
|
2
|
+
export { AnimatePresence, AnimatedText, Draggable, GradientText, MagneticButton, Marquee, Motion, MotionConfig, Parallax, Ripple, ScrollReveal, ThemeProvider, TiltCard, themeScript, useMotionConfig, useTheme } from './chunk-T4AK2KLM.js';
|
|
3
|
+
export { useMergedRef } from './chunk-IBXLC5IE.js';
|
|
4
|
+
import './chunk-H34OXXJU.js';
|
|
5
|
+
//# sourceMappingURL=motion.js.map
|
|
6
|
+
//# sourceMappingURL=motion.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"sources":[],"names":[],"mappings":"","file":"motion.js"}
|
|
@@ -0,0 +1,48 @@
|
|
|
1
|
+
'use client';
|
|
2
|
+
'use strict';
|
|
3
|
+
|
|
4
|
+
var chunkDATBU46V_cjs = require('./chunk-DATBU46V.cjs');
|
|
5
|
+
var chunkZWAFLHC2_cjs = require('./chunk-ZWAFLHC2.cjs');
|
|
6
|
+
require('./chunk-PO5DU3FU.cjs');
|
|
7
|
+
require('./chunk-SFU5EPSN.cjs');
|
|
8
|
+
|
|
9
|
+
|
|
10
|
+
|
|
11
|
+
Object.defineProperty(exports, "Accordion", {
|
|
12
|
+
enumerable: true,
|
|
13
|
+
get: function () { return chunkDATBU46V_cjs.Accordion; }
|
|
14
|
+
});
|
|
15
|
+
Object.defineProperty(exports, "Breadcrumbs", {
|
|
16
|
+
enumerable: true,
|
|
17
|
+
get: function () { return chunkDATBU46V_cjs.Breadcrumbs; }
|
|
18
|
+
});
|
|
19
|
+
Object.defineProperty(exports, "Collapsible", {
|
|
20
|
+
enumerable: true,
|
|
21
|
+
get: function () { return chunkDATBU46V_cjs.Collapsible; }
|
|
22
|
+
});
|
|
23
|
+
Object.defineProperty(exports, "DisclosureList", {
|
|
24
|
+
enumerable: true,
|
|
25
|
+
get: function () { return chunkDATBU46V_cjs.DisclosureList; }
|
|
26
|
+
});
|
|
27
|
+
Object.defineProperty(exports, "NavigationMenu", {
|
|
28
|
+
enumerable: true,
|
|
29
|
+
get: function () { return chunkDATBU46V_cjs.NavigationMenu; }
|
|
30
|
+
});
|
|
31
|
+
Object.defineProperty(exports, "Stepper", {
|
|
32
|
+
enumerable: true,
|
|
33
|
+
get: function () { return chunkDATBU46V_cjs.Stepper; }
|
|
34
|
+
});
|
|
35
|
+
Object.defineProperty(exports, "Tabs", {
|
|
36
|
+
enumerable: true,
|
|
37
|
+
get: function () { return chunkDATBU46V_cjs.Tabs; }
|
|
38
|
+
});
|
|
39
|
+
Object.defineProperty(exports, "AppShell", {
|
|
40
|
+
enumerable: true,
|
|
41
|
+
get: function () { return chunkZWAFLHC2_cjs.AppShell; }
|
|
42
|
+
});
|
|
43
|
+
Object.defineProperty(exports, "Sidebar", {
|
|
44
|
+
enumerable: true,
|
|
45
|
+
get: function () { return chunkZWAFLHC2_cjs.Sidebar; }
|
|
46
|
+
});
|
|
47
|
+
//# sourceMappingURL=navigation.cjs.map
|
|
48
|
+
//# sourceMappingURL=navigation.cjs.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"sources":[],"names":[],"mappings":"","file":"navigation.cjs"}
|