@funstack/ui 0.1.0-alpha.1 → 0.1.0-alpha.3

package/dist/slider/slider-label.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"slider-label.mjs","names":[],"sources":["../../src/slider/slider-label.tsx"],"sourcesContent":["\"use client\";\nimport { useCallback, useLayoutEffect, useRef } from \"react\";\nimport type { ComponentPropsWithRef, CSSProperties, ReactNode } from \"react\";\nimport type { RenderProp, StateValue } from \"../internal/types.js\";\nimport { useRender } from \"../internal/use-render.js\";\nimport { useSliderContext } from \"./slider-context.js\";\nimport type { SliderRootState, SliderValue } from \"./slider-root.js\";\n\nconst isDev = process.env.NODE_ENV !== \"production\";\n\n/** `T` defaults to `SliderValue`; pass it to narrow the state (`<Slider.Label<number>>`). */\nexport interface SliderLabelProps<T extends SliderValue = SliderValue> extends Omit<\n  ComponentPropsWithRef<\"label\">,\n  \"htmlFor\" | \"id\" | \"className\" | \"style\" | \"children\"\n> {\n  className?: StateValue<string | undefined, SliderRootState<T>>;\n  style?: StateValue<CSSProperties | undefined, SliderRootState<T>>;\n  children?: StateValue<ReactNode, SliderRootState<T>>;\n  /** Must stay a `<label>` when the slider has one thumb (the `for` association). */\n  render?: RenderProp<ComponentPropsWithRef<\"label\">, SliderRootState<T>>;\n}\n\n/**\n * The visible name of the slider: `<label for>` naming the only thumb's input, or, with several\n * thumbs, the element whose `id` the Root's `aria-labelledby` (`role=\"group\"`) points at, emitted\n * only while a Label is mounted. Owned keys: `id`, `htmlFor`.\n */\nexport function SliderLabel<T extends SliderValue = SliderValue>({\n  className,\n  style,\n  children,\n  render,\n  ...rest\n}: SliderLabelProps<T>) {\n  const ctx = useSliderContext(\"Slider.Label\");\n  const { registerLabel } = ctx;\n  useLayoutEffect(registerLabel, [registerLabel]);\n\n  const single = ctx.shown.length === 1;\n  const warnedElement = useRef(false);\n  const libraryRef = useCallback(\n    (element: HTMLElement) => {\n      if (isDev && single && !warnedElement.current && element.tagName !== \"LABEL\") {\n        warnedElement.current = true;\n        console.error(\n          `Slider.Label: expected a <label> element but got <${element.tagName.toLowerCase()}>. ` +\n            `With one thumb the Label names the input through \\`for\\`, which only a <label> has.`,\n        );\n      }\n      // A cleanup, so the ref is never called with `null`.\n      return () => {};\n    },\n    [single],\n  );\n\n  return useRender<ComponentPropsWithRef<\"label\">, SliderRootState<T>>({\n    defaultElement: \"label\",\n    render,\n    state: ctx.state as SliderRootState<T>,\n    className,\n    style,\n    children,\n    props: rest,\n    ref: libraryRef,\n    libraryProps: {\n      id: ctx.labelId,\n      htmlFor: single ? ctx.thumbId(0) : undefined,\n    },\n  });\n}\n\nSliderLabel.displayName = \"SliderLabel\";\n"],"mappings":";;;;;AAQA,MAAM,QAAQ,QAAQ,IAAI,aAAa;;;;;;AAmBvC,SAAgB,YAAiD,EAC/D,WACA,OACA,UACA,QACA,GAAG,QACmB;CACtB,MAAM,MAAM,iBAAiB,cAAc;CAC3C,MAAM,EAAE,kBAAkB;CAC1B,gBAAgB,eAAe,CAAC,aAAa,CAAC;CAE9C,MAAM,SAAS,IAAI,MAAM,WAAW;CACpC,MAAM,gBAAgB,OAAO,KAAK;CAClC,MAAM,aAAa,aAChB,YAAyB;EACxB,IAAI,SAAS,UAAU,CAAC,cAAc,WAAW,QAAQ,YAAY,SAAS;GAC5E,cAAc,UAAU;GACxB,QAAQ,MACN,qDAAqD,QAAQ,QAAQ,YAAY,EAAE,uFAErF;EACF;EAEA,aAAa,CAAC;CAChB,GACA,CAAC,MAAM,CACT;CAEA,OAAO,UAA8D;EACnE,gBAAgB;EAChB;EACA,OAAO,IAAI;EACX;EACA;EACA;EACA,OAAO;EACP,KAAK;EACL,cAAc;GACZ,IAAI,IAAI;GACR,SAAS,SAAS,IAAI,QAAQ,CAAC,IAAI,KAAA;EACrC;CACF,CAAC;AACH;AAEA,YAAY,cAAc"}

package/dist/slider/slider-root.d.mts

@@ -0,0 +1,111 @@
+import { ActionDetails, ChangeAction, ChangeReason, RenderProp, StateValue } from "../internal/types.mjs";
+import { CSSProperties, ComponentPropsWithRef, ReactNode } from "react";
+//#region src/slider/slider-root.d.ts
+/** One number (one thumb) or one number per thumb, in ascending order. */
+export type SliderValue = number | readonly number[];
+export type SliderOrientation = "horizontal" | "vertical";
+/** Details passed as the second argument of `Slider.Root`'s `valueChangeAction` (each step). */
+export interface SliderValueChangeDetails extends ActionDetails {
+  /**
+   * `"activate"`: the user moved a thumb (`details.event` is the native `input` event for a key
+   * press, the `pointerdown` / `pointermove` / `pointerup` for a drag, the `keydown` for a
+   * JS-normalised key).
+   * `"platform"`: a form reset (the `reset` event) or a value found in the inputs at mount
+   * (`undefined`).
+   * `"dismiss"`: the commit action rejected and the slider reverted to the committed value
+   * (uncontrolled mode; `undefined`).
+   */
+  readonly reason: ChangeReason;
+  /** Index of the thumb that moved; `null` on a platform path or a revert, where several may change. */
+  readonly thumb: number | null;
+}
+/** Details passed as the second argument of `Slider.Root`'s `valueCommitAction` (each gesture). */
+export interface SliderValueCommitDetails extends ActionDetails {
+  /**
+   * `"activate"`: a gesture ended (`details.event` is the native `change` event for a key press,
+   * the `pointerup` / `pointercancel` / `lostpointercapture` for a drag, the `keydown` for a
+   * JS-normalised key). `"platform"`: a form reset (the `reset` event) or mount reconciliation
+   * (`undefined`). Never `"dismiss"`.
+   */
+  readonly reason: ChangeReason;
+  /** Index of the thumb the gesture moved; `null` on a platform path. */
+  readonly thumb: number | null;
+}
+export interface SliderRootState<T extends SliderValue = number> {
+  /**
+   * The value the thumbs show: the value a gesture has reached while a pointer is captured or a
+   * step or commit is in flight, else the optimistic value. Content rendered from it must not
+   * suspend.
+   */
+  readonly value: T;
+  /** `value` as an array, one entry per thumb, in thumb order. */
+  readonly values: readonly number[];
+  /** A step or commit dispatched through this Slider is in flight. */
+  readonly pending: boolean;
+  /** A pointer is captured on a thumb. */
+  readonly dragging: boolean;
+  readonly orientation: SliderOrientation;
+  readonly disabled: boolean;
+  readonly min: number;
+  readonly max: number;
+  readonly step: number;
+}
+export interface SliderRootProps<T extends SliderValue = number> extends Omit<ComponentPropsWithRef<"div">, "defaultValue" | "role" | "className" | "style" | "children" | "aria-valuemin" | "aria-valuemax" | "aria-valuenow" | "aria-valuetext" | "aria-orientation"> {
+  /** Controlled value: one number, or one per thumb in ascending order. `undefined`: uncontrolled. */
+  value?: T;
+  /**
+   * Initial value in uncontrolled mode; also the form-reset target (latest value). Default: the
+   * platform's midpoint, `min + (max - min) / 2`, snapped to `step`.
+   */
+  defaultValue?: T;
+  /**
+   * Runs inside the Root's step transition on every step: each pointer move, each key press,
+   * each platform change, and the revert after a rejected commit (`reason: "dismiss"`,
+   * uncontrolled). Awaited; `data-pending` meanwhile (without this action a step starts no
+   * transition and is never pending). Adopt the value here in a controlled
+   * parent (`setValue(next)` in the sync prefix is a transition update). Not the place for a
+   * save: a pending async action entangles every transition in the app, and a drag is many
+   * steps. A `setState` after your own `await` needs `startTransition`.
+   */
+  valueChangeAction?: ChangeAction<T, SliderValueChangeDetails>;
+  /**
+   * Runs inside the Root's commit transition once per gesture: pointer release, each key press,
+   * a form reset, a value found at mount. Awaited; the thumb keeps the gesture's value and shows
+   * `data-pending` until it settles; in uncontrolled mode the value is committed when it
+   * resolves and reverts to the previous value if it rejects. May be a Server Function.
+   */
+  valueCommitAction?: ChangeAction<T, SliderValueCommitDetails>;
+  /** Default `0`. */
+  min?: number;
+  /**
+   * Default `100`. A `max` that is not on the step grid from `min` is unreachable, as on a
+   * native range (dev warning).
+   */
+  max?: number;
+  /** Default `1`. Must be positive. Values snap to `min + n × step`. */
+  step?: number;
+  /** Minimum number of steps between two adjacent thumbs. Default `0` (thumbs may share a value). */
+  minStepsBetweenThumbs?: number;
+  /** Default `"horizontal"`. Vertical sliders have `min` at the bottom. */
+  orientation?: SliderOrientation;
+  /**
+   * `aria-valuetext` for a thumb, from the value it shows. Set it when the number alone is not
+   * meaningful ("3 of 5 stars", "Tuesday"). Default: none (the number is announced).
+   */
+  getAriaValueText?: (value: number, index: number) => string;
+  /**
+   * Form field name for every thumb's input (a Thumb's own `name` wins). With several thumbs,
+   * read with `FormData.getAll()`.
+   */
+  name?: string;
+  /** The `form` attribute for every thumb's input (a Thumb's own `form` wins). */
+  form?: string;
+  /** Disables every input (native `disabled`; not submitted) and the pointer. Never set while pending. */
+  disabled?: boolean;
+  className?: StateValue<string | undefined, SliderRootState<T>>;
+  style?: StateValue<CSSProperties | undefined, SliderRootState<T>>;
+  children?: StateValue<ReactNode, SliderRootState<T>>;
+  render?: RenderProp<ComponentPropsWithRef<"div">, SliderRootState<T>>;
+}
+//#endregion
+//# sourceMappingURL=slider-root.d.mts.map

package/dist/slider/slider-root.d.mts.map

@@ -0,0 +1 @@
+{"version":3,"file":"slider-root.d.mts","names":[],"sources":["../../src/slider/slider-root.tsx"],"mappings":";;;;YAmDY;YAEA;;iBAGK,iCAAiC;;;;;;;;;;WAUvC,QAAQ;;WAER;;;iBAIM,iCAAiC;;;;;;;WAOvC,QAAQ;;WAER;;iBAGM,gBAAgB,UAAU;;;;;;WAMhC,OAAO;;WAEP;;WAEA;;WAEA;WACA,aAAa;WACb;WACA;WACA;WACA;;iBAGM,gBAAgB,UAAU,8BAA8B,KACvE;;EAcA,QAAQ;;;;;EAKR,eAAe;;;;;;;;;;EAUf,oBAAoB,aAAa,GAAG;;;;;;;EAOpC,oBAAoB,aAAa,GAAG;;EAEpC;;;;;EAKA;;EAEA;;EAEA;;EAEA,cAAc;;;;;EAKd,oBAAoB,eAAe;;;;;EAKnC;;EAEA;;EAEA;EACA,YAAY,+BAA+B,gBAAgB;EAC3D,QAAQ,WAAW,2BAA2B,gBAAgB;EAC9D,WAAW,WAAW,WAAW,gBAAgB;EACjD,SAAS,WAAW,8BAA8B,gBAAgB"}