@soroush.tech/design-system 2.0.0-rc.2 → 2.0.0-rc.4

package/dist/RangeInput.d.cts

@@ -0,0 +1,79 @@
+import { nt as Theme } from "./index-XN4-ZqTB.cjs";
+import { ChangeEvent, KeyboardEvent, ReactNode, SyntheticEvent } from "react";
+import { LayoutProps, SpaceProps } from "@soroush.tech/styled-system";
+//#region src/RangeInput/utils/range.d.ts
+/** A tick on the rail, with a label under it when it has one. */
+interface Mark {
+  value: number;
+  label?: ReactNode;
+}
+type Orientation = 'horizontal' | 'vertical';
+//#endregion
+//#region src/RangeInput/hooks/useRangeInput.d.ts
+type RangeInputValue = number | number[];
+//#endregion
+//#region src/RangeInput/RangeInput.d.ts
+type RangeInputTrack = 'normal' | false | 'inverted';
+type RangeInputValueLabel = 'auto' | 'on' | 'off';
+interface RangeInputProps extends SpaceProps<Theme>, Pick<LayoutProps<Theme>, 'width' | 'height' | 'minWidth' | 'maxWidth' | 'minHeight' | 'maxHeight'> {
+  /** The value - a number for one thumb, an array for one per entry. Controlled with `onChange`. */
+  value?: number | readonly number[];
+  /** The value at first, when uncontrolled. Default: `min`. */
+  defaultValue?: number | readonly number[];
+  /** Fired as the value changes. `event.target` is `{ value, name }`, as a form library reads it. */
+  onChange?: (event: Event, value: RangeInputValue, activeThumb: number) => void;
+  /** Fired when a change is done: on release, and after every key. */
+  onChangeCommitted?: (event: Event | React.SyntheticEvent, value: RangeInputValue) => void;
+  /** Default: `0`. */
+  min?: number;
+  /** Default: `100`. */
+  max?: number;
+  /** The step - `null` limits the value to `marks`. Default: `1`. */
+  step?: number | null;
+  /** The step of PageUp, PageDown and Shift with an arrow. Default: `10`. */
+  shiftStep?: number;
+  /** `true` marks every step; or the marks, each with the label it shows under it. Default: `false`. */
+  marks?: boolean | readonly Mark[];
+  orientation?: Orientation;
+  /** The line between the thumbs - `'inverted'` fills the rest, `false` draws none. Default: `'normal'`. */
+  track?: RangeInputTrack;
+  /** The value as it is shown and announced - not what is stored. Default: itself. */
+  scale?: (value: number) => number;
+  /** When a thumb shows its value: always, while hovered or focused, or never. Default: `'off'`. */
+  valueLabel?: RangeInputValueLabel;
+  /** What the label says. Default: the scaled value. */
+  formatValueLabel?: (value: number, index: number) => ReactNode;
+  /** Names each thumb - no built-in text. A range needs one; a single thumb may take `aria-label`. */
+  getAriaLabel?: (index: number) => string;
+  /** The value's text for each thumb, where the number alone isn't clear. */
+  getAriaValueText?: (value: number, index: number) => string;
+  /** A thumb passes its neighbour, taking its place. Without it a thumb stops at its neighbour. Default: `true`. */
+  shouldSwapThumbs?: boolean;
+  /** Resolves against `theme.sizes`. Default: its `FormControl`'s, else `'md'`. */
+  size?: keyof Theme['sizes'];
+  /** The track's and thumbs' color - resolves to `theme.palette`. Default: its `FormControl`'s, else `'primary'`. */
+  color?: keyof Theme['palette'];
+  disabled?: boolean;
+  /** The track and thumbs take the error color. */
+  error?: boolean;
+  /** What a form submits each thumb's value as. */
+  name?: string;
+  /** On the first thumb's input, which a `FormLabel` targets. Default: its `FormControl`'s. */
+  id?: string;
+  className?: string;
+  'aria-label'?: string;
+  'aria-labelledby'?: string;
+  'aria-describedby'?: string;
+  'data-testid'?: string;
+}
+/**
+ * @description A slider: one value on a range, or two or more thumbs for a range of values.
+ * Each thumb is a visually hidden native `<input type="range">`, so the keys (the arrows, Page,
+ * Home and End), assistive technology and forms work as the platform's; the pointer drags a thumb,
+ * touch included. Marks, a value label, a vertical layout and a track drawn or not or inverted.
+ * In a `FormControl` it takes the field's size, color, error, and disabled state, and its
+ * `FormLabel` targets the first thumb.
+ */
+declare function RangeInput({ value, defaultValue, onChange, onChangeCommitted, min, max, step: stepProp, shiftStep: shiftStepProp, marks: marksProp, orientation: orientationProp, track: trackProp, scale, valueLabel: valueLabelProp, formatValueLabel, getAriaLabel, getAriaValueText, shouldSwapThumbs: shouldSwapProp, size: sizeProp, color: colorProp, disabled: disabledProp, error: errorProp, name, id: idProp, className, 'aria-label': ariaLabel, 'aria-labelledby': ariaLabelledby, 'aria-describedby': ariaDescribedby, 'data-testid': dataTestid, ...rest }: Readonly<RangeInputProps>): import("react").JSX.Element;
+//#endregion
+export { RangeInput, type Mark as RangeInputMark, RangeInputProps, RangeInputTrack, RangeInputValueLabel };

package/dist/RangeInput.d.mts

@@ -0,0 +1,79 @@
+import { nt as Theme } from "./index-CRQ7XLri.mjs";
+import { LayoutProps, SpaceProps } from "@soroush.tech/styled-system";
+import { ChangeEvent, KeyboardEvent, ReactNode, SyntheticEvent } from "react";
+//#region src/RangeInput/utils/range.d.ts
+/** A tick on the rail, with a label under it when it has one. */
+interface Mark {
+  value: number;
+  label?: ReactNode;
+}
+type Orientation = 'horizontal' | 'vertical';
+//#endregion
+//#region src/RangeInput/hooks/useRangeInput.d.ts
+type RangeInputValue = number | number[];
+//#endregion
+//#region src/RangeInput/RangeInput.d.ts
+type RangeInputTrack = 'normal' | false | 'inverted';
+type RangeInputValueLabel = 'auto' | 'on' | 'off';
+interface RangeInputProps extends SpaceProps<Theme>, Pick<LayoutProps<Theme>, 'width' | 'height' | 'minWidth' | 'maxWidth' | 'minHeight' | 'maxHeight'> {
+  /** The value - a number for one thumb, an array for one per entry. Controlled with `onChange`. */
+  value?: number | readonly number[];
+  /** The value at first, when uncontrolled. Default: `min`. */
+  defaultValue?: number | readonly number[];
+  /** Fired as the value changes. `event.target` is `{ value, name }`, as a form library reads it. */
+  onChange?: (event: Event, value: RangeInputValue, activeThumb: number) => void;
+  /** Fired when a change is done: on release, and after every key. */
+  onChangeCommitted?: (event: Event | React.SyntheticEvent, value: RangeInputValue) => void;
+  /** Default: `0`. */
+  min?: number;
+  /** Default: `100`. */
+  max?: number;
+  /** The step - `null` limits the value to `marks`. Default: `1`. */
+  step?: number | null;
+  /** The step of PageUp, PageDown and Shift with an arrow. Default: `10`. */
+  shiftStep?: number;
+  /** `true` marks every step; or the marks, each with the label it shows under it. Default: `false`. */
+  marks?: boolean | readonly Mark[];
+  orientation?: Orientation;
+  /** The line between the thumbs - `'inverted'` fills the rest, `false` draws none. Default: `'normal'`. */
+  track?: RangeInputTrack;
+  /** The value as it is shown and announced - not what is stored. Default: itself. */
+  scale?: (value: number) => number;
+  /** When a thumb shows its value: always, while hovered or focused, or never. Default: `'off'`. */
+  valueLabel?: RangeInputValueLabel;
+  /** What the label says. Default: the scaled value. */
+  formatValueLabel?: (value: number, index: number) => ReactNode;
+  /** Names each thumb - no built-in text. A range needs one; a single thumb may take `aria-label`. */
+  getAriaLabel?: (index: number) => string;
+  /** The value's text for each thumb, where the number alone isn't clear. */
+  getAriaValueText?: (value: number, index: number) => string;
+  /** A thumb passes its neighbour, taking its place. Without it a thumb stops at its neighbour. Default: `true`. */
+  shouldSwapThumbs?: boolean;
+  /** Resolves against `theme.sizes`. Default: its `FormControl`'s, else `'md'`. */
+  size?: keyof Theme['sizes'];
+  /** The track's and thumbs' color - resolves to `theme.palette`. Default: its `FormControl`'s, else `'primary'`. */
+  color?: keyof Theme['palette'];
+  disabled?: boolean;
+  /** The track and thumbs take the error color. */
+  error?: boolean;
+  /** What a form submits each thumb's value as. */
+  name?: string;
+  /** On the first thumb's input, which a `FormLabel` targets. Default: its `FormControl`'s. */
+  id?: string;
+  className?: string;
+  'aria-label'?: string;
+  'aria-labelledby'?: string;
+  'aria-describedby'?: string;
+  'data-testid'?: string;
+}
+/**
+ * @description A slider: one value on a range, or two or more thumbs for a range of values.
+ * Each thumb is a visually hidden native `<input type="range">`, so the keys (the arrows, Page,
+ * Home and End), assistive technology and forms work as the platform's; the pointer drags a thumb,
+ * touch included. Marks, a value label, a vertical layout and a track drawn or not or inverted.
+ * In a `FormControl` it takes the field's size, color, error, and disabled state, and its
+ * `FormLabel` targets the first thumb.
+ */
+declare function RangeInput({ value, defaultValue, onChange, onChangeCommitted, min, max, step: stepProp, shiftStep: shiftStepProp, marks: marksProp, orientation: orientationProp, track: trackProp, scale, valueLabel: valueLabelProp, formatValueLabel, getAriaLabel, getAriaValueText, shouldSwapThumbs: shouldSwapProp, size: sizeProp, color: colorProp, disabled: disabledProp, error: errorProp, name, id: idProp, className, 'aria-label': ariaLabel, 'aria-labelledby': ariaLabelledby, 'aria-describedby': ariaDescribedby, 'data-testid': dataTestid, ...rest }: Readonly<RangeInputProps>): import("react").JSX.Element;
+//#endregion
+export { RangeInput, type Mark as RangeInputMark, RangeInputProps, RangeInputTrack, RangeInputValueLabel };