No tailwind

README.md

@@ -10,7 +10,6 @@ The Scroll Magic Component is a React component that provides smooth scrolling f
 
 - sticky headers in both directions
 - scroll to header by click
-- support tailwind
 - typescript
 
 ## Installation
@@ -37,14 +36,14 @@ import { ScrollComponent } from 'react-scroll-magic';
 
 const App = () => {
   return (
-    <ScrollComponent>
-      <ScrollHeader>
+    <Scroll>
+      <Scroll.Header>
         <h1>Scroll down to see the magic!</h1>
-      </ScrollHeader>
-      <ScrollItem>
+      </Scroll.Header>
+      <Scroll.Item>
         <p>Keep scrolling...</p>
-      </ScrollItem>
-    </ScrollComponent>
+      </Scroll.Item>
+    </Scroll>
   );
 };
 

package.json

@@ -27,14 +27,10 @@
     "prepare": "npm run build",
     "storybook": "storybook dev -p 6006"
   },
-  "peerDependencies": {
+  "dependencies": {
     "react": "^18.0.0",
     "react-dom": "^18.0.0"
   },
-  "dependencies": {
-    "clsx": "^2.1.0",
-    "tailwind-merge": "^2.2.1"
-  },
   "devDependencies": {
     "eslint-plugin-import": "^2.31.0",
     "eslint-plugin-jsx-a11y": "^6.10.2",

src/components/Scroll/Scroll.stories.tsx

@@ -1,7 +1,5 @@
 import { Meta, Story } from '@storybook/react';
-import { Scroll } from './Scroll';
-import { ScrollHeader } from './ScrollHeader';
-import { ScrollItem } from './ScrollItem';
+import { Scroll } from './index';
 
 export default {
   title: 'Components/Scroll',
@@ -11,21 +9,21 @@ export default {
 const BunchOfItems = ({ numberOfItems }: { numberOfItems: number }) => {
   const items = Array.from({ length: numberOfItems }, (_, i) => i);
   return items.map((item) => (
-    <ScrollItem key={item} style={{ height: '20px', backgroundColor: '#b0b0b0' }}>
+    <Scroll.Item key={item} style={{ height: '20px', backgroundColor: '#b0b0b0' }}>
       Content {item}
-    </ScrollItem>
+    </Scroll.Item>
   ));
 };
 
 const Template: Story = (args) => (
   <Scroll style={{ height: '200px', width: '200px', overflow: 'auto', fontSize: '10px' }} {...args}>
-    <ScrollHeader style={{ height: '20px', backgroundColor: '#ce7ba4', width: '100%' }}>Header 1</ScrollHeader>
+    <Scroll.Header style={{ height: '20px', backgroundColor: '#ce7ba4', width: '100%' }}>Header 1</Scroll.Header>
     <BunchOfItems numberOfItems={20} />
-    <ScrollHeader style={{ height: '20px', backgroundColor: '#f58383', width: '100%' }}>Header 2</ScrollHeader>
+    <Scroll.Header style={{ height: '20px', backgroundColor: '#f58383', width: '100%' }}>Header 2</Scroll.Header>
     <BunchOfItems numberOfItems={20} />
-    <ScrollHeader style={{ height: '20px', backgroundColor: '#4378b8', width: '100%' }}>Header 3</ScrollHeader>
+    <Scroll.Header style={{ height: '20px', backgroundColor: '#4378b8', width: '100%' }}>Header 3</Scroll.Header>
     <BunchOfItems numberOfItems={20} />
-    <ScrollHeader style={{ height: '20px', backgroundColor: '#61d771', width: '100%' }}>Header 4</ScrollHeader>
+    <Scroll.Header style={{ height: '20px', backgroundColor: '#61d771', width: '100%' }}>Header 4</Scroll.Header>
     <BunchOfItems numberOfItems={20} />
   </Scroll>
 );

src/components/Scroll/ScrollHeader.tsx

@@ -35,9 +35,9 @@ export const ScrollHeader: React.FC<IScrollHeaderProps> = ({ children, style = {
   return (
     <li
       onClick={handleClick}
-      className={`${className} sticky flex box-border border-none list-none p-0 m-0 w-full z-10 cursor-pointer ${stickTo === 'top' || stickTo === 'all' ? 'top-0' : ''} ${stickTo === 'bottom' || stickTo === 'all' ? 'bottom-0' : ''}`}
+      className={`scroll-header ${className}`}
       style={{ ...style, top, bottom }}
-      aria-label="Accordion Header"
+      aria-label="Scroll Header"
       role="heading"
       aria-level={1}
       {...props}

src/components/Scroll/ScrollItem.tsx

@@ -6,11 +6,7 @@ export const ScrollItem: React.FC<React.PropsWithChildren<React.LiHTMLAttributes
   ...props
 }) => {
   return (
-    <li
-      role="listitem"
-      className={`${className} flex w-full box-border relative p-0 m-0 border-none list-none`}
-      {...props}
-    >
+    <li role="listitem" aria-label="Scroll Item" className={`scroll-item ${className}`} {...props}>
       {children}
     </li>
   );

src/components/Scroll/ScrollList.tsx

@@ -17,11 +17,7 @@ export const ScrollList: React.FC<React.PropsWithChildren<React.LiHTMLAttributes
   }, [listRef]);
 
   return (
-    <ul
-      ref={listRef}
-      className={`${className} box-border h-full m-0 p-0 w-full list-inside overflow-x-hidden overflow-y-scroll relative`}
-      {...props}
-    >
+    <ul ref={listRef} className={`scroll-list ${className}`} {...props}>
       {children}
     </ul>
   );

src/index.css

@@ -1,3 +1,35 @@
-@tailwind base;
-@tailwind components;
-@tailwind utilities;
+.scroll-list {
+  box-sizing: border-box;
+  height: 100%;
+  margin: 0;
+  padding: 0;
+  width: 100%;
+  list-style-position: inside;
+  overflow-x: hidden;
+  overflow-y: scroll;
+  position: relative;
+}
+
+.scroll-header {
+  position: sticky;
+  display: flex;
+  box-sizing: border-box;
+  border: none;
+  list-style: none;
+  padding: 0;
+  margin: 0;
+  width: 100%;
+  z-index: 10;
+  cursor: pointer;
+}
+
+.scroll-item {
+  display: flex;
+  width: 100%;
+  box-sizing: border-box;
+  position: relative;
+  padding: 0;
+  margin: 0;
+  border: none;
+  list-style: none;
+}