@humanspeak/svelte-motion 0.1.32 → 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.
Files changed (7) hide show
  1. package/dist/index.d.ts +170 -2
  2. package/dist/index.js +171 -3
  3. package/dist/motion.d.ts +2 -0
  4. package/dist/motion.js +3 -0
  5. package/dist/vite.d.ts +36 -0
  6. package/dist/vite.js +343 -0
  7. package/package.json +26 -18
package/dist/index.d.ts CHANGED
@@ -1,7 +1,6 @@
1
1
  import AnimatePresence from './components/AnimatePresence.svelte';
2
2
  import MotionConfig from './components/MotionConfig.svelte';
3
- import type { MotionComponents } from './html/index';
4
- export declare const motion: MotionComponents;
3
+ export { motion } from './motion';
5
4
  export { animate, delay, hover, inView, press, resize, scroll, stagger, transform } from 'motion';
6
5
  export { anticipate, backIn, backInOut, backOut, circIn, circInOut, circOut, cubicBezier, easeIn, easeInOut, easeOut } from 'motion';
7
6
  export { clamp, distance, distance2D, interpolate, mix, pipe, progress, wrap } from 'motion';
@@ -23,3 +22,172 @@ export { styleString } from './utils/styleObject.svelte';
23
22
  export { useTime } from './utils/time';
24
23
  export { useTransform } from './utils/transform';
25
24
  export { AnimatePresence, MotionConfig };
25
+ export { default as MotionA } from './html/A.svelte';
26
+ export { default as MotionAbbr } from './html/Abbr.svelte';
27
+ export { default as MotionAddress } from './html/Address.svelte';
28
+ export { default as MotionAnimateElement } from './html/Animate.svelte';
29
+ export { default as MotionAnimatemotion } from './html/Animatemotion.svelte';
30
+ export { default as MotionAnimatetransform } from './html/Animatetransform.svelte';
31
+ export { default as MotionArea } from './html/Area.svelte';
32
+ export { default as MotionArticle } from './html/Article.svelte';
33
+ export { default as MotionAside } from './html/Aside.svelte';
34
+ export { default as MotionAudio } from './html/Audio.svelte';
35
+ export { default as MotionB } from './html/B.svelte';
36
+ export { default as MotionBase } from './html/Base.svelte';
37
+ export { default as MotionBdi } from './html/Bdi.svelte';
38
+ export { default as MotionBdo } from './html/Bdo.svelte';
39
+ export { default as MotionBlockquote } from './html/Blockquote.svelte';
40
+ export { default as MotionBr } from './html/Br.svelte';
41
+ export { default as MotionButton } from './html/Button.svelte';
42
+ export { default as MotionCanvas } from './html/Canvas.svelte';
43
+ export { default as MotionCaption } from './html/Caption.svelte';
44
+ export { default as MotionCircle } from './html/Circle.svelte';
45
+ export { default as MotionCite } from './html/Cite.svelte';
46
+ export { default as MotionClippath } from './html/Clippath.svelte';
47
+ export { default as MotionCode } from './html/Code.svelte';
48
+ export { default as MotionCol } from './html/Col.svelte';
49
+ export { default as MotionColgroup } from './html/Colgroup.svelte';
50
+ export { default as MotionCursor } from './html/Cursor.svelte';
51
+ export { default as MotionData } from './html/Data.svelte';
52
+ export { default as MotionDatalist } from './html/Datalist.svelte';
53
+ export { default as MotionDd } from './html/Dd.svelte';
54
+ export { default as MotionDefs } from './html/Defs.svelte';
55
+ export { default as MotionDel } from './html/Del.svelte';
56
+ export { default as MotionDesc } from './html/Desc.svelte';
57
+ export { default as MotionDetails } from './html/Details.svelte';
58
+ export { default as MotionDfn } from './html/Dfn.svelte';
59
+ export { default as MotionDialog } from './html/Dialog.svelte';
60
+ export { default as MotionDiv } from './html/Div.svelte';
61
+ export { default as MotionDl } from './html/Dl.svelte';
62
+ export { default as MotionDt } from './html/Dt.svelte';
63
+ export { default as MotionEllipse } from './html/Ellipse.svelte';
64
+ export { default as MotionEm } from './html/Em.svelte';
65
+ export { default as MotionEmbed } from './html/Embed.svelte';
66
+ export { default as MotionFeblend } from './html/Feblend.svelte';
67
+ export { default as MotionFecolormatrix } from './html/Fecolormatrix.svelte';
68
+ export { default as MotionFecomponenttransfer } from './html/Fecomponenttransfer.svelte';
69
+ export { default as MotionFecomposite } from './html/Fecomposite.svelte';
70
+ export { default as MotionFeconvolvematrix } from './html/Feconvolvematrix.svelte';
71
+ export { default as MotionFediffuselighting } from './html/Fediffuselighting.svelte';
72
+ export { default as MotionFedisplacementmap } from './html/Fedisplacementmap.svelte';
73
+ export { default as MotionFedistantlight } from './html/Fedistantlight.svelte';
74
+ export { default as MotionFeflood } from './html/Feflood.svelte';
75
+ export { default as MotionFefunca } from './html/Fefunca.svelte';
76
+ export { default as MotionFefuncb } from './html/Fefuncb.svelte';
77
+ export { default as MotionFefuncg } from './html/Fefuncg.svelte';
78
+ export { default as MotionFefuncr } from './html/Fefuncr.svelte';
79
+ export { default as MotionFegaussianblur } from './html/Fegaussianblur.svelte';
80
+ export { default as MotionFeimage } from './html/Feimage.svelte';
81
+ export { default as MotionFemerge } from './html/Femerge.svelte';
82
+ export { default as MotionFemergenode } from './html/Femergenode.svelte';
83
+ export { default as MotionFemorphology } from './html/Femorphology.svelte';
84
+ export { default as MotionFeoffset } from './html/Feoffset.svelte';
85
+ export { default as MotionFepointlight } from './html/Fepointlight.svelte';
86
+ export { default as MotionFespecularlighting } from './html/Fespecularlighting.svelte';
87
+ export { default as MotionFespotlight } from './html/Fespotlight.svelte';
88
+ export { default as MotionFetile } from './html/Fetile.svelte';
89
+ export { default as MotionFeturbulence } from './html/Feturbulence.svelte';
90
+ export { default as MotionFieldset } from './html/Fieldset.svelte';
91
+ export { default as MotionFigcaption } from './html/Figcaption.svelte';
92
+ export { default as MotionFigure } from './html/Figure.svelte';
93
+ export { default as MotionFilter } from './html/Filter.svelte';
94
+ export { default as MotionFooter } from './html/Footer.svelte';
95
+ export { default as MotionForeignobject } from './html/Foreignobject.svelte';
96
+ export { default as MotionForm } from './html/Form.svelte';
97
+ export { default as MotionG } from './html/G.svelte';
98
+ export { default as MotionH1 } from './html/H1.svelte';
99
+ export { default as MotionH2 } from './html/H2.svelte';
100
+ export { default as MotionH3 } from './html/H3.svelte';
101
+ export { default as MotionH4 } from './html/H4.svelte';
102
+ export { default as MotionH5 } from './html/H5.svelte';
103
+ export { default as MotionH6 } from './html/H6.svelte';
104
+ export { default as MotionHeader } from './html/Header.svelte';
105
+ export { default as MotionHgroup } from './html/Hgroup.svelte';
106
+ export { default as MotionHr } from './html/Hr.svelte';
107
+ export { default as MotionI } from './html/I.svelte';
108
+ export { default as MotionIframe } from './html/Iframe.svelte';
109
+ export { default as MotionImage } from './html/Image.svelte';
110
+ export { default as MotionImg } from './html/Img.svelte';
111
+ export { default as MotionInput } from './html/Input.svelte';
112
+ export { default as MotionIns } from './html/Ins.svelte';
113
+ export { default as MotionKbd } from './html/Kbd.svelte';
114
+ export { default as MotionLabel } from './html/Label.svelte';
115
+ export { default as MotionLegend } from './html/Legend.svelte';
116
+ export { default as MotionLi } from './html/Li.svelte';
117
+ export { default as MotionLine } from './html/Line.svelte';
118
+ export { default as MotionLineargradient } from './html/Lineargradient.svelte';
119
+ export { default as MotionMain } from './html/Main.svelte';
120
+ export { default as MotionMap } from './html/Map.svelte';
121
+ export { default as MotionMark } from './html/Mark.svelte';
122
+ export { default as MotionMarker } from './html/Marker.svelte';
123
+ export { default as MotionMask } from './html/Mask.svelte';
124
+ export { default as MotionMath } from './html/Math.svelte';
125
+ export { default as MotionMenu } from './html/Menu.svelte';
126
+ export { default as MotionMetadata } from './html/Metadata.svelte';
127
+ export { default as MotionMeter } from './html/Meter.svelte';
128
+ export { default as MotionMpath } from './html/Mpath.svelte';
129
+ export { default as MotionNav } from './html/Nav.svelte';
130
+ export { default as MotionNoscript } from './html/Noscript.svelte';
131
+ export { default as MotionObject } from './html/Object.svelte';
132
+ export { default as MotionOl } from './html/Ol.svelte';
133
+ export { default as MotionOptgroup } from './html/Optgroup.svelte';
134
+ export { default as MotionOption } from './html/Option.svelte';
135
+ export { default as MotionOutput } from './html/Output.svelte';
136
+ export { default as MotionP } from './html/P.svelte';
137
+ export { default as MotionPath } from './html/Path.svelte';
138
+ export { default as MotionPattern } from './html/Pattern.svelte';
139
+ export { default as MotionPicture } from './html/Picture.svelte';
140
+ export { default as MotionPolygon } from './html/Polygon.svelte';
141
+ export { default as MotionPolyline } from './html/Polyline.svelte';
142
+ export { default as MotionPre } from './html/Pre.svelte';
143
+ export { default as MotionProgress } from './html/Progress.svelte';
144
+ export { default as MotionQ } from './html/Q.svelte';
145
+ export { default as MotionRadialgradient } from './html/Radialgradient.svelte';
146
+ export { default as MotionRect } from './html/Rect.svelte';
147
+ export { default as MotionRp } from './html/Rp.svelte';
148
+ export { default as MotionRt } from './html/Rt.svelte';
149
+ export { default as MotionRuby } from './html/Ruby.svelte';
150
+ export { default as MotionS } from './html/S.svelte';
151
+ export { default as MotionSamp } from './html/Samp.svelte';
152
+ export { default as MotionScript } from './html/Script.svelte';
153
+ export { default as MotionSearch } from './html/Search.svelte';
154
+ export { default as MotionSection } from './html/Section.svelte';
155
+ export { default as MotionSelect } from './html/Select.svelte';
156
+ export { default as MotionSelectedcontent } from './html/Selectedcontent.svelte';
157
+ export { default as MotionSet } from './html/Set.svelte';
158
+ export { default as MotionSlot } from './html/Slot.svelte';
159
+ export { default as MotionSmall } from './html/Small.svelte';
160
+ export { default as MotionSource } from './html/Source.svelte';
161
+ export { default as MotionSpan } from './html/Span.svelte';
162
+ export { default as MotionStop } from './html/Stop.svelte';
163
+ export { default as MotionStrong } from './html/Strong.svelte';
164
+ export { default as MotionStyle } from './html/Style.svelte';
165
+ export { default as MotionSub } from './html/Sub.svelte';
166
+ export { default as MotionSummary } from './html/Summary.svelte';
167
+ export { default as MotionSup } from './html/Sup.svelte';
168
+ export { default as MotionSvg } from './html/Svg.svelte';
169
+ export { default as MotionSwitch } from './html/Switch.svelte';
170
+ export { default as MotionSymbol } from './html/Symbol.svelte';
171
+ export { default as MotionTable } from './html/Table.svelte';
172
+ export { default as MotionTbody } from './html/Tbody.svelte';
173
+ export { default as MotionTd } from './html/Td.svelte';
174
+ export { default as MotionTemplate } from './html/Template.svelte';
175
+ export { default as MotionText } from './html/Text.svelte';
176
+ export { default as MotionTextarea } from './html/Textarea.svelte';
177
+ export { default as MotionTextpath } from './html/Textpath.svelte';
178
+ export { default as MotionTfoot } from './html/Tfoot.svelte';
179
+ export { default as MotionTh } from './html/Th.svelte';
180
+ export { default as MotionThead } from './html/Thead.svelte';
181
+ export { default as MotionTime } from './html/Time.svelte';
182
+ export { default as MotionTitle } from './html/Title.svelte';
183
+ export { default as MotionTr } from './html/Tr.svelte';
184
+ export { default as MotionTrack } from './html/Track.svelte';
185
+ export { default as MotionTref } from './html/Tref.svelte';
186
+ export { default as MotionTspan } from './html/Tspan.svelte';
187
+ export { default as MotionU } from './html/U.svelte';
188
+ export { default as MotionUl } from './html/Ul.svelte';
189
+ export { default as MotionUse } from './html/Use.svelte';
190
+ export { default as MotionVar } from './html/Var.svelte';
191
+ export { default as MotionVideo } from './html/Video.svelte';
192
+ export { default as MotionView } from './html/View.svelte';
193
+ export { default as MotionWbr } from './html/Wbr.svelte';
package/dist/index.js CHANGED
@@ -1,8 +1,6 @@
1
1
  import AnimatePresence from './components/AnimatePresence.svelte';
2
2
  import MotionConfig from './components/MotionConfig.svelte';
3
- import * as html from './html/index';
4
- // Create the motion object with all components
5
- export const motion = Object.fromEntries(Object.entries(html).map(([key, component]) => [key.toLowerCase(), component]));
3
+ export { motion } from './motion';
6
4
  // Re-export core animation functions from motion
7
5
  export { animate, delay, hover, inView, press, resize, scroll, stagger, transform } from 'motion';
8
6
  // Re-export easing functions
@@ -25,3 +23,173 @@ export { styleString } from './utils/styleObject.svelte';
25
23
  export { useTime } from './utils/time';
26
24
  export { useTransform } from './utils/transform';
27
25
  export { AnimatePresence, MotionConfig };
26
+ // Named component exports — tree-shakeable alternative to the `motion` object
27
+ export { default as MotionA } from './html/A.svelte';
28
+ export { default as MotionAbbr } from './html/Abbr.svelte';
29
+ export { default as MotionAddress } from './html/Address.svelte';
30
+ export { default as MotionAnimateElement } from './html/Animate.svelte';
31
+ export { default as MotionAnimatemotion } from './html/Animatemotion.svelte';
32
+ export { default as MotionAnimatetransform } from './html/Animatetransform.svelte';
33
+ export { default as MotionArea } from './html/Area.svelte';
34
+ export { default as MotionArticle } from './html/Article.svelte';
35
+ export { default as MotionAside } from './html/Aside.svelte';
36
+ export { default as MotionAudio } from './html/Audio.svelte';
37
+ export { default as MotionB } from './html/B.svelte';
38
+ export { default as MotionBase } from './html/Base.svelte';
39
+ export { default as MotionBdi } from './html/Bdi.svelte';
40
+ export { default as MotionBdo } from './html/Bdo.svelte';
41
+ export { default as MotionBlockquote } from './html/Blockquote.svelte';
42
+ export { default as MotionBr } from './html/Br.svelte';
43
+ export { default as MotionButton } from './html/Button.svelte';
44
+ export { default as MotionCanvas } from './html/Canvas.svelte';
45
+ export { default as MotionCaption } from './html/Caption.svelte';
46
+ export { default as MotionCircle } from './html/Circle.svelte';
47
+ export { default as MotionCite } from './html/Cite.svelte';
48
+ export { default as MotionClippath } from './html/Clippath.svelte';
49
+ export { default as MotionCode } from './html/Code.svelte';
50
+ export { default as MotionCol } from './html/Col.svelte';
51
+ export { default as MotionColgroup } from './html/Colgroup.svelte';
52
+ export { default as MotionCursor } from './html/Cursor.svelte';
53
+ export { default as MotionData } from './html/Data.svelte';
54
+ export { default as MotionDatalist } from './html/Datalist.svelte';
55
+ export { default as MotionDd } from './html/Dd.svelte';
56
+ export { default as MotionDefs } from './html/Defs.svelte';
57
+ export { default as MotionDel } from './html/Del.svelte';
58
+ export { default as MotionDesc } from './html/Desc.svelte';
59
+ export { default as MotionDetails } from './html/Details.svelte';
60
+ export { default as MotionDfn } from './html/Dfn.svelte';
61
+ export { default as MotionDialog } from './html/Dialog.svelte';
62
+ export { default as MotionDiv } from './html/Div.svelte';
63
+ export { default as MotionDl } from './html/Dl.svelte';
64
+ export { default as MotionDt } from './html/Dt.svelte';
65
+ export { default as MotionEllipse } from './html/Ellipse.svelte';
66
+ export { default as MotionEm } from './html/Em.svelte';
67
+ export { default as MotionEmbed } from './html/Embed.svelte';
68
+ export { default as MotionFeblend } from './html/Feblend.svelte';
69
+ export { default as MotionFecolormatrix } from './html/Fecolormatrix.svelte';
70
+ export { default as MotionFecomponenttransfer } from './html/Fecomponenttransfer.svelte';
71
+ export { default as MotionFecomposite } from './html/Fecomposite.svelte';
72
+ export { default as MotionFeconvolvematrix } from './html/Feconvolvematrix.svelte';
73
+ export { default as MotionFediffuselighting } from './html/Fediffuselighting.svelte';
74
+ export { default as MotionFedisplacementmap } from './html/Fedisplacementmap.svelte';
75
+ export { default as MotionFedistantlight } from './html/Fedistantlight.svelte';
76
+ export { default as MotionFeflood } from './html/Feflood.svelte';
77
+ export { default as MotionFefunca } from './html/Fefunca.svelte';
78
+ export { default as MotionFefuncb } from './html/Fefuncb.svelte';
79
+ export { default as MotionFefuncg } from './html/Fefuncg.svelte';
80
+ export { default as MotionFefuncr } from './html/Fefuncr.svelte';
81
+ export { default as MotionFegaussianblur } from './html/Fegaussianblur.svelte';
82
+ export { default as MotionFeimage } from './html/Feimage.svelte';
83
+ export { default as MotionFemerge } from './html/Femerge.svelte';
84
+ export { default as MotionFemergenode } from './html/Femergenode.svelte';
85
+ export { default as MotionFemorphology } from './html/Femorphology.svelte';
86
+ export { default as MotionFeoffset } from './html/Feoffset.svelte';
87
+ export { default as MotionFepointlight } from './html/Fepointlight.svelte';
88
+ export { default as MotionFespecularlighting } from './html/Fespecularlighting.svelte';
89
+ export { default as MotionFespotlight } from './html/Fespotlight.svelte';
90
+ export { default as MotionFetile } from './html/Fetile.svelte';
91
+ export { default as MotionFeturbulence } from './html/Feturbulence.svelte';
92
+ export { default as MotionFieldset } from './html/Fieldset.svelte';
93
+ export { default as MotionFigcaption } from './html/Figcaption.svelte';
94
+ export { default as MotionFigure } from './html/Figure.svelte';
95
+ export { default as MotionFilter } from './html/Filter.svelte';
96
+ export { default as MotionFooter } from './html/Footer.svelte';
97
+ export { default as MotionForeignobject } from './html/Foreignobject.svelte';
98
+ export { default as MotionForm } from './html/Form.svelte';
99
+ export { default as MotionG } from './html/G.svelte';
100
+ export { default as MotionH1 } from './html/H1.svelte';
101
+ export { default as MotionH2 } from './html/H2.svelte';
102
+ export { default as MotionH3 } from './html/H3.svelte';
103
+ export { default as MotionH4 } from './html/H4.svelte';
104
+ export { default as MotionH5 } from './html/H5.svelte';
105
+ export { default as MotionH6 } from './html/H6.svelte';
106
+ export { default as MotionHeader } from './html/Header.svelte';
107
+ export { default as MotionHgroup } from './html/Hgroup.svelte';
108
+ export { default as MotionHr } from './html/Hr.svelte';
109
+ export { default as MotionI } from './html/I.svelte';
110
+ export { default as MotionIframe } from './html/Iframe.svelte';
111
+ export { default as MotionImage } from './html/Image.svelte';
112
+ export { default as MotionImg } from './html/Img.svelte';
113
+ export { default as MotionInput } from './html/Input.svelte';
114
+ export { default as MotionIns } from './html/Ins.svelte';
115
+ export { default as MotionKbd } from './html/Kbd.svelte';
116
+ export { default as MotionLabel } from './html/Label.svelte';
117
+ export { default as MotionLegend } from './html/Legend.svelte';
118
+ export { default as MotionLi } from './html/Li.svelte';
119
+ export { default as MotionLine } from './html/Line.svelte';
120
+ export { default as MotionLineargradient } from './html/Lineargradient.svelte';
121
+ export { default as MotionMain } from './html/Main.svelte';
122
+ export { default as MotionMap } from './html/Map.svelte';
123
+ export { default as MotionMark } from './html/Mark.svelte';
124
+ export { default as MotionMarker } from './html/Marker.svelte';
125
+ export { default as MotionMask } from './html/Mask.svelte';
126
+ export { default as MotionMath } from './html/Math.svelte';
127
+ export { default as MotionMenu } from './html/Menu.svelte';
128
+ export { default as MotionMetadata } from './html/Metadata.svelte';
129
+ export { default as MotionMeter } from './html/Meter.svelte';
130
+ export { default as MotionMpath } from './html/Mpath.svelte';
131
+ export { default as MotionNav } from './html/Nav.svelte';
132
+ export { default as MotionNoscript } from './html/Noscript.svelte';
133
+ export { default as MotionObject } from './html/Object.svelte';
134
+ export { default as MotionOl } from './html/Ol.svelte';
135
+ export { default as MotionOptgroup } from './html/Optgroup.svelte';
136
+ export { default as MotionOption } from './html/Option.svelte';
137
+ export { default as MotionOutput } from './html/Output.svelte';
138
+ export { default as MotionP } from './html/P.svelte';
139
+ export { default as MotionPath } from './html/Path.svelte';
140
+ export { default as MotionPattern } from './html/Pattern.svelte';
141
+ export { default as MotionPicture } from './html/Picture.svelte';
142
+ export { default as MotionPolygon } from './html/Polygon.svelte';
143
+ export { default as MotionPolyline } from './html/Polyline.svelte';
144
+ export { default as MotionPre } from './html/Pre.svelte';
145
+ export { default as MotionProgress } from './html/Progress.svelte';
146
+ export { default as MotionQ } from './html/Q.svelte';
147
+ export { default as MotionRadialgradient } from './html/Radialgradient.svelte';
148
+ export { default as MotionRect } from './html/Rect.svelte';
149
+ export { default as MotionRp } from './html/Rp.svelte';
150
+ export { default as MotionRt } from './html/Rt.svelte';
151
+ export { default as MotionRuby } from './html/Ruby.svelte';
152
+ export { default as MotionS } from './html/S.svelte';
153
+ export { default as MotionSamp } from './html/Samp.svelte';
154
+ export { default as MotionScript } from './html/Script.svelte';
155
+ export { default as MotionSearch } from './html/Search.svelte';
156
+ export { default as MotionSection } from './html/Section.svelte';
157
+ export { default as MotionSelect } from './html/Select.svelte';
158
+ export { default as MotionSelectedcontent } from './html/Selectedcontent.svelte';
159
+ export { default as MotionSet } from './html/Set.svelte';
160
+ export { default as MotionSlot } from './html/Slot.svelte';
161
+ export { default as MotionSmall } from './html/Small.svelte';
162
+ export { default as MotionSource } from './html/Source.svelte';
163
+ export { default as MotionSpan } from './html/Span.svelte';
164
+ export { default as MotionStop } from './html/Stop.svelte';
165
+ export { default as MotionStrong } from './html/Strong.svelte';
166
+ export { default as MotionStyle } from './html/Style.svelte';
167
+ export { default as MotionSub } from './html/Sub.svelte';
168
+ export { default as MotionSummary } from './html/Summary.svelte';
169
+ export { default as MotionSup } from './html/Sup.svelte';
170
+ export { default as MotionSvg } from './html/Svg.svelte';
171
+ export { default as MotionSwitch } from './html/Switch.svelte';
172
+ export { default as MotionSymbol } from './html/Symbol.svelte';
173
+ export { default as MotionTable } from './html/Table.svelte';
174
+ export { default as MotionTbody } from './html/Tbody.svelte';
175
+ export { default as MotionTd } from './html/Td.svelte';
176
+ export { default as MotionTemplate } from './html/Template.svelte';
177
+ export { default as MotionText } from './html/Text.svelte';
178
+ export { default as MotionTextarea } from './html/Textarea.svelte';
179
+ export { default as MotionTextpath } from './html/Textpath.svelte';
180
+ export { default as MotionTfoot } from './html/Tfoot.svelte';
181
+ export { default as MotionTh } from './html/Th.svelte';
182
+ export { default as MotionThead } from './html/Thead.svelte';
183
+ export { default as MotionTime } from './html/Time.svelte';
184
+ export { default as MotionTitle } from './html/Title.svelte';
185
+ export { default as MotionTr } from './html/Tr.svelte';
186
+ export { default as MotionTrack } from './html/Track.svelte';
187
+ export { default as MotionTref } from './html/Tref.svelte';
188
+ export { default as MotionTspan } from './html/Tspan.svelte';
189
+ export { default as MotionU } from './html/U.svelte';
190
+ export { default as MotionUl } from './html/Ul.svelte';
191
+ export { default as MotionUse } from './html/Use.svelte';
192
+ export { default as MotionVar } from './html/Var.svelte';
193
+ export { default as MotionVideo } from './html/Video.svelte';
194
+ export { default as MotionView } from './html/View.svelte';
195
+ export { default as MotionWbr } from './html/Wbr.svelte';
package/dist/motion.d.ts ADDED
@@ -0,0 +1,2 @@
1
+ import type { MotionComponents } from './html/index';
2
+ export declare const motion: MotionComponents;
package/dist/motion.js ADDED
@@ -0,0 +1,3 @@
1
+ import * as html from './html/index';
2
+ // Create the motion object with all components
3
+ export const motion = Object.fromEntries(Object.entries(html).map(([key, component]) => [key.toLowerCase(), component]));
package/dist/vite.d.ts ADDED
@@ -0,0 +1,36 @@
1
+ import type { Plugin } from 'vite';
2
+ /**
3
+ * A Vite plugin that optimizes `@humanspeak/svelte-motion` imports for tree-shaking.
4
+ *
5
+ * Transforms `motion.div`, `motion.span`, etc. into direct component imports,
6
+ * eliminating the need to bundle all 170+ HTML/SVG element wrappers.
7
+ *
8
+ * @example
9
+ * ```ts
10
+ * // vite.config.ts
11
+ * import { svelteMotionOptimize } from '@humanspeak/svelte-motion/vite'
12
+ * import { sveltekit } from '@sveltejs/kit/vite'
13
+ * import { defineConfig } from 'vite'
14
+ *
15
+ * export default defineConfig({
16
+ * plugins: [svelteMotionOptimize(), sveltekit()]
17
+ * })
18
+ * ```
19
+ *
20
+ * Before (all 170+ wrappers bundled):
21
+ * ```svelte
22
+ * <script>
23
+ * import { motion } from '@humanspeak/svelte-motion'
24
+ * </script>
25
+ * <motion.div animate={{ opacity: 1 }}>Hello</motion.div>
26
+ * ```
27
+ *
28
+ * After (only Div.svelte bundled):
29
+ * ```svelte
30
+ * <script>
31
+ * import SvelteMotionDiv from '@humanspeak/svelte-motion/html/Div.svelte'
32
+ * </script>
33
+ * <SvelteMotionDiv animate={{ opacity: 1 }}>Hello</SvelteMotionDiv>
34
+ * ```
35
+ */
36
+ export declare const svelteMotionOptimize: () => Plugin;
package/dist/vite.js ADDED
@@ -0,0 +1,343 @@
1
+ /**
2
+ * Tag-to-component name mapping. Each key is the lowercase HTML/SVG tag,
3
+ * and the value is the PascalCase component filename (without .svelte).
4
+ *
5
+ * This is used by the Vite plugin to rewrite `motion.div` → `import Div from '…/Div.svelte'`.
6
+ */
7
+ const toComponentName = (tag) => tag
8
+ .split('-')
9
+ .map((part) => part.charAt(0).toUpperCase() + part.slice(1))
10
+ .join('');
11
+ /** Set of valid HTML/SVG element names that have motion component wrappers. */
12
+ const VALID_TAGS = new Set([
13
+ 'a',
14
+ 'abbr',
15
+ 'address',
16
+ 'animate',
17
+ 'animatemotion',
18
+ 'animatetransform',
19
+ 'area',
20
+ 'article',
21
+ 'aside',
22
+ 'audio',
23
+ 'b',
24
+ 'base',
25
+ 'bdi',
26
+ 'bdo',
27
+ 'blockquote',
28
+ 'br',
29
+ 'button',
30
+ 'canvas',
31
+ 'caption',
32
+ 'circle',
33
+ 'cite',
34
+ 'clippath',
35
+ 'code',
36
+ 'col',
37
+ 'colgroup',
38
+ 'cursor',
39
+ 'data',
40
+ 'datalist',
41
+ 'dd',
42
+ 'defs',
43
+ 'del',
44
+ 'desc',
45
+ 'details',
46
+ 'dfn',
47
+ 'dialog',
48
+ 'div',
49
+ 'dl',
50
+ 'dt',
51
+ 'ellipse',
52
+ 'em',
53
+ 'embed',
54
+ 'feblend',
55
+ 'fecolormatrix',
56
+ 'fecomponenttransfer',
57
+ 'fecomposite',
58
+ 'feconvolvematrix',
59
+ 'fediffuselighting',
60
+ 'fedisplacementmap',
61
+ 'fedistantlight',
62
+ 'feflood',
63
+ 'fefunca',
64
+ 'fefuncb',
65
+ 'fefuncg',
66
+ 'fefuncr',
67
+ 'fegaussianblur',
68
+ 'feimage',
69
+ 'femerge',
70
+ 'femergenode',
71
+ 'femorphology',
72
+ 'feoffset',
73
+ 'fepointlight',
74
+ 'fespecularlighting',
75
+ 'fespotlight',
76
+ 'fetile',
77
+ 'feturbulence',
78
+ 'fieldset',
79
+ 'figcaption',
80
+ 'figure',
81
+ 'filter',
82
+ 'footer',
83
+ 'foreignobject',
84
+ 'form',
85
+ 'g',
86
+ 'h1',
87
+ 'h2',
88
+ 'h3',
89
+ 'h4',
90
+ 'h5',
91
+ 'h6',
92
+ 'header',
93
+ 'hgroup',
94
+ 'hr',
95
+ 'i',
96
+ 'iframe',
97
+ 'image',
98
+ 'img',
99
+ 'input',
100
+ 'ins',
101
+ 'kbd',
102
+ 'label',
103
+ 'legend',
104
+ 'li',
105
+ 'line',
106
+ 'lineargradient',
107
+ 'main',
108
+ 'map',
109
+ 'mark',
110
+ 'marker',
111
+ 'mask',
112
+ 'math',
113
+ 'menu',
114
+ 'metadata',
115
+ 'meter',
116
+ 'mpath',
117
+ 'nav',
118
+ 'noscript',
119
+ 'object',
120
+ 'ol',
121
+ 'optgroup',
122
+ 'option',
123
+ 'output',
124
+ 'p',
125
+ 'path',
126
+ 'pattern',
127
+ 'picture',
128
+ 'polygon',
129
+ 'polyline',
130
+ 'pre',
131
+ 'progress',
132
+ 'q',
133
+ 'radialgradient',
134
+ 'rect',
135
+ 'rp',
136
+ 'rt',
137
+ 'ruby',
138
+ 's',
139
+ 'samp',
140
+ 'script',
141
+ 'search',
142
+ 'section',
143
+ 'select',
144
+ 'selectedcontent',
145
+ 'set',
146
+ 'slot',
147
+ 'small',
148
+ 'source',
149
+ 'span',
150
+ 'stop',
151
+ 'strong',
152
+ 'style',
153
+ 'sub',
154
+ 'summary',
155
+ 'sup',
156
+ 'svg',
157
+ 'switch',
158
+ 'symbol',
159
+ 'table',
160
+ 'tbody',
161
+ 'td',
162
+ 'template',
163
+ 'text',
164
+ 'textarea',
165
+ 'textpath',
166
+ 'tfoot',
167
+ 'th',
168
+ 'thead',
169
+ 'time',
170
+ 'title',
171
+ 'tr',
172
+ 'track',
173
+ 'tref',
174
+ 'tspan',
175
+ 'u',
176
+ 'ul',
177
+ 'use',
178
+ 'var',
179
+ 'video',
180
+ 'view',
181
+ 'wbr'
182
+ ]);
183
+ /**
184
+ * Regex to match import of `motion` from the library.
185
+ *
186
+ * Handles:
187
+ * import { motion } from '@humanspeak/svelte-motion'
188
+ * import { motion, animate } from '@humanspeak/svelte-motion'
189
+ * import { animate, motion } from '@humanspeak/svelte-motion'
190
+ */
191
+ const MOTION_IMPORT_RE = /import\s*\{([^}]*\bmotion\b[^}]*)\}\s*from\s*['"]@humanspeak\/svelte-motion['"]/;
192
+ /**
193
+ * Regex to find `motion.TAG` usage in templates (opening tags and self-closing).
194
+ *
195
+ * Matches: `<motion.div`, `<motion.span`, `<motion.circle`, etc.
196
+ */
197
+ const MOTION_TEMPLATE_OPEN_RE = /<motion\.([a-z][a-z0-9-]*)/g;
198
+ /**
199
+ * Regex to find closing tags: `</motion.TAG>`
200
+ */
201
+ const MOTION_TEMPLATE_CLOSE_RE = /<\/motion\.([a-z][a-z0-9-]*)\s*>/g;
202
+ /**
203
+ * Regex to find `motion.TAG` usage in script blocks (JS expressions).
204
+ *
205
+ * Matches property access like `motion.div` but NOT inside strings or comments.
206
+ * Uses a simple word-boundary approach.
207
+ */
208
+ const MOTION_SCRIPT_RE = /\bmotion\.([a-z][a-z0-9-]*)\b/g;
209
+ /**
210
+ * A Vite plugin that optimizes `@humanspeak/svelte-motion` imports for tree-shaking.
211
+ *
212
+ * Transforms `motion.div`, `motion.span`, etc. into direct component imports,
213
+ * eliminating the need to bundle all 170+ HTML/SVG element wrappers.
214
+ *
215
+ * @example
216
+ * ```ts
217
+ * // vite.config.ts
218
+ * import { svelteMotionOptimize } from '@humanspeak/svelte-motion/vite'
219
+ * import { sveltekit } from '@sveltejs/kit/vite'
220
+ * import { defineConfig } from 'vite'
221
+ *
222
+ * export default defineConfig({
223
+ * plugins: [svelteMotionOptimize(), sveltekit()]
224
+ * })
225
+ * ```
226
+ *
227
+ * Before (all 170+ wrappers bundled):
228
+ * ```svelte
229
+ * <script>
230
+ * import { motion } from '@humanspeak/svelte-motion'
231
+ * </script>
232
+ * <motion.div animate={{ opacity: 1 }}>Hello</motion.div>
233
+ * ```
234
+ *
235
+ * After (only Div.svelte bundled):
236
+ * ```svelte
237
+ * <script>
238
+ * import SvelteMotionDiv from '@humanspeak/svelte-motion/html/Div.svelte'
239
+ * </script>
240
+ * <SvelteMotionDiv animate={{ opacity: 1 }}>Hello</SvelteMotionDiv>
241
+ * ```
242
+ */
243
+ export const svelteMotionOptimize = () => ({
244
+ name: 'svelte-motion-optimize',
245
+ enforce: 'pre',
246
+ transform(code, id) {
247
+ // Only process .svelte files that import motion (skip node_modules)
248
+ if (!id.endsWith('.svelte'))
249
+ return null;
250
+ if (id.includes('node_modules'))
251
+ return null;
252
+ if (!code.includes('@humanspeak/svelte-motion'))
253
+ return null;
254
+ const importMatch = MOTION_IMPORT_RE.exec(code);
255
+ if (!importMatch)
256
+ return null;
257
+ // Collect all motion.TAG usages (both template and script)
258
+ const usedTags = new Set();
259
+ // Scan template for <motion.TAG (closing tags always pair with an opening tag)
260
+ let match;
261
+ MOTION_TEMPLATE_OPEN_RE.lastIndex = 0;
262
+ while ((match = MOTION_TEMPLATE_OPEN_RE.exec(code)) !== null) {
263
+ if (VALID_TAGS.has(match[1]))
264
+ usedTags.add(match[1]);
265
+ }
266
+ // Scan script blocks for motion.TAG in JS expressions
267
+ // Only match inside <script> tags to avoid false positives in comments/text
268
+ const scriptBlockRe = /<script[^>]*>([\s\S]*?)<\/script>/g;
269
+ let scriptMatch;
270
+ while ((scriptMatch = scriptBlockRe.exec(code)) !== null) {
271
+ const scriptContent = scriptMatch[1];
272
+ MOTION_SCRIPT_RE.lastIndex = 0;
273
+ while ((match = MOTION_SCRIPT_RE.exec(scriptContent)) !== null) {
274
+ if (VALID_TAGS.has(match[1]))
275
+ usedTags.add(match[1]);
276
+ }
277
+ }
278
+ if (usedTags.size === 0)
279
+ return null;
280
+ let transformed = code;
281
+ // Build individual component imports
282
+ const componentImports = [];
283
+ const tagToLocal = new Map();
284
+ for (const tag of usedTags) {
285
+ const componentName = toComponentName(tag);
286
+ const localName = `SvelteMotion${componentName}`;
287
+ tagToLocal.set(tag, localName);
288
+ componentImports.push(`import ${localName} from '@humanspeak/svelte-motion/html/${componentName}.svelte'`);
289
+ }
290
+ // Check if motion is used for anything other than .TAG access
291
+ // (e.g., passed as a variable, used in a function call)
292
+ const otherImports = importMatch[1]
293
+ .split(',')
294
+ .map((s) => s.trim())
295
+ .filter((s) => s && s !== 'motion');
296
+ // Check if motion itself is used beyond .TAG access
297
+ // Remove all motion.TAG patterns and see if bare `motion` remains
298
+ const codeWithoutTags = transformed
299
+ .replace(MOTION_TEMPLATE_OPEN_RE, '')
300
+ .replace(MOTION_TEMPLATE_CLOSE_RE, '')
301
+ .replace(MOTION_SCRIPT_RE, '');
302
+ const motionStillUsed = /\bmotion\b/.test(codeWithoutTags.replace(MOTION_IMPORT_RE, '').replace(/['"].*?['"]/g, ''));
303
+ // Replace the import statement
304
+ if (motionStillUsed) {
305
+ // motion is still used as a value (e.g., passed to a function), keep the original import
306
+ // Just add the individual imports alongside
307
+ transformed = transformed.replace(MOTION_IMPORT_RE, (original) => `${original}\n${componentImports.join('\n')}`);
308
+ }
309
+ else if (otherImports.length > 0) {
310
+ // Other named imports exist, keep those but remove motion
311
+ transformed = transformed.replace(MOTION_IMPORT_RE, `import { ${otherImports.join(', ')} } from '@humanspeak/svelte-motion'\n${componentImports.join('\n')}`);
312
+ }
313
+ else {
314
+ // Only motion was imported, replace entirely
315
+ transformed = transformed.replace(MOTION_IMPORT_RE, componentImports.join('\n'));
316
+ }
317
+ // Replace template usage: <motion.TAG → <SvelteMotionTag, </motion.TAG> → </SvelteMotionTag>
318
+ for (const [tag, localName] of tagToLocal) {
319
+ const openRe = new RegExp(`<motion\\.${escapeRegExp(tag)}(?=[\\s/>])`, 'g');
320
+ const closeRe = new RegExp(`</motion\\.${escapeRegExp(tag)}\\s*>`, 'g');
321
+ const scriptRe = new RegExp(`\\bmotion\\.${escapeRegExp(tag)}\\b`, 'g');
322
+ transformed = transformed.replace(openRe, `<${localName}`);
323
+ transformed = transformed.replace(closeRe, `</${localName}>`);
324
+ // Also replace script-block references (e.g., const Component = motion.div)
325
+ // But only outside of the import statement we already handled
326
+ const importEndIdx = transformed.indexOf(localName) + localName.length;
327
+ const beforeImport = transformed.slice(0, importEndIdx);
328
+ const afterImport = transformed.slice(importEndIdx);
329
+ transformed = beforeImport + afterImport.replace(scriptRe, localName);
330
+ }
331
+ return {
332
+ code: transformed,
333
+ map: null
334
+ };
335
+ }
336
+ });
337
+ /**
338
+ * Escapes special regex characters in a string.
339
+ *
340
+ * @param str - The string to escape.
341
+ * @returns The escaped string safe for use in a RegExp.
342
+ */
343
+ const escapeRegExp = (str) => str.replace(/[.*+?^${}()|[\]\\]/g, '\\$&');
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@humanspeak/svelte-motion",
3
- "version": "0.1.32",
3
+ "version": "0.2.0",
4
4
  "description": "A Framer Motion-compatible animation library for Svelte 5 that provides smooth, hardware-accelerated animations. Features include spring physics, custom easing, and fluid transitions. Built on top of the motion library, it offers a simple API for creating complex animations with minimal code. Perfect for interactive UIs, micro-interactions, and engaging user experiences.",
5
5
  "keywords": [
6
6
  "svelte",
@@ -47,6 +47,13 @@
47
47
  ".": {
48
48
  "types": "./dist/index.d.ts",
49
49
  "svelte": "./dist/index.js"
50
+ },
51
+ "./vite": {
52
+ "types": "./dist/vite.d.ts",
53
+ "default": "./dist/vite.js"
54
+ },
55
+ "./html/*.svelte": {
56
+ "svelte": "./dist/html/*.svelte"
50
57
  }
51
58
  },
52
59
  "svelte": "./dist/index.js",
@@ -64,8 +71,8 @@
64
71
  }
65
72
  },
66
73
  "dependencies": {
67
- "motion": "^12.35.0",
68
- "motion-dom": "^12.35.0"
74
+ "motion": "^12.38.0",
75
+ "motion-dom": "^12.38.0"
69
76
  },
70
77
  "devDependencies": {
71
78
  "@changesets/cli": "^2.30.0",
@@ -73,30 +80,30 @@
73
80
  "@eslint/js": "^10.0.1",
74
81
  "@playwright/test": "^1.58.2",
75
82
  "@sveltejs/adapter-auto": "^7.0.1",
76
- "@sveltejs/kit": "^2.53.4",
83
+ "@sveltejs/kit": "^2.55.0",
77
84
  "@sveltejs/package": "^2.5.7",
78
- "@sveltejs/vite-plugin-svelte": "^6.2.4",
85
+ "@sveltejs/vite-plugin-svelte": "^7.0.0",
79
86
  "@tailwindcss/aspect-ratio": "^0.4.2",
80
87
  "@tailwindcss/container-queries": "^0.1.1",
81
88
  "@tailwindcss/forms": "^0.5.11",
82
- "@tailwindcss/postcss": "^4.2.1",
83
89
  "@tailwindcss/typography": "^0.5.19",
90
+ "@tailwindcss/vite": "^4.2.2",
84
91
  "@testing-library/jest-dom": "^6.9.1",
85
92
  "@testing-library/svelte": "^5.3.1",
86
- "@types/node": "^25.3.5",
87
- "@vitest/coverage-v8": "^4.0.18",
88
- "eslint": "^10.0.3",
93
+ "@types/node": "^25.5.0",
94
+ "@vitest/coverage-v8": "^4.1.2",
95
+ "eslint": "^10.1.0",
89
96
  "eslint-config-prettier": "10.1.8",
90
97
  "eslint-plugin-import": "2.32.0",
91
- "eslint-plugin-svelte": "3.15.0",
98
+ "eslint-plugin-svelte": "3.16.0",
92
99
  "eslint-plugin-unused-imports": "4.4.1",
93
100
  "esm-env": "^1.2.2",
94
101
  "globals": "^17.4.0",
95
102
  "html-tags": "^5.1.0",
96
103
  "html-void-elements": "^3.0.0",
97
104
  "husky": "^9.1.7",
98
- "jsdom": "^28.1.0",
99
- "mprocs": "^0.8.3",
105
+ "jsdom": "^29.0.1",
106
+ "mprocs": "^0.9.2",
100
107
  "prettier": "^3.8.1",
101
108
  "prettier-plugin-organize-imports": "^4.3.0",
102
109
  "prettier-plugin-sort-json": "^4.2.0",
@@ -104,19 +111,19 @@
104
111
  "prettier-plugin-tailwindcss": "^0.7.2",
105
112
  "publint": "^0.3.18",
106
113
  "runed": "0.37.1",
107
- "svelte": "^5.53.7",
108
- "svelte-check": "^4.4.4",
114
+ "svelte": "^5.55.0",
115
+ "svelte-check": "^4.4.5",
109
116
  "svg-tags": "^1.0.0",
110
117
  "tailwind-merge": "^3.5.0",
111
118
  "tailwind-variants": "^3.2.2",
112
- "tailwindcss": "^4.2.1",
119
+ "tailwindcss": "^4.2.2",
113
120
  "tailwindcss-animate": "^1.0.7",
114
121
  "tsx": "^4.21.0",
115
122
  "typescript": "^5.9.3",
116
- "typescript-eslint": "^8.56.1",
117
- "vite": "^7.3.1",
123
+ "typescript-eslint": "^8.57.2",
124
+ "vite": "^8.0.3",
118
125
  "vite-tsconfig-paths": "^6.1.1",
119
- "vitest": "^4.0.18"
126
+ "vitest": "^4.1.2"
120
127
  },
121
128
  "peerDependencies": {
122
129
  "svelte": "^5.0.0"
@@ -140,6 +147,7 @@
140
147
  ],
141
148
  "scripts": {
142
149
  "build": "vite build && npm run package",
150
+ "cf-typegen": "pnpm --filter docs cf-typegen",
143
151
  "check": "svelte-kit sync && svelte-check --tsconfig ./tsconfig.json",
144
152
  "check:watch": "svelte-kit sync && svelte-check --tsconfig ./tsconfig.json --watch",
145
153
  "cs:add": "changeset",