mirror of
https://github.com/kuhyx/utils.git
synced 2026-11-10 20:07:18 +01:00
Krzysztof kuhy Rudnicki
03bf1ed08b
The web counterpart to design_system (Dart): one :root block of frozen tokens plus the components that were duplicated across repos. Extracted from dufs-cloud and awesome-mcp-explorer, which both now consume it. - tokens.css: the frozen palette, spacing/radius/type scales, shadow policy and focus ring, under the canonical variable names from unified-design-system. Also ships the global :focus-visible rule, rather than leaving each consumer to remember it. - RangeSlider: reconciled from the two drifted copies. Takes the accessible DOM from awesome-mcp-explorer (real <button> thumbs with role="slider" and the aria-value* trio) and grab-the-nearer-thumb from dufs-cloud. Keyboard support (arrows/PageUp/PageDown/Home/End) is new: both donors were pointer-only, which the design system rules out, and an arrow-key-deaf role="slider" is an ARIA role that lies. - quantile.ts + fuzzyMatch: the genuinely duplicated helpers. FilterBar is deliberately absent. The two same-named components share no structure -- a horizontal <select> strip over files vs a vertical tri-state chip sidebar over servers, with disjoint FilterState, props and sort keys. It is the name-collision-is-not-a-duplicate trap, so extracting it would ship a widget nobody imports. dist/ is committed (and un-ignored against the root rule) because Vite does not transpile dependencies; consumers stay at zero config. Consumed via pnpm's &path:/web_ui suffix -- npm cannot install from a subdirectory of a git repo. Co-Authored-By: Claude Opus 5 (1M context) <noreply@anthropic.com> Claude-Session: https://claude.ai/code/session_01U4Rj3s7K2qzrLNgJqqPhno
23 lines
1.3 KiB
TypeScript
23 lines
1.3 KiB
TypeScript
export interface RangeSliderProps {
|
|
/**
|
|
* Formats a value for the head readout. Omit it (with `label`) to render a
|
|
* bare track — dufs-cloud's wrappers draw their own labels and value notes,
|
|
* so a built-in head would duplicate them.
|
|
*/
|
|
readonly format?: (value: number) => string;
|
|
/** Current upper bound; equal to the distribution max when unconstrained. */
|
|
readonly hi: number;
|
|
/** Accessible name. Falls back to a generic one when omitted. */
|
|
readonly label?: string;
|
|
/** Current lower bound; equal to the distribution min when unconstrained. */
|
|
readonly lo: number;
|
|
/** Reports both thumb values (raw, clamped so lo <= hi) on every change. */
|
|
readonly onChange: (lo: number, hi: number) => void;
|
|
/** The full ascending distribution — not just its endpoints. */
|
|
readonly values: readonly number[];
|
|
}
|
|
/** Steps one thumb by `delta` positions through the distribution. Pure, so the
|
|
* keyboard contract is testable without layout. */
|
|
export declare function steppedValue(values: readonly number[], current: number, delta: number): number;
|
|
export declare function RangeSlider({ format, hi, label, lo, onChange, values, }: RangeSliderProps): null | React.JSX.Element;
|
|
//# sourceMappingURL=range-slider.d.ts.map
|