fix: empty npm package, update readme, types error, build scripts

Author: AmitDigga

.github/workflows/npm_publish.yml

@@ -31,6 +31,7 @@ jobs:
           registry-url: 'https://registry.npmjs.org/'
       - run: npm install
       - run: npm test
+      - run: npm run build
       - run: npm publish
         env:
           NODE_AUTH_TOKEN: ${{ secrets.NPM_AUTH_TOKEN }}

README.md

@@ -1,68 +1,90 @@
 # React Proportion Slider
 
-> **Note:** This package is currently in beta
+> **Note:** This package is currently in beta.
 
 A React component that allows users to adjust the proportion of two elements using a slider.
 
 ## Installation
 
-(Not yet published to npm)
-
 ```bash
 npm install react-proportion-slider
 ```
 
+```bash
+yarn add react-proportion-slider
+```
+
 ## Usage
 
 ```tsx
-import React from "react";
-import { ProportionSlider } from "react-proportion-slider";
-
 function App() {
   const [proportions, setProportions] = React.useState<[number, number]>([
     50, 50,
   ]);
   return (
-    <div
-      style={{
-        height: "100%",
-        flex: 1,
-        padding: "20px 200px",
-        display: "flex",
-        flexDirection: "column",
-        justifyContent: "center",
-      }}
-    >
+    <div>
       <ProportionSlider
         value={proportions}
+        width={500}
         proportions={[
           {
-            name: "Skill",
+            label: "Skill",
             backgroundColor: "#31332E",
           },
           {
-            name: "3.7 Sonnet",
+            label: "3.7 Sonnet",
             backgroundColor: "#5f625C",
           },
         ]}
         onChange={(change) => {
           setProportions(change);
         }}
-        sliderOptions={{
+        knobOptions={{
           width: 5,
           gap: 5,
           backgroundColor: "#EC1308",
         }}
-        options={{
-          height: 50,
-          displayValueType: "percentage",
-        }}
+        height={50}
       />
     </div>
   );
 }
 ```
 
+## Props
+
+| Prop Name   | Type                                 | Required | Description                                         |
+| ----------- | ------------------------------------ | -------- | --------------------------------------------------- |
+| value       | [number, number]                     | Yes      | Current values of the two proportions [left, right] |
+| proportions | [ProportionDetail, ProportionDetail] | Yes      | Details for the two proportions [left, right]       |
+| onChange    | (values: [number, number]) => void   | No       | Callback when values change                         |
+| knobOptions | SliderKnobOptions                    | No       | Appearance of the slider knob                       |
+| height      | number                               | No       | Height of the slider in pixels                      |
+| width       | number                               | No       | Width of the slider in pixels                       |
+| disabled    | boolean                              | No       | Whether the slider is disabled                      |
+| className   | string                               | No       | Custom class name for the slider container          |
+| style       | React.CSSProperties                  | No       | Custom styles for the slider container              |
+| ariaLabel   | string                               | No       | Accessibility label for the slider                  |
+
+### ProportionDetail
+
+| Property        | Type   | Required | Description                                     |
+| --------------- | ------ | -------- | ----------------------------------------------- |
+| label           | string | Yes      | Custom label to display                         |
+| backgroundColor | string | No       | Color of the proportion segment                 |
+| data            | any    | No       | Optional data to associate with this proportion |
+| ariaLabel       | string | No       | Accessibility label for this proportion         |
+
+### SliderKnobOptions
+
+| Property        | Type                | Required | Description                          |
+| --------------- | ------------------- | -------- | ------------------------------------ |
+| width           | number              | No       | Width of the slider knob in pixels   |
+| gap             | number              | No       | Gap around the slider knob in pixels |
+| backgroundColor | string              | No       | Color of the slider knob             |
+| className       | string              | No       | Custom class name for the knob       |
+| style           | React.CSSProperties | No       | Custom styles for the knob           |
+
 ## Future Features
 
 1. Make it possible to adjust the proportion of more than two elements

package-lock.json

@@ -1,7 +1,7 @@
 {
   "name": "react-proportion-slider",
   "private": false,
-  "version": "0.9.3",
+  "version": "0.9.4",
   "type": "module",
   "files": [
     "dist"
@@ -11,9 +11,9 @@
   "types": "./dist/index.d.ts",
   "exports": {
     ".": {
+      "types": "./dist/index.d.ts",
       "import": "./dist/react-proportion-slider.es.js",
-      "require": "./dist/react-proportion-slider.umd.js",
-      "types": "./dist/index.d.ts"
+      "require": "./dist/react-proportion-slider.umd.js"
     }
   },
   "scripts": {
@@ -24,10 +24,6 @@
     "test": "vitest",
     "test:watch": "vitest --watch"
   },
-  "dependencies": {
-    "react": ">=16.8.0",
-    "react-dom": ">=16.8.0"
-  },
   "devDependencies": {
     "@eslint/js": "^9.21.0",
     "@testing-library/react": "^14.2.1",
@@ -39,6 +35,8 @@
     "eslint-plugin-react-refresh": "^0.4.19",
     "globals": "^15.15.0",
     "jsdom": "^24.0.0",
+    "react": ">=16.8.0",
+    "react-dom": ">=16.8.0",
     "typescript": "~5.7.2",
     "typescript-eslint": "^8.24.1",
     "vite": "^6.2.0",

package.json

@@ -1,6 +1,10 @@
 import { useCallback, useRef, CSSProperties, useEffect } from "react";
-import { DynamicChildPositioner, SliderKnob } from "./components";
-import { ProportionDetail, SliderKnobOptions } from "./components/types";
+import {
+  DynamicChildPositioner,
+  SliderKnob,
+  ProportionDetail,
+  SliderKnobOptions,
+} from "./components";
 import { EventType, getClientX, clamp } from "./utilities";
 
 export type ProportionSliderProps = {

src/ProportionSlider.tsx

@@ -1,3 +1,4 @@
 export * from "./DynamicChildPositioner";
 export * from "./HiddenSpaceTaker";
 export * from "./SliderKnob";
+export * from "./types";