react-proportion-slider 0.9.2 → 0.9.4

package/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/dist/ProportionSlider.d.ts

@@ -0,0 +1,37 @@
+import { CSSProperties } from 'react';
+import { ProportionDetail, SliderKnobOptions } from './components';
+export type ProportionSliderProps = {
+    /**
+     * Current values of the two proportions [left, right]
+     * These should be positive numbers
+     */
+    value: [number, number];
+    /**
+     * Details for the two proportions [left, right]
+     */
+    proportions: [ProportionDetail, ProportionDetail];
+    /**
+     * Callback when values change
+     * @param values The new values [left, right]
+     */
+    onChange?: (values: [number, number]) => void;
+    /**
+     * Appearance of the slider knob
+     */
+    knobOptions?: SliderKnobOptions;
+    /** Height of the slider in pixels */
+    height?: number;
+    /** Width of the slider in pixels */
+    width?: number;
+    /** Whether the slider is disabled */
+    disabled?: boolean;
+    /** Custom class name for the slider container */
+    className?: string;
+    /** Custom styles for the slider container */
+    style?: CSSProperties;
+    /**
+     * Accessibility options
+     */
+    ariaLabel?: string;
+};
+export declare const ProportionSlider: ({ value, proportions, onChange, knobOptions, disabled, height, ariaLabel, className, style, width, }: ProportionSliderProps) => import("react/jsx-runtime").JSX.Element;

package/dist/components/DynamicChildPositioner.d.ts

@@ -0,0 +1,10 @@
+import { ProportionDetail } from './types';
+type DynamicChildPositionerProps = {
+    detail: ProportionDetail;
+    primaryNode: "left" | "right";
+    width: number | string;
+    ariaLabel?: string;
+    valueLabel: string;
+};
+export declare const DynamicChildPositioner: ({ detail, valueLabel, primaryNode, width, ariaLabel, }: DynamicChildPositionerProps) => import("react/jsx-runtime").JSX.Element;
+export {};

package/dist/components/HiddenSpaceTaker.d.ts

@@ -0,0 +1,6 @@
+import { default as React } from 'react';
+type HiddenSpaceTakerProps = {
+    children: React.ReactNode;
+};
+export declare const HiddenSpaceTaker: ({ children }: HiddenSpaceTakerProps) => import("react/jsx-runtime").JSX.Element;
+export {};

package/dist/components/SliderKnob.d.ts

@@ -0,0 +1,10 @@
+import { CSSProperties } from 'react';
+export type SliderKnobProps = {
+    className?: string;
+    width: number;
+    gap: number;
+    backgroundColor?: string;
+    style?: CSSProperties;
+    disabled?: boolean;
+};
+export declare const SliderKnob: ({ className, width, gap, backgroundColor, style, disabled, }: SliderKnobProps) => import("react/jsx-runtime").JSX.Element;

package/dist/components/index.d.ts

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

package/dist/components/types.d.ts

@@ -0,0 +1,22 @@
+import { CSSProperties } from 'react';
+export type SliderKnobOptions = {
+    /** Width of the slider knob in pixels */
+    width?: number;
+    /** Gap around the slider knob in pixels */
+    gap?: number;
+    /** Color of the slider knob */
+    backgroundColor?: string;
+    /** Custom class name for the knob */
+    className?: string;
+    /** Custom styles for the knob */
+    style?: CSSProperties;
+};
+export type ProportionDetail = {
+    /** Custom label to display instead of percentage or value */
+    label: string;
+    /** Color of the proportion segment */
+    backgroundColor?: string;
+    /** Optional data to associate with this proportion */
+    data?: unknown;
+    ariaLabel?: string;
+};

package/dist/index.d.ts

@@ -0,0 +1,3 @@
+import { ProportionSlider } from './ProportionSlider';
+export * from './ProportionSlider';
+export default ProportionSlider;