@humanspeak/svelte-motion 0.0.8 → 0.0.9

package/README.md

@@ -79,67 +79,6 @@ Just a little wrapper for motion. I love their work! The typical this is a WIP,
 - `motion.track`
 - `motion.wbr`
 
-### Regular Elements
-
-- `motion.a`
-- `motion.article`
-- `motion.aside`
-- `motion.blockquote`
-- `motion.button`
-- `motion.code`
-- `motion.dd`
-- `motion.div`
-- `motion.dl`
-- `motion.dt`
-- `motion.fieldset`
-- `motion.figcaption`
-- `motion.figure`
-- `motion.footer`
-- `motion.form`
-- `motion.h1`
-- `motion.h2`
-- `motion.h3`
-- `motion.h4`
-- `motion.h5`
-- `motion.h6`
-- `motion.header`
-- `motion.label`
-- `motion.legend`
-- `motion.li`
-- `motion.main`
-- `motion.nav`
-- `motion.ol`
-- `motion.option`
-- `motion.p`
-- `motion.pre`
-- `motion.section`
-- `motion.select`
-- `motion.span`
-- `motion.table`
-- `motion.tbody`
-- `motion.td`
-- `motion.textarea`
-- `motion.tfoot`
-- `motion.th`
-- `motion.thead`
-- `motion.tr`
-- `motion.ul`
-
-### Void Elements
-
-- `motion.area`
-- `motion.base`
-- `motion.br`
-- `motion.col`
-- `motion.embed`
-- `motion.hr`
-- `motion.img`
-- `motion.input`
-- `motion.param`
-- `motion.source`
-- `motion.track`
-- `motion.wbr`
-
 ## External Dependencies
 
 This package carefully selects its dependencies to provide a robust and maintainable solution:

package/dist/html/A.svelte

@@ -2,9 +2,7 @@
     import MotionContainer from './_MotionContainer.svelte'
     import type { HTMLElementProps } from '../types.js'
 
-    type Props = HTMLElementProps
-
-    let { children, ...rest } = $props<HTMLElementProps>()
+    let { children, ...rest }: HTMLElementProps = $props()
 </script>
 
 <MotionContainer tag="a" {...rest}>

package/dist/html/Area.svelte

@@ -2,7 +2,7 @@
     import MotionContainer from './_MotionContainer.svelte'
     import type { HTMLVoidElementProps } from '../types.js'
 
-    let { ...rest } = $props<HTMLVoidElementProps>()
+    let { ...rest }: HTMLVoidElementProps = $props()
 </script>
 
 <MotionContainer tag="area" {...rest} />

package/dist/html/Article.svelte

@@ -2,9 +2,7 @@
     import MotionContainer from './_MotionContainer.svelte'
     import type { HTMLElementProps } from '../types.js'
 
-    type Props = HTMLElementProps
-
-    let { children, ...rest } = $props<HTMLElementProps>()
+    let { children, ...rest }: HTMLElementProps = $props()
 </script>
 
 <MotionContainer tag="article" {...rest}>

package/dist/html/Aside.svelte

@@ -2,9 +2,7 @@
     import MotionContainer from './_MotionContainer.svelte'
     import type { HTMLElementProps } from '../types.js'
 
-    type Props = HTMLElementProps
-
-    let { children, ...rest } = $props<HTMLElementProps>()
+    let { children, ...rest }: HTMLElementProps = $props()
 </script>
 
 <MotionContainer tag="aside" {...rest}>

package/dist/html/Base.svelte

@@ -2,7 +2,7 @@
     import MotionContainer from './_MotionContainer.svelte'
     import type { HTMLVoidElementProps } from '../types.js'
 
-    let { ...rest } = $props<HTMLVoidElementProps>()
+    let { ...rest }: HTMLVoidElementProps = $props()
 </script>
 
 <MotionContainer tag="base" {...rest} />

package/dist/html/Blockquote.svelte

@@ -2,9 +2,7 @@
     import MotionContainer from './_MotionContainer.svelte'
     import type { HTMLElementProps } from '../types.js'
 
-    type Props = HTMLElementProps
-
-    let { children, ...rest } = $props<HTMLElementProps>()
+    let { children, ...rest }: HTMLElementProps = $props()
 </script>
 
 <MotionContainer tag="blockquote" {...rest}>

package/dist/html/Br.svelte

@@ -2,7 +2,7 @@
     import MotionContainer from './_MotionContainer.svelte'
     import type { HTMLVoidElementProps } from '../types.js'
 
-    let { ...rest } = $props<HTMLVoidElementProps>()
+    let { ...rest }: HTMLVoidElementProps = $props()
 </script>
 
 <MotionContainer tag="br" {...rest} />

package/dist/html/Button.svelte

@@ -2,9 +2,7 @@
     import MotionContainer from './_MotionContainer.svelte'
     import type { HTMLElementProps } from '../types.js'
 
-    type Props = HTMLElementProps
-
-    let { children, ...rest } = $props<HTMLElementProps>()
+    let { children, ...rest }: HTMLElementProps = $props()
 </script>
 
 <MotionContainer tag="button" {...rest}>

package/dist/html/Code.svelte

@@ -2,9 +2,7 @@
     import MotionContainer from './_MotionContainer.svelte'
     import type { HTMLElementProps } from '../types.js'
 
-    type Props = HTMLElementProps
-
-    let { children, ...rest } = $props<HTMLElementProps>()
+    let { children, ...rest }: HTMLElementProps = $props()
 </script>
 
 <MotionContainer tag="code" {...rest}>

package/dist/html/Col.svelte

@@ -2,7 +2,7 @@
     import MotionContainer from './_MotionContainer.svelte'
     import type { HTMLVoidElementProps } from '../types.js'
 
-    let { ...rest } = $props<HTMLVoidElementProps>()
+    let { ...rest }: HTMLVoidElementProps = $props()
 </script>
 
 <MotionContainer tag="col" {...rest} />

package/dist/html/Dd.svelte

@@ -2,9 +2,7 @@
     import MotionContainer from './_MotionContainer.svelte'
     import type { HTMLElementProps } from '../types.js'
 
-    type Props = HTMLElementProps
-
-    let { children, ...rest } = $props<HTMLElementProps>()
+    let { children, ...rest }: HTMLElementProps = $props()
 </script>
 
 <MotionContainer tag="dd" {...rest}>

package/dist/html/Div.svelte

@@ -2,9 +2,7 @@
     import MotionContainer from './_MotionContainer.svelte'
     import type { HTMLElementProps } from '../types.js'
 
-    type Props = HTMLElementProps
-
-    let { children, ...rest } = $props<HTMLElementProps>()
+    let { children, ...rest }: HTMLElementProps = $props()
 </script>
 
 <MotionContainer tag="div" {...rest}>

package/dist/html/Dl.svelte

@@ -2,9 +2,7 @@
     import MotionContainer from './_MotionContainer.svelte'
     import type { HTMLElementProps } from '../types.js'
 
-    type Props = HTMLElementProps
-
-    let { children, ...rest } = $props<HTMLElementProps>()
+    let { children, ...rest }: HTMLElementProps = $props()
 </script>
 
 <MotionContainer tag="dl" {...rest}>

package/dist/html/Dt.svelte

@@ -2,9 +2,7 @@
     import MotionContainer from './_MotionContainer.svelte'
     import type { HTMLElementProps } from '../types.js'
 
-    type Props = HTMLElementProps
-
-    let { children, ...rest } = $props<HTMLElementProps>()
+    let { children, ...rest }: HTMLElementProps = $props()
 </script>
 
 <MotionContainer tag="dt" {...rest}>

package/dist/html/Embed.svelte

@@ -2,7 +2,7 @@
     import MotionContainer from './_MotionContainer.svelte'
     import type { HTMLVoidElementProps } from '../types.js'
 
-    let { ...rest } = $props<HTMLVoidElementProps>()
+    let { ...rest }: HTMLVoidElementProps = $props()
 </script>
 
 <MotionContainer tag="embed" {...rest} />

package/dist/html/Fieldset.svelte

@@ -2,9 +2,7 @@
     import MotionContainer from './_MotionContainer.svelte'
     import type { HTMLElementProps } from '../types.js'
 
-    type Props = HTMLElementProps
-
-    let { children, ...rest } = $props<HTMLElementProps>()
+    let { children, ...rest }: HTMLElementProps = $props()
 </script>
 
 <MotionContainer tag="fieldset" {...rest}>

package/dist/html/Figcaption.svelte

@@ -2,9 +2,7 @@
     import MotionContainer from './_MotionContainer.svelte'
     import type { HTMLElementProps } from '../types.js'
 
-    type Props = HTMLElementProps
-
-    let { children, ...rest } = $props<HTMLElementProps>()
+    let { children, ...rest }: HTMLElementProps = $props()
 </script>
 
 <MotionContainer tag="figcaption" {...rest}>

package/dist/html/Figure.svelte

@@ -2,9 +2,7 @@
     import MotionContainer from './_MotionContainer.svelte'
     import type { HTMLElementProps } from '../types.js'
 
-    type Props = HTMLElementProps
-
-    let { children, ...rest } = $props<HTMLElementProps>()
+    let { children, ...rest }: HTMLElementProps = $props()
 </script>
 
 <MotionContainer tag="figure" {...rest}>

package/dist/html/Footer.svelte

@@ -2,9 +2,7 @@
     import MotionContainer from './_MotionContainer.svelte'
     import type { HTMLElementProps } from '../types.js'
 
-    type Props = HTMLElementProps
-
-    let { children, ...rest } = $props<HTMLElementProps>()
+    let { children, ...rest }: HTMLElementProps = $props()
 </script>
 
 <MotionContainer tag="footer" {...rest}>

package/dist/html/Form.svelte

@@ -2,9 +2,7 @@
     import MotionContainer from './_MotionContainer.svelte'
     import type { HTMLElementProps } from '../types.js'
 
-    type Props = HTMLElementProps
-
-    let { children, ...rest } = $props<HTMLElementProps>()
+    let { children, ...rest }: HTMLElementProps = $props()
 </script>
 
 <MotionContainer tag="form" {...rest}>

package/dist/html/H1.svelte

@@ -2,9 +2,7 @@
     import MotionContainer from './_MotionContainer.svelte'
     import type { HTMLElementProps } from '../types.js'
 
-    type Props = HTMLElementProps
-
-    let { children, ...rest } = $props<HTMLElementProps>()
+    let { children, ...rest }: HTMLElementProps = $props()
 </script>
 
 <MotionContainer tag="h1" {...rest}>

package/dist/html/H2.svelte

@@ -2,9 +2,7 @@
     import MotionContainer from './_MotionContainer.svelte'
     import type { HTMLElementProps } from '../types.js'
 
-    type Props = HTMLElementProps
-
-    let { children, ...rest } = $props<HTMLElementProps>()
+    let { children, ...rest }: HTMLElementProps = $props()
 </script>
 
 <MotionContainer tag="h2" {...rest}>

package/dist/html/H3.svelte

@@ -2,9 +2,7 @@
     import MotionContainer from './_MotionContainer.svelte'
     import type { HTMLElementProps } from '../types.js'
 
-    type Props = HTMLElementProps
-
-    let { children, ...rest } = $props<HTMLElementProps>()
+    let { children, ...rest }: HTMLElementProps = $props()
 </script>
 
 <MotionContainer tag="h3" {...rest}>

package/dist/html/H4.svelte

@@ -2,9 +2,7 @@
     import MotionContainer from './_MotionContainer.svelte'
     import type { HTMLElementProps } from '../types.js'
 
-    type Props = HTMLElementProps
-
-    let { children, ...rest } = $props<HTMLElementProps>()
+    let { children, ...rest }: HTMLElementProps = $props()
 </script>
 
 <MotionContainer tag="h4" {...rest}>

package/dist/html/H5.svelte

@@ -2,9 +2,7 @@
     import MotionContainer from './_MotionContainer.svelte'
     import type { HTMLElementProps } from '../types.js'
 
-    type Props = HTMLElementProps
-
-    let { children, ...rest } = $props<HTMLElementProps>()
+    let { children, ...rest }: HTMLElementProps = $props()
 </script>
 
 <MotionContainer tag="h5" {...rest}>

package/dist/html/H6.svelte

@@ -2,9 +2,7 @@
     import MotionContainer from './_MotionContainer.svelte'
     import type { HTMLElementProps } from '../types.js'
 
-    type Props = HTMLElementProps
-
-    let { children, ...rest } = $props<HTMLElementProps>()
+    let { children, ...rest }: HTMLElementProps = $props()
 </script>
 
 <MotionContainer tag="h6" {...rest}>

package/dist/html/Header.svelte

@@ -2,9 +2,7 @@
     import MotionContainer from './_MotionContainer.svelte'
     import type { HTMLElementProps } from '../types.js'
 
-    type Props = HTMLElementProps
-
-    let { children, ...rest } = $props<HTMLElementProps>()
+    let { children, ...rest }: HTMLElementProps = $props()
 </script>
 
 <MotionContainer tag="header" {...rest}>

package/dist/html/Hr.svelte

@@ -2,7 +2,7 @@
     import MotionContainer from './_MotionContainer.svelte'
     import type { HTMLVoidElementProps } from '../types.js'
 
-    let { ...rest } = $props<HTMLVoidElementProps>()
+    let { ...rest }: HTMLVoidElementProps = $props()
 </script>
 
 <MotionContainer tag="hr" {...rest} />

package/dist/html/Img.svelte

@@ -2,7 +2,7 @@
     import MotionContainer from './_MotionContainer.svelte'
     import type { HTMLVoidElementProps } from '../types.js'
 
-    let { ...rest } = $props<HTMLVoidElementProps>()
+    let { ...rest }: HTMLVoidElementProps = $props()
 </script>
 
 <MotionContainer tag="img" {...rest} />

package/dist/html/Input.svelte

@@ -2,7 +2,7 @@
     import MotionContainer from './_MotionContainer.svelte'
     import type { HTMLVoidElementProps } from '../types.js'
 
-    let { ...rest } = $props<HTMLVoidElementProps>()
+    let { ...rest }: HTMLVoidElementProps = $props()
 </script>
 
 <MotionContainer tag="input" {...rest} />

package/dist/html/Label.svelte

@@ -2,9 +2,7 @@
     import MotionContainer from './_MotionContainer.svelte'
     import type { HTMLElementProps } from '../types.js'
 
-    type Props = HTMLElementProps
-
-    let { children, ...rest } = $props<HTMLElementProps>()
+    let { children, ...rest }: HTMLElementProps = $props()
 </script>
 
 <MotionContainer tag="label" {...rest}>

package/dist/html/Legend.svelte

@@ -2,9 +2,7 @@
     import MotionContainer from './_MotionContainer.svelte'
     import type { HTMLElementProps } from '../types.js'
 
-    type Props = HTMLElementProps
-
-    let { children, ...rest } = $props<HTMLElementProps>()
+    let { children, ...rest }: HTMLElementProps = $props()
 </script>
 
 <MotionContainer tag="legend" {...rest}>

package/dist/html/Li.svelte

@@ -2,9 +2,7 @@
     import MotionContainer from './_MotionContainer.svelte'
     import type { HTMLElementProps } from '../types.js'
 
-    type Props = HTMLElementProps
-
-    let { children, ...rest } = $props<HTMLElementProps>()
+    let { children, ...rest }: HTMLElementProps = $props()
 </script>
 
 <MotionContainer tag="li" {...rest}>

package/dist/html/Main.svelte

@@ -2,9 +2,7 @@
     import MotionContainer from './_MotionContainer.svelte'
     import type { HTMLElementProps } from '../types.js'
 
-    type Props = HTMLElementProps
-
-    let { children, ...rest } = $props<HTMLElementProps>()
+    let { children, ...rest }: HTMLElementProps = $props()
 </script>
 
 <MotionContainer tag="main" {...rest}>

package/dist/html/Nav.svelte

@@ -2,9 +2,7 @@
     import MotionContainer from './_MotionContainer.svelte'
     import type { HTMLElementProps } from '../types.js'
 
-    type Props = HTMLElementProps
-
-    let { children, ...rest } = $props<HTMLElementProps>()
+    let { children, ...rest }: HTMLElementProps = $props()
 </script>
 
 <MotionContainer tag="nav" {...rest}>

package/dist/html/Ol.svelte

@@ -2,9 +2,7 @@
     import MotionContainer from './_MotionContainer.svelte'
     import type { HTMLElementProps } from '../types.js'
 
-    type Props = HTMLElementProps
-
-    let { children, ...rest } = $props<HTMLElementProps>()
+    let { children, ...rest }: HTMLElementProps = $props()
 </script>
 
 <MotionContainer tag="ol" {...rest}>

package/dist/html/Option.svelte

@@ -2,9 +2,7 @@
     import MotionContainer from './_MotionContainer.svelte'
     import type { HTMLElementProps } from '../types.js'
 
-    type Props = HTMLElementProps
-
-    let { children, ...rest } = $props<HTMLElementProps>()
+    let { children, ...rest }: HTMLElementProps = $props()
 </script>
 
 <MotionContainer tag="option" {...rest}>

package/dist/html/P.svelte

@@ -2,9 +2,7 @@
     import MotionContainer from './_MotionContainer.svelte'
     import type { HTMLElementProps } from '../types.js'
 
-    type Props = HTMLElementProps
-
-    let { children, ...rest } = $props<HTMLElementProps>()
+    let { children, ...rest }: HTMLElementProps = $props()
 </script>
 
 <MotionContainer tag="p" {...rest}>

package/dist/html/Param.svelte

@@ -2,7 +2,7 @@
     import MotionContainer from './_MotionContainer.svelte'
     import type { HTMLVoidElementProps } from '../types.js'
 
-    let { ...rest } = $props<HTMLVoidElementProps>()
+    let { ...rest }: HTMLVoidElementProps = $props()
 </script>
 
 <MotionContainer tag="param" {...rest} />

package/dist/html/Pre.svelte

@@ -2,9 +2,7 @@
     import MotionContainer from './_MotionContainer.svelte'
     import type { HTMLElementProps } from '../types.js'
 
-    type Props = HTMLElementProps
-
-    let { children, ...rest } = $props<HTMLElementProps>()
+    let { children, ...rest }: HTMLElementProps = $props()
 </script>
 
 <MotionContainer tag="pre" {...rest}>

package/dist/html/Section.svelte

@@ -2,9 +2,7 @@
     import MotionContainer from './_MotionContainer.svelte'
     import type { HTMLElementProps } from '../types.js'
 
-    type Props = HTMLElementProps
-
-    let { children, ...rest } = $props<HTMLElementProps>()
+    let { children, ...rest }: HTMLElementProps = $props()
 </script>
 
 <MotionContainer tag="section" {...rest}>

package/dist/html/Select.svelte

@@ -2,9 +2,7 @@
     import MotionContainer from './_MotionContainer.svelte'
     import type { HTMLElementProps } from '../types.js'
 
-    type Props = HTMLElementProps
-
-    let { children, ...rest } = $props<HTMLElementProps>()
+    let { children, ...rest }: HTMLElementProps = $props()
 </script>
 
 <MotionContainer tag="select" {...rest}>

package/dist/html/Source.svelte

@@ -2,7 +2,7 @@
     import MotionContainer from './_MotionContainer.svelte'
     import type { HTMLVoidElementProps } from '../types.js'
 
-    let { ...rest } = $props<HTMLVoidElementProps>()
+    let { ...rest }: HTMLVoidElementProps = $props()
 </script>
 
 <MotionContainer tag="source" {...rest} />

package/dist/html/Span.svelte

@@ -2,9 +2,7 @@
     import MotionContainer from './_MotionContainer.svelte'
     import type { HTMLElementProps } from '../types.js'
 
-    type Props = HTMLElementProps
-
-    let { children, ...rest } = $props<HTMLElementProps>()
+    let { children, ...rest }: HTMLElementProps = $props()
 </script>
 
 <MotionContainer tag="span" {...rest}>

package/dist/html/Table.svelte

@@ -2,9 +2,7 @@
     import MotionContainer from './_MotionContainer.svelte'
     import type { HTMLElementProps } from '../types.js'
 
-    type Props = HTMLElementProps
-
-    let { children, ...rest } = $props<HTMLElementProps>()
+    let { children, ...rest }: HTMLElementProps = $props()
 </script>
 
 <MotionContainer tag="table" {...rest}>

package/dist/html/Tbody.svelte

@@ -2,9 +2,7 @@
     import MotionContainer from './_MotionContainer.svelte'
     import type { HTMLElementProps } from '../types.js'
 
-    type Props = HTMLElementProps
-
-    let { children, ...rest } = $props<HTMLElementProps>()
+    let { children, ...rest }: HTMLElementProps = $props()
 </script>
 
 <MotionContainer tag="tbody" {...rest}>

package/dist/html/Td.svelte

@@ -2,9 +2,7 @@
     import MotionContainer from './_MotionContainer.svelte'
     import type { HTMLElementProps } from '../types.js'
 
-    type Props = HTMLElementProps
-
-    let { children, ...rest } = $props<HTMLElementProps>()
+    let { children, ...rest }: HTMLElementProps = $props()
 </script>
 
 <MotionContainer tag="td" {...rest}>

package/dist/html/Textarea.svelte

@@ -2,9 +2,7 @@
     import MotionContainer from './_MotionContainer.svelte'
     import type { HTMLElementProps } from '../types.js'
 
-    type Props = HTMLElementProps
-
-    let { children, ...rest } = $props<HTMLElementProps>()
+    let { children, ...rest }: HTMLElementProps = $props()
 </script>
 
 <MotionContainer tag="textarea" {...rest}>

package/dist/html/Tfoot.svelte

@@ -2,9 +2,7 @@
     import MotionContainer from './_MotionContainer.svelte'
     import type { HTMLElementProps } from '../types.js'
 
-    type Props = HTMLElementProps
-
-    let { children, ...rest } = $props<HTMLElementProps>()
+    let { children, ...rest }: HTMLElementProps = $props()
 </script>
 
 <MotionContainer tag="tfoot" {...rest}>

package/dist/html/Th.svelte

@@ -2,9 +2,7 @@
     import MotionContainer from './_MotionContainer.svelte'
     import type { HTMLElementProps } from '../types.js'
 
-    type Props = HTMLElementProps
-
-    let { children, ...rest } = $props<HTMLElementProps>()
+    let { children, ...rest }: HTMLElementProps = $props()
 </script>
 
 <MotionContainer tag="th" {...rest}>

package/dist/html/Thead.svelte

@@ -2,9 +2,7 @@
     import MotionContainer from './_MotionContainer.svelte'
     import type { HTMLElementProps } from '../types.js'
 
-    type Props = HTMLElementProps
-
-    let { children, ...rest } = $props<HTMLElementProps>()
+    let { children, ...rest }: HTMLElementProps = $props()
 </script>
 
 <MotionContainer tag="thead" {...rest}>

package/dist/html/Tr.svelte

@@ -2,9 +2,7 @@
     import MotionContainer from './_MotionContainer.svelte'
     import type { HTMLElementProps } from '../types.js'
 
-    type Props = HTMLElementProps
-
-    let { children, ...rest } = $props<HTMLElementProps>()
+    let { children, ...rest }: HTMLElementProps = $props()
 </script>
 
 <MotionContainer tag="tr" {...rest}>

package/dist/html/Track.svelte

@@ -2,7 +2,7 @@
     import MotionContainer from './_MotionContainer.svelte'
     import type { HTMLVoidElementProps } from '../types.js'
 
-    let { ...rest } = $props<HTMLVoidElementProps>()
+    let { ...rest }: HTMLVoidElementProps = $props()
 </script>
 
 <MotionContainer tag="track" {...rest} />

package/dist/html/Ul.svelte

@@ -2,9 +2,7 @@
     import MotionContainer from './_MotionContainer.svelte'
     import type { HTMLElementProps } from '../types.js'
 
-    type Props = HTMLElementProps
-
-    let { children, ...rest } = $props<HTMLElementProps>()
+    let { children, ...rest }: HTMLElementProps = $props()
 </script>
 
 <MotionContainer tag="ul" {...rest}>

package/dist/html/Wbr.svelte

@@ -2,7 +2,7 @@
     import MotionContainer from './_MotionContainer.svelte'
     import type { HTMLVoidElementProps } from '../types.js'
 
-    let { ...rest } = $props<HTMLVoidElementProps>()
+    let { ...rest }: HTMLVoidElementProps = $props()
 </script>
 
 <MotionContainer tag="wbr" {...rest} />

package/dist/html/_MotionContainer.svelte

@@ -1,24 +1,13 @@
 <script lang="ts">
     import { type Snippet } from 'svelte'
     import type { SvelteHTMLElements } from 'svelte/elements'
-    import type {
-        MotionInitial,
-        MotionAnimate,
-        MotionTransition,
-        MotionWhileTap
-    } from '../types.js'
+    import type { MotionProps } from '../types.js'
     import { animate, press } from 'motion'
     import { isNotEmpty, getCommonKeys } from '../utils/objects.js'
 
-    type Props = {
+    type Props = MotionProps & {
         children?: Snippet
         tag: keyof SvelteHTMLElements
-        initial?: MotionInitial
-        animate?: MotionAnimate
-        whileTap?: MotionWhileTap
-        transition?: MotionTransition
-        style?: string
-        class?: string
         [key: string]: unknown
     }
 

package/dist/html/_MotionContainer.svelte.d.ts

@@ -1,15 +1,9 @@
 import { type Snippet } from 'svelte';
 import type { SvelteHTMLElements } from 'svelte/elements';
-import type { MotionInitial, MotionAnimate, MotionTransition, MotionWhileTap } from '../types.js';
-type Props = {
+import type { MotionProps } from '../types.js';
+type Props = MotionProps & {
     children?: Snippet;
     tag: keyof SvelteHTMLElements;
-    initial?: MotionInitial;
-    animate?: MotionAnimate;
-    whileTap?: MotionWhileTap;
-    transition?: MotionTransition;
-    style?: string;
-    class?: string;
     [key: string]: unknown;
 };
 declare const MotionContainer: import("svelte").Component<Props, {}, "">;

package/dist/html/_template.template

@@ -2,9 +2,7 @@
     import MotionContainer from './_MotionContainer.svelte'
     import type { HTMLElementProps } from '../types.js'
 
-    type Props = HTMLElementProps
-
-    let { children, ...rest } = $props<HTMLElementProps>()
+    let { children, ...rest }: HTMLElementProps = $props()
 </script>
 
 <MotionContainer tag="{{tag}}" {...rest}>

package/dist/html/_template_void.template

@@ -2,7 +2,7 @@
     import MotionContainer from './_MotionContainer.svelte'
     import type { HTMLVoidElementProps } from '../types.js'
 
-    let { ...rest } = $props<HTMLVoidElementProps>()
+    let { ...rest }: HTMLVoidElementProps = $props()
 </script>
 
 <MotionContainer tag="{{tag}}" {...rest} />

package/dist/html/index.d.ts

@@ -54,3 +54,60 @@ import Track from './Track.svelte';
 import Ul from './Ul.svelte';
 import Wbr from './Wbr.svelte';
 export { A, Area, Article, Aside, Base, Blockquote, Br, Button, Code, Col, Dd, Div, Dl, Dt, Embed, Fieldset, Figcaption, Figure, Footer, Form, H1, H2, H3, H4, H5, H6, Header, Hr, Img, Input, Label, Legend, Li, Main, Nav, Ol, Option, P, Param, Pre, Section, Select, Source, Span, Table, Tbody, Td, Textarea, Tfoot, Th, Thead, Tr, Track, Ul, Wbr };
+export type MotionComponents = {
+    a: typeof A;
+    article: typeof Article;
+    aside: typeof Aside;
+    blockquote: typeof Blockquote;
+    button: typeof Button;
+    code: typeof Code;
+    dd: typeof Dd;
+    div: typeof Div;
+    dl: typeof Dl;
+    dt: typeof Dt;
+    fieldset: typeof Fieldset;
+    figcaption: typeof Figcaption;
+    figure: typeof Figure;
+    footer: typeof Footer;
+    form: typeof Form;
+    h1: typeof H1;
+    h2: typeof H2;
+    h3: typeof H3;
+    h4: typeof H4;
+    h5: typeof H5;
+    h6: typeof H6;
+    header: typeof Header;
+    label: typeof Label;
+    legend: typeof Legend;
+    li: typeof Li;
+    main: typeof Main;
+    nav: typeof Nav;
+    ol: typeof Ol;
+    option: typeof Option;
+    p: typeof P;
+    pre: typeof Pre;
+    section: typeof Section;
+    select: typeof Select;
+    span: typeof Span;
+    table: typeof Table;
+    tbody: typeof Tbody;
+    td: typeof Td;
+    textarea: typeof Textarea;
+    tfoot: typeof Tfoot;
+    th: typeof Th;
+    thead: typeof Thead;
+    tr: typeof Tr;
+    ul: typeof Ul;
+    area: typeof Area;
+    base: typeof Base;
+    br: typeof Br;
+    col: typeof Col;
+    embed: typeof Embed;
+    hr: typeof Hr;
+    img: typeof Img;
+    input: typeof Input;
+    param: typeof Param;
+    source: typeof Source;
+    track: typeof Track;
+    wbr: typeof Wbr;
+};

package/dist/index.d.ts

@@ -1,6 +1,3 @@
-import * as html from './html/index.js';
-type MotionComponents = {
-    [K in Lowercase<keyof typeof html>]: (typeof html)[Capitalize<K>];
-};
+import type { MotionComponents } from './html/index.js';
 export declare const motion: MotionComponents;
 export type { MotionAnimate, MotionInitial, MotionTransition, MotionWhileTap } from './types.js';

package/dist/types.d.ts

@@ -4,11 +4,19 @@ export type MotionInitial = DOMKeyframesDefinition | undefined;
 export type MotionAnimate = DOMKeyframesDefinition | undefined;
 export type MotionTransition = AnimationOptions | undefined;
 export type MotionWhileTap = DOMKeyframesDefinition | undefined;
-export type HTMLElementProps = {
+export type MotionProps = {
+    initial?: MotionInitial;
+    animate?: MotionAnimate;
+    transition?: MotionTransition;
+    whileTap?: MotionWhileTap;
+    style?: string;
+    class?: string;
+};
+export type HTMLElementProps = MotionProps & {
     children?: Snippet;
     [key: string]: unknown;
 };
-export type HTMLVoidElementProps = {
+export type HTMLVoidElementProps = MotionProps & {
     [key: string]: unknown;
 } & {
     children?: never;

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@humanspeak/svelte-motion",
-    "version": "0.0.8",
+    "version": "0.0.9",
     "description": "A lightweight 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.",
     "keywords": [
         "svelte",