@astryxdesign/core 0.7.6 → 0.7.7-canary.0eb44a2

package/src/Slider/useSliderTouch.ts

@@ -0,0 +1,78 @@
+// Copyright (c) Meta Platforms, Inc. and affiliates.
+
+'use client';
+
+/**
+ * @file useSliderTouch.ts
+ * @input Slider's value model and parts, and sliderTouchController.ts
+ * @output Exports `useSliderTouch` (the React wiring) and the
+ *   `SliderTouchModel` and `SliderTouchParts` types
+ * @position Internal to Slider. It is the touch layer's one import site, so
+ *   a desktop build can swap that module whole.
+ *
+ * SYNC: When modified, update:
+ * - /packages/core/src/Slider/sliderTouchController.ts
+ * - /packages/core/src/Slider/Slider.tsx (the model and the parts)
+ * - /packages/core/src/Slider/useSliderTouch.test.tsx
+ */
+
+import {useEffect, useState} from 'react';
+import {useIsomorphicLayoutEffect} from '../hooks/useIsomorphicLayoutEffect';
+import {
+  SliderTouchController,
+  type SliderTouchModel,
+  type SliderTouchParts,
+} from './sliderTouchController';
+
+export type {SliderTouchModel, SliderTouchParts} from './sliderTouchController';
+
+export interface UseSliderTouchOptions {
+  /** The slider is enabled: its gestures attach for every pointer. */
+  readonly isEnabled: boolean;
+  readonly model: SliderTouchModel;
+  readonly getParts: () => SliderTouchParts | null;
+  /** Re-attaches when the thumbs or the orientation change. */
+  readonly thumbCount: number;
+  /**
+   * Whether each thumb renders inside its value tooltip: changing it mounts
+   * new thumbs. So the gestures re-attach.
+   */
+  readonly thumbsWrapped: boolean;
+}
+
+/**
+ * Wires UISlider's tracking to a rendered Slider for every pointer, while it
+ * is enabled. Slider's own pointer handlers then take only a mouse press on
+ * the track.
+ */
+export function useSliderTouch({
+  isEnabled,
+  model,
+  getParts,
+  thumbCount,
+  thumbsWrapped,
+}: UseSliderTouchOptions): void {
+  // The parts getter reads only refs. So the first one stays current.
+  const [controller] = useState(
+    () => new SliderTouchController(model, getParts),
+  );
+  // Hands the controller this render's model: the values and callbacks it
+  // reads from gesture callbacks outside React's render.
+  useIsomorphicLayoutEffect(() => {
+    controller.setModel(model);
+  });
+  const {isHorizontal} = model;
+  // Synchronizes the thumbs with the document's gesture host. Their
+  // PressTrackers and pans attach while the slider is enabled. They detach,
+  // ending any interaction silently, when it is disabled or the thumbs
+  // change.
+  useEffect(() => {
+    if (!isEnabled) {
+      return undefined;
+    }
+    return controller.attach();
+  }, [controller, isEnabled, thumbCount, isHorizontal, thumbsWrapped]);
+  // Releases the controller's animators and gesture host listeners on
+  // unmount.
+  useEffect(() => () => controller.dispose(), [controller]);
+}

package/src/Switch/Switch.doc.mjs

@@ -223,7 +223,7 @@ export const docs = {
     ],
     anatomy,
     description:
-      'A toggle control for on/off states that take effect immediately. Supports labels, descriptions, loading states, and validation. Use it for settings or preferences that apply instantly. For changes requiring a form submission, use a checkbox instead.',
+      'A toggle control for on/off states that take effect immediately. Supports labels, descriptions, loading states, and validation. Use it for settings or preferences that apply instantly. For changes requiring a form submission, use a checkbox instead. Under a finger it moves like the iOS switch on every touch screen: a press lifts the thumb, a drag across flips it, lifting the finger commits, and a tap toggles through the browser’s click. The thumb keeps its circle and size on every device, and under a coarse pointer the invisible hit area grows toward 44 × 44 px, stopping halfway to any neighbouring control so a tap goes to the nearer one. With reduced motion on, a change cross-fades on a touch screen and is immediate with a mouse.',
     bestPractices: [
       {
         guidance: true,
@@ -395,7 +395,7 @@ export const docsZh = {
   },
   usage: {
     description:
-      'A toggle control for on/off states that take effect immediately. Supports labels, descriptions, loading states, and validation. Use it for settings or preferences that apply instantly. For changes requiring a form submission, use a checkbox instead.',
+      'A toggle control for on/off states that take effect immediately. Supports labels, descriptions, loading states, and validation. Use it for settings or preferences that apply instantly. For changes requiring a form submission, use a checkbox instead. Under a finger it moves like the iOS switch on every touch screen: a press lifts the thumb, a drag across flips it, lifting the finger commits, and a tap toggles through the browser’s click. The thumb keeps its circle and size on every device, and under a coarse pointer the invisible hit area grows toward 44 × 44 px, stopping halfway to any neighbouring control so a tap goes to the nearer one. With reduced motion on, a change cross-fades on a touch screen and is immediate with a mouse.',
     bestPractices: [
       {
         guidance: true,
@@ -431,7 +431,7 @@ export const docsDense = {
   description: 'Toggle switch for boolean values w/ integrated label support.',
   usage: {
     description:
-      'A toggle control for on/off states that take effect immediately. Supports labels, descriptions, loading states, and validation. Use it for settings or preferences that apply instantly. For changes requiring a form submission, use a checkbox instead.',
+      'A toggle control for on/off states that take effect immediately. Supports labels, descriptions, loading states, and validation. Use it for settings or preferences that apply instantly. For changes requiring a form submission, use a checkbox instead. Under a finger it moves like the iOS switch on every touch screen: a press lifts the thumb, a drag across flips it, lifting the finger commits, and a tap toggles through the browser’s click. The thumb keeps its circle and size on every device, and under a coarse pointer the invisible hit area grows toward 44 × 44 px, stopping halfway to any neighbouring control so a tap goes to the nearer one. With reduced motion on, a change cross-fades on a touch screen and is immediate with a mouse.',
     bestPractices: [
       {
         guidance: true,