Rename CSS file to have same name

docs/package.json

@@ -16,7 +16,7 @@
     "@types/react": "^18.0.21",
     "@types/react-dom": "^18.0.6",
     "astro": "^2.7.0",
-    "driver.js": "1.1.1-next.0",
+    "driver.js": "1.1.2-next.0",
     "react": "^18.0.0",
     "react-dom": "^18.0.0",
     "react-fast-marquee": "^1.6.0",

docs/pnpm-lock.yaml

@@ -24,8 +24,8 @@ dependencies:
     specifier: ^2.7.0
     version: 2.7.0
   driver.js:
-    specifier: 1.1.1-next.0
-    version: 1.1.1-next.0
+    specifier: 1.1.2-next.0
+    version: 1.1.2-next.0
   react:
     specifier: ^18.0.0
     version: 18.2.0
@@ -1376,8 +1376,8 @@ packages:
   /dlv@1.1.3:
     resolution: {integrity: sha512-+HlytyjlPKnIG8XuRG8WvmBP8xs8P71y+SKKS6ZXWoEgLuePxtDoUEiH7WkdePWrQ5JBpE6aoVqfZfJUQkjXwA==}
 
-  /driver.js@1.1.1-next.0:
-    resolution: {integrity: sha512-hXBZzvcVsU0MlNozeQbp3S49fUuPaKTDVNQe2hKK57nQCmr5WgCE3QVi2IgDMeEI6a+z7UDpbRnCHJt+Lt/NkQ==}
+  /driver.js@1.1.2-next.0:
+    resolution: {integrity: sha512-2VrKUesC5Cs0OTSze2fhpkiHF4+wNxEwwOuD9AtCWiLDhtwc5En3ktHeP057yhSfEvaUQihffchylQ001zEPSQ==}
     dev: false
 
   /dset@3.1.2:

docs/src/components/examples/SimpleHighlight.tsx

@@ -1,15 +1,25 @@
 import { useEffect } from "react";
+import { Config, driver } from "driver.js";
+import "driver.js/dist/style.css";
+
 import type { DriveStep } from "driver.js";
 
 type SimpleHighlightProps = {
-  popover: DriveStep.Popover;
-}
+  config: Config;
+  step: DriveStep;
+};
+
+export function SimpleHighlight(props: SimpleHighlightProps) {
+  const { config, step } = props;
+
+  function onClick() {
+    const driverObj = driver(config);
+    driverObj.highlight(step);
+  }
 
-export function SimpleHighlight() {
-  useEffect(() => {
-    console.log('in browser');
-  }, []);
   return (
-    <button onClick={() => alert('sup')} className='w-full rounded-md bg-black p-2 text-white'>Highlight Something</button>
+    <button onClick={onClick} className="w-full rounded-md bg-black p-2 text-white">
+      Highlight Something
+    </button>
   );
-}
+}

docs/src/content/guides/basic-usage.mdx

@@ -8,19 +8,25 @@ import { SimpleHighlight } from "../../components/examples/SimpleHighlight.tsx";
 
 Once installed, you can import and start using the library. Given below is a simple example of how to highlight a single element.
 
-<div>
-```js
-import Driver from 'driver.js';
-import 'driver.js/dist/driver.min.css';
+<div id="simple-example">
+  ```js
+  import Driver from 'driver.js';
+  import 'driver.js/dist/driver.min.css';
 
-const driver = new Driver();
-driver.highlight({
+  const driver = new Driver();
+  driver.highlight({
   element: '#some-element',
   popover: {
-    title: 'Title for the Popover',
-    description: 'Description for it',
-  },
+  title: 'Title for the Popover',
+  description: 'Description for it',
+},
 });
-```
-<SimpleHighlight client:load />
+  ```
+  <SimpleHighlight step={{
+    element: "#simple-example",
+    popover: {
+      title: "Title for the Popover",
+      description: "Description for it",
+    },
+  }} client:load />
 </div>

index.html

@@ -338,6 +338,7 @@ npm install driver.js</pre
     </div>
     <script type="module">
       import { driver } from "./src/driver.ts";
+      import "./src/driver.css";
 
       const basicTourSteps = [
         {

package.json

@@ -9,6 +9,10 @@
     ".": {
       "require": "./dist/driver.js.cjs",
       "import": "./dist/driver.js.mjs"
+    },
+    "./dist/*.css": {
+      "import": "./dist/*.css",
+      "require": "./dist/*.css"
     }
   },
   "scripts": {

src/driver.ts

@@ -4,8 +4,6 @@ import { destroyEvents, initEvents, requireRefresh } from "./events";
 import { Config, configure, getConfig } from "./config";
 import { destroyHighlight, highlight } from "./highlight";
 import { destroyEmitter, listen } from "./emitter";
-
-import "./style.css";
 import { getState, resetState, setState } from "./state";
 
 export type DriveStep = {