@astryxdesign/core 0.0.0-bootstrap.0 → 0.1.0-canary.0b5b49f

package/dist/Slider/Slider.js

@@ -0,0 +1,558 @@
+// Copyright (c) Meta Platforms, Inc. and affiliates.
+
+'use client';
+
+/**
+ * @file Slider.tsx
+ * @input Uses React, useId, useRef, useCallback, Field, Tooltip
+ * @output Exports Slider component, SliderProps, SliderSingleProps, SliderRangeProps, SliderBaseProps
+ * @position Core implementation; consumed by index.ts, tested by Slider.test.tsx
+ *
+ * SYNC: When modified, update these files to stay in sync:
+ * - /packages/core/src/Slider/Slider.doc.mjs
+ * - /packages/core/src/Slider/Slider.test.tsx
+ * - /packages/core/src/Slider/index.ts
+ * - /apps/storybook/stories/Slider.stories.tsx
+ * - /packages/cli/templates/blocks/components/Slider/ (showcase blocks)
+ */
+import { useId, useMemo, useRef, useState, useCallback } from 'react';
+import * as stylex from '@stylexjs/stylex';
+import "../theme/tokens.stylex.js";
+import { colorVars, spacingVars, radiusVars, durationVars, easeVars, typographyVars, typeScaleVars } from "../theme/tokens.stylex.js";
+import { Field } from "../Field/Field.js";
+import { Tooltip } from "../Tooltip/Tooltip.js";
+import { mergeProps, mergeRefs } from "../utils/index.js";
+import { themeProps } from "../utils/themeProps.js";
+
+// =============================================================================
+// Types
+// =============================================================================
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+// =============================================================================
+// Constants
+// =============================================================================
+
+const TRACK_SIZE = 4;
+const THUMB_SIZE = 20;
+
+// =============================================================================
+// Styles
+// =============================================================================
+
+// =============================================================================
+// Helpers
+// =============================================================================
+
+function clamp(val, min, max) {
+  return Math.min(Math.max(val, min), max);
+}
+function snapToStep(val, min, step) {
+  if (step <= 0) {
+    return val;
+  }
+  const steps = Math.round((val - min) / step);
+  return min + steps * step;
+}
+function getPercent(val, min, max) {
+  if (max === min) {
+    return 0;
+  }
+  return (val - min) / (max - min) * 100;
+}
+
+// =============================================================================
+// Component
+// =============================================================================
+
+/**
+ * A slider component for selecting numeric values or ranges.
+ *
+ * @example
+ * ```
+ * <Slider label="Volume" value={50} onChange={setValue} />
+ * <Slider label="Price range" value={[20, 80]} onChange={setRange} />
+ * ```
+ */
+export function Slider({
+  ref,
+  ...props
+}) {
+  const {
+    label,
+    isLabelHidden = false,
+    description,
+    isDisabled = false,
+    isOptional = false,
+    isRequired = false,
+    status,
+    labelTooltip,
+    min = 0,
+    max = 100,
+    step = 1,
+    orientation = 'horizontal',
+    formatValue,
+    valueDisplay = 'tooltip',
+    marks,
+    width,
+    xstyle,
+    className,
+    style,
+    'data-testid': testId,
+    value,
+    onChange,
+    onChangeEnd
+  } = props;
+  const isRange = Array.isArray(value);
+  const minStepsBetweenThumbs = isRange && 'minStepsBetweenThumbs' in props ? props.minStepsBetweenThumbs ?? 0 : 0;
+  const isHorizontal = orientation === 'horizontal';
+  const id = useId();
+  const descriptionID = useId();
+  const statusMessageID = useId();
+  const trackRef = useRef(null);
+  const draggingThumbRef = useRef(null);
+  const [draggingThumb, setDraggingThumb] = useState(null);
+
+  // Build aria-describedby
+  const describedByParts = [];
+  if (description) {
+    describedByParts.push(descriptionID);
+  }
+  if (status?.message) {
+    describedByParts.push(statusMessageID);
+  }
+  const ariaDescribedBy = describedByParts.length > 0 ? describedByParts.join(' ') : undefined;
+
+  // Value helpers — guard against undefined value (e.g. playground previews
+  // that render the component without providing a value prop).
+  const values = useMemo(() => isRange ? value : [value != null ? value : min], [isRange, value, min]);
+  const valuesRef = useRef(values);
+  valuesRef.current = values;
+  const getValueFromPosition = useCallback((clientX, clientY) => {
+    const track = trackRef.current;
+    if (!track) {
+      return min;
+    }
+    const rect = track.getBoundingClientRect();
+    let percent;
+    if (isHorizontal) {
+      percent = (clientX - rect.left) / rect.width;
+    } else {
+      // Vertical: bottom = min, top = max
+      percent = 1 - (clientY - rect.top) / rect.height;
+    }
+    percent = clamp(percent, 0, 1);
+    const raw = min + percent * (max - min);
+    return clamp(snapToStep(raw, min, step), min, max);
+  }, [min, max, step, isHorizontal]);
+  const getClosestThumb = useCallback(newValue => {
+    if (!isRange) {
+      return 0;
+    }
+    const [v0, v1] = values;
+    const d0 = Math.abs(newValue - v0);
+    const d1 = Math.abs(newValue - v1);
+    // Prefer the lower thumb if equidistant
+    return d0 <= d1 ? 0 : 1;
+  }, [isRange, values]);
+  const updateValue = useCallback((thumbIndex, newVal) => {
+    if (isDisabled) {
+      return;
+    }
+    const clamped = clamp(snapToStep(newVal, min, step), min, max);
+    if (isRange) {
+      const currentValues = [...values];
+      currentValues[thumbIndex] = clamped;
+
+      // Enforce minStepsBetweenThumbs
+      const minGap = minStepsBetweenThumbs * step;
+      if (thumbIndex === 0) {
+        currentValues[0] = Math.min(currentValues[0], currentValues[1] - minGap);
+      } else {
+        currentValues[1] = Math.max(currentValues[1], currentValues[0] + minGap);
+      }
+
+      // Keep within bounds
+      currentValues[0] = clamp(currentValues[0], min, max);
+      currentValues[1] = clamp(currentValues[1], min, max);
+      onChange?.(currentValues);
+    } else {
+      onChange?.(clamped);
+    }
+  }, [isDisabled, isRange, values, min, max, step, minStepsBetweenThumbs, onChange]);
+  const onChangeEndRef = useRef(onChangeEnd);
+  onChangeEndRef.current = onChangeEnd;
+  const fireChangeEnd = useCallback(newValues => {
+    const currentValues = newValues ?? valuesRef.current;
+    const cb = onChangeEndRef.current;
+    if (isRange) {
+      cb?.(currentValues);
+    } else {
+      cb?.(currentValues[0]);
+    }
+  }, [isRange]);
+
+  // Pointer handlers
+  const handlePointerDown = useCallback(e => {
+    if (isDisabled) {
+      return;
+    }
+    e.preventDefault();
+
+    // If the click originated from a mark element, snap to that mark's value
+    // instead of calculating from pointer position (avoids off-by-one when
+    // clicking on wide labels like "100").
+    const markEl = e.target.closest('[data-mark-value]');
+    const newVal = markEl ? Number(markEl.dataset.markValue) : getValueFromPosition(e.clientX, e.clientY);
+    const thumbIndex = getClosestThumb(newVal);
+    draggingThumbRef.current = thumbIndex;
+    setDraggingThumb(thumbIndex);
+    updateValue(thumbIndex, newVal);
+
+    // Focus the closest thumb
+    const track = trackRef.current;
+    if (track) {
+      const thumbs = track.querySelectorAll('[role="slider"]');
+      thumbs[thumbIndex]?.focus();
+    }
+    if (typeof e.currentTarget.setPointerCapture === 'function') {
+      e.currentTarget.setPointerCapture(e.pointerId);
+    }
+  }, [isDisabled, getValueFromPosition, getClosestThumb, updateValue]);
+  const handlePointerMove = useCallback(e => {
+    if (draggingThumbRef.current === null || isDisabled) {
+      return;
+    }
+    const newVal = getValueFromPosition(e.clientX, e.clientY);
+    updateValue(draggingThumbRef.current, newVal);
+  }, [isDisabled, getValueFromPosition, updateValue]);
+  const handlePointerUp = useCallback(_e => {
+    if (draggingThumbRef.current !== null) {
+      draggingThumbRef.current = null;
+      setDraggingThumb(null);
+      fireChangeEnd();
+    }
+  }, [fireChangeEnd]);
+
+  // Keyboard handler
+  const handleKeyDown = useCallback((thumbIndex, e) => {
+    if (isDisabled) {
+      return;
+    }
+    const currentVal = values[thumbIndex];
+    let newVal;
+    switch (e.key) {
+      case 'ArrowRight':
+      case 'ArrowUp':
+        newVal = currentVal + step;
+        break;
+      case 'ArrowLeft':
+      case 'ArrowDown':
+        newVal = currentVal - step;
+        break;
+      case 'PageUp':
+        newVal = currentVal + step * 10;
+        break;
+      case 'PageDown':
+        newVal = currentVal - step * 10;
+        break;
+      case 'Home':
+        newVal = min;
+        break;
+      case 'End':
+        newVal = max;
+        break;
+      default:
+        return;
+    }
+    e.preventDefault();
+    const clamped = clamp(snapToStep(newVal, min, step), min, max);
+    updateValue(thumbIndex, newVal);
+
+    // Compute exact post-update values so onChangeEnd reports the correct
+    // value even before React batches the state update.
+    if (isRange) {
+      const newValues = [...values];
+      newValues[thumbIndex] = clamped;
+      const minGap = minStepsBetweenThumbs * step;
+      if (thumbIndex === 0) {
+        newValues[0] = Math.min(newValues[0], newValues[1] - minGap);
+      } else {
+        newValues[1] = Math.max(newValues[1], newValues[0] + minGap);
+      }
+      newValues[0] = clamp(newValues[0], min, max);
+      newValues[1] = clamp(newValues[1], min, max);
+      fireChangeEnd(newValues);
+    } else {
+      fireChangeEnd([clamped]);
+    }
+  }, [isDisabled, isRange, values, step, min, max, minStepsBetweenThumbs, updateValue, fireChangeEnd]);
+
+  // Format display value
+  const displayValue = val => {
+    if (formatValue) {
+      return formatValue(val);
+    }
+    return String(val);
+  };
+
+  // Render a thumb
+  const renderThumb = thumbIndex => {
+    const val = values[thumbIndex];
+    const percent = getPercent(val, min, max);
+    const positionStyle = isHorizontal ? {
+      left: `${percent}%`
+    } : {
+      bottom: `${percent}%`,
+      left: '50%'
+    };
+    const thumbLabel = isRange ? thumbIndex === 0 ? `${label}, minimum value` : `${label}, maximum value` : label;
+    const useTooltip = valueDisplay === 'tooltip';
+    const tooltipPlacement = isHorizontal ? 'above' : 'start';
+    const thumbElement = /*#__PURE__*/_jsx("div", {
+      id: !isRange ? id : undefined,
+      role: "slider",
+      tabIndex: isDisabled ? -1 : 0,
+      "aria-valuemin": min,
+      "aria-valuemax": max,
+      "aria-valuenow": val,
+      "aria-valuetext": formatValue ? formatValue(val) : undefined,
+      "aria-orientation": orientation,
+      "aria-disabled": isDisabled || undefined,
+      "aria-invalid": status?.type === 'error' ? true : undefined,
+      "aria-label": thumbLabel,
+      "aria-describedby": ariaDescribedBy,
+      onKeyDown: e => handleKeyDown(thumbIndex, e),
+      ...mergeProps(themeProps('slider-thumb', {
+        orientation,
+        disabled: isDisabled ? 'disabled' : null
+      }), {
+        0: {
+          className: "x10l6tqk xw4jnvo x1qx5ct2 xjspbzw x1ewilqj x106061f xuedmi6 x12w9bfk xlr8y92 x1a2a7pz x1jm3nie x1vjfegm x1nrll8i x1m9mm8y"
+        },
+        8: {
+          className: "x10l6tqk xw4jnvo x1qx5ct2 xjspbzw x1ewilqj x11lhmoz x106061f xuedmi6 x12w9bfk xlr8y92 x1a2a7pz x1jm3nie x1vjfegm xwa60dl"
+        },
+        4: {
+          className: "x10l6tqk xw4jnvo x1qx5ct2 xjspbzw x106061f xuedmi6 x12w9bfk xlr8y92 x1a2a7pz x1jm3nie x1vjfegm x1nrll8i x1m9mm8y x1ewilqj xyxu9wt"
+        },
+        12: {
+          className: "x10l6tqk xw4jnvo x1qx5ct2 xjspbzw x11lhmoz x106061f xuedmi6 x12w9bfk xlr8y92 x1a2a7pz x1jm3nie x1vjfegm xwa60dl x1ewilqj xyxu9wt"
+        },
+        2: {
+          className: "x10l6tqk xw4jnvo x1qx5ct2 xjspbzw x1ewilqj x106061f xuedmi6 x12w9bfk xlr8y92 x1jm3nie x1vjfegm x1nrll8i x1m9mm8y x1a2a7pz x17nn4n9 x1wfwxd8 x7s97pk"
+        },
+        10: {
+          className: "x10l6tqk xw4jnvo x1qx5ct2 xjspbzw x1ewilqj x11lhmoz x106061f xuedmi6 x12w9bfk xlr8y92 x1jm3nie x1vjfegm xwa60dl x1a2a7pz x17nn4n9 x1wfwxd8 x7s97pk"
+        },
+        6: {
+          className: "x10l6tqk xw4jnvo x1qx5ct2 xjspbzw x106061f xuedmi6 x12w9bfk xlr8y92 x1jm3nie x1vjfegm x1nrll8i x1m9mm8y x1ewilqj xyxu9wt x1a2a7pz x17nn4n9 x1wfwxd8 x7s97pk"
+        },
+        14: {
+          className: "x10l6tqk xw4jnvo x1qx5ct2 xjspbzw x11lhmoz x106061f xuedmi6 x12w9bfk xlr8y92 x1jm3nie x1vjfegm xwa60dl x1ewilqj xyxu9wt x1a2a7pz x17nn4n9 x1wfwxd8 x7s97pk"
+        },
+        1: {
+          className: "x10l6tqk xw4jnvo x1qx5ct2 xjspbzw x106061f xuedmi6 x12w9bfk xlr8y92 x1a2a7pz x1vjfegm x1nrll8i x1m9mm8y xwmxj5m x1h6gzvc"
+        },
+        9: {
+          className: "x10l6tqk xw4jnvo x1qx5ct2 xjspbzw x11lhmoz x106061f xuedmi6 x12w9bfk xlr8y92 x1a2a7pz x1vjfegm xwa60dl xwmxj5m x1h6gzvc"
+        },
+        5: {
+          className: "x10l6tqk xw4jnvo x1qx5ct2 xjspbzw x106061f xuedmi6 x12w9bfk xlr8y92 x1a2a7pz x1vjfegm x1nrll8i x1m9mm8y xwmxj5m x1h6gzvc"
+        },
+        13: {
+          className: "x10l6tqk xw4jnvo x1qx5ct2 xjspbzw x11lhmoz x106061f xuedmi6 x12w9bfk xlr8y92 x1a2a7pz x1vjfegm xwa60dl xwmxj5m x1h6gzvc"
+        },
+        3: {
+          className: "x10l6tqk xw4jnvo x1qx5ct2 xjspbzw x106061f xuedmi6 x12w9bfk xlr8y92 x1vjfegm x1nrll8i x1m9mm8y x1a2a7pz x17nn4n9 x1wfwxd8 x7s97pk xwmxj5m x1h6gzvc"
+        },
+        11: {
+          className: "x10l6tqk xw4jnvo x1qx5ct2 xjspbzw x11lhmoz x106061f xuedmi6 x12w9bfk xlr8y92 x1vjfegm xwa60dl x1a2a7pz x17nn4n9 x1wfwxd8 x7s97pk xwmxj5m x1h6gzvc"
+        },
+        7: {
+          className: "x10l6tqk xw4jnvo x1qx5ct2 xjspbzw x106061f xuedmi6 x12w9bfk xlr8y92 x1vjfegm x1nrll8i x1m9mm8y x1a2a7pz x17nn4n9 x1wfwxd8 x7s97pk xwmxj5m x1h6gzvc"
+        },
+        15: {
+          className: "x10l6tqk xw4jnvo x1qx5ct2 xjspbzw x11lhmoz x106061f xuedmi6 x12w9bfk xlr8y92 x1vjfegm xwa60dl x1a2a7pz x17nn4n9 x1wfwxd8 x7s97pk xwmxj5m x1h6gzvc"
+        }
+      }[!!isHorizontal << 3 | !!!isDisabled << 2 | !!!isDisabled << 1 | !!isDisabled << 0], undefined, positionStyle)
+    }, thumbIndex);
+    if (useTooltip) {
+      return /*#__PURE__*/_jsx(Tooltip, {
+        content: displayValue(val),
+        placement: tooltipPlacement,
+        delay: 0,
+        focusTrigger: "always",
+        isOpen: draggingThumb === thumbIndex ? true : undefined,
+        children: thumbElement
+      }, thumbIndex);
+    }
+    return thumbElement;
+  };
+
+  // Filled track position
+  const filledStyle = (() => {
+    if (isRange) {
+      const [v0, v1] = values;
+      const p0 = getPercent(v0, min, max);
+      const p1 = getPercent(v1, min, max);
+      if (isHorizontal) {
+        return {
+          left: `${p0}%`,
+          width: `${p1 - p0}%`
+        };
+      }
+      return {
+        bottom: `${p0}%`,
+        height: `${p1 - p0}%`
+      };
+    }
+    const p = getPercent(values[0], min, max);
+    if (isHorizontal) {
+      return {
+        left: '0%',
+        width: `${p}%`
+      };
+    }
+    return {
+      bottom: '0%',
+      height: `${p}%`
+    };
+  })();
+
+  // Text value display
+  const textDisplay = valueDisplay === 'text' ? /*#__PURE__*/_jsx("span", {
+    ...{
+      className: "x9ynric xcr08ib x1tgivj0 xuxw1ft x2lah0s"
+    },
+    children: isRange ? `${displayValue(values[0])} – ${displayValue(values[1])}` : displayValue(values[0])
+  }) : null;
+  return /*#__PURE__*/_jsx(Field, {
+    "data-testid": testId,
+    label: label,
+    isLabelHidden: isLabelHidden,
+    description: description,
+    inputID: id,
+    descriptionID: description ? descriptionID : undefined,
+    isOptional: isOptional,
+    isRequired: isRequired,
+    isDisabled: isDisabled,
+    status: status ? {
+      type: status.type,
+      message: status.message,
+      messageID: status.message ? statusMessageID : undefined
+    } : undefined,
+    labelTooltip: labelTooltip,
+    statusVariant: "detached",
+    width: width,
+    xstyle: xstyle,
+    className: className,
+    style: style,
+    children: /*#__PURE__*/_jsxs("div", {
+      ...mergeProps(themeProps('slider', {
+        orientation,
+        disabled: isDisabled ? 'disabled' : null
+      }), {
+        className: "x78zum5 x6s0dn4 x1txdalj"
+      }),
+      children: [/*#__PURE__*/_jsxs("div", {
+        ref: mergeRefs(ref, trackRef),
+        ...(isRange ? {
+          role: 'group',
+          'aria-label': label
+        } : undefined),
+        onPointerDown: handlePointerDown,
+        onPointerMove: handlePointerMove,
+        onPointerUp: handlePointerUp,
+        onPointerCancel: handlePointerUp,
+        ...{
+          0: {
+            className: "x1n2onr6 x78zum5 x6s0dn4 x1iyjqo2 x5ve5x3 x87ps6o xc8icb0 xw4jnvo x1ymw6g xdt5ytf xl56j7k x1ypdohk"
+          },
+          2: {
+            className: "x1n2onr6 x78zum5 x6s0dn4 x1iyjqo2 x5ve5x3 x87ps6o xc8icb0 x1qx5ct2 xh8yej3 x1ypdohk"
+          },
+          1: {
+            className: "x1n2onr6 x78zum5 x6s0dn4 x1iyjqo2 x5ve5x3 x87ps6o xc8icb0 xw4jnvo x1ymw6g xdt5ytf xl56j7k xbyyjgo x1h6gzvc"
+          },
+          3: {
+            className: "x1n2onr6 x78zum5 x6s0dn4 x1iyjqo2 x5ve5x3 x87ps6o xc8icb0 x1qx5ct2 xh8yej3 xbyyjgo x1h6gzvc"
+          }
+        }[!!isHorizontal << 1 | !!isDisabled << 0],
+        children: [/*#__PURE__*/_jsx("div", {
+          "aria-hidden": "true",
+          ...mergeProps(themeProps('slider-track', {
+            orientation
+          }), {
+            0: {
+              className: "x10l6tqk xwmxj5m xjspbzw x13vifvy x1ey2m1c x51ohtg x1nrll8i xuuh30"
+            },
+            1: {
+              className: "x10l6tqk xwmxj5m xjspbzw xu96u03 x3m8u43 xqu0tyb xwa60dl x1cb1t30"
+            }
+          }[!!isHorizontal << 0])
+        }), /*#__PURE__*/_jsx("div", {
+          "aria-hidden": "true",
+          ...mergeProps({
+            0: {
+              className: "x10l6tqk x1ewilqj xjspbzw x51ohtg x1nrll8i xuuh30"
+            },
+            1: {
+              className: "x10l6tqk x1ewilqj xjspbzw xqu0tyb xwa60dl x1cb1t30"
+            }
+          }[!!isHorizontal << 0], {
+            style: filledStyle
+          })
+        }), marks && /*#__PURE__*/_jsx("div", {
+          "aria-hidden": "true",
+          ...{
+            0: {
+              className: "x10l6tqk x13vifvy x1ey2m1c x1nrll8i"
+            },
+            1: {
+              className: "x10l6tqk xu96u03 x3m8u43 xwa60dl"
+            }
+          }[!!isHorizontal << 0],
+          children: marks.map(mark => {
+            const percent = getPercent(mark.value, min, max);
+            const markPos = isHorizontal ? {
+              left: `${percent}%`
+            } : {
+              bottom: `${percent}%`
+            };
+            return /*#__PURE__*/_jsxs("div", {
+              children: [/*#__PURE__*/_jsx("div", {
+                "data-testid": "slider-mark",
+                "data-mark-value": mark.value,
+                ...mergeProps({
+                  0: {
+                    className: "x10l6tqk x7njt3n xjspbzw x36qwtl x1xc55vz x1m9mm8y"
+                  },
+                  1: {
+                    className: "x10l6tqk x7njt3n xjspbzw xfo62xy xdk7pt x11lhmoz"
+                  }
+                }[!!isHorizontal << 0], {
+                  style: markPos
+                })
+              }), mark.label && /*#__PURE__*/_jsx("span", {
+                "data-testid": "slider-mark-label",
+                "data-mark-value": mark.value,
+                ...mergeProps({
+                  0: {
+                    className: "x10l6tqk x9ynric x141an7d xv1l7n4 xuxw1ft x131p8rn x1trqr8e"
+                  },
+                  1: {
+                    className: "x10l6tqk x9ynric x141an7d xv1l7n4 xuxw1ft xuuh30 xuivejd"
+                  }
+                }[!!isHorizontal << 0], {
+                  style: markPos
+                }),
+                children: mark.label
+              })]
+            }, mark.value);
+          })
+        }), values.map((_, i) => renderThumb(i))]
+      }), textDisplay]
+    })
+  });
+}
+Slider.displayName = 'Slider';

package/dist/Slider/index.d.ts

@@ -0,0 +1,11 @@
+/**
+ * @file index.ts
+ * @input Imports from Slider component files
+ * @output Exports Slider and its types
+ * @position Component entry point; re-exported by /packages/core/src/index.ts
+ *
+ * SYNC: When modified, update this header and /packages/core/src/Slider/Slider.doc.mjs
+ */
+export { Slider } from './Slider';
+export type { SliderProps, SliderBaseProps, SliderSingleProps, SliderRangeProps, } from './Slider';
+//# sourceMappingURL=index.d.ts.map

package/dist/Slider/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/Slider/index.ts"],"names":[],"mappings":"AAIA;;;;;;;GAOG;AAEH,OAAO,EAAC,MAAM,EAAC,MAAM,UAAU,CAAC;AAChC,YAAY,EACV,WAAW,EACX,eAAe,EACf,iBAAiB,EACjB,gBAAgB,GACjB,MAAM,UAAU,CAAC"}

package/dist/Slider/index.js

@@ -0,0 +1,13 @@
+// Copyright (c) Meta Platforms, Inc. and affiliates.
+
+'use client';
+
+/**
+ * @file index.ts
+ * @input Imports from Slider component files
+ * @output Exports Slider and its types
+ * @position Component entry point; re-exported by /packages/core/src/index.ts
+ *
+ * SYNC: When modified, update this header and /packages/core/src/Slider/Slider.doc.mjs
+ */
+export { Slider } from "./Slider.js";

package/dist/Spinner/Spinner.d.ts

@@ -0,0 +1,95 @@
+/**
+ * @file Spinner.tsx
+ * @input Uses React, StyleX, canvas rendering
+ * @output Exports Spinner component, SpinnerProps, SpinnerSize, SpinnerShade types
+ * @position Core implementation of spinner loading indicator
+ *
+ * SYNC: When modified, update these files to stay in sync:
+ * - /packages/core/src/Spinner/Spinner.doc.mjs
+ * - /packages/core/src/Spinner/Spinner.test.tsx
+ * - /packages/core/src/Spinner/index.ts
+ * - /apps/storybook/stories/Spinner.stories.tsx
+ * - /packages/cli/templates/blocks/components/Spinner/ (showcase blocks)
+ */
+import { type ReactNode } from 'react';
+import type { BaseProps } from '../BaseProps';
+declare const SIZES: {
+    sm: {
+        diameter: number;
+        border: number;
+    };
+    md: {
+        diameter: number;
+        border: number;
+    };
+    lg: {
+        diameter: number;
+        border: number;
+    };
+    xl: {
+        diameter: number;
+        border: number;
+    };
+};
+export type SpinnerSize = keyof typeof SIZES;
+export type SpinnerShade = 'default' | 'onMedia' | 'subtle' | 'inherit';
+export interface SpinnerProps extends BaseProps<HTMLSpanElement> {
+    /** Ref forwarded to the root element */
+    ref?: React.Ref<HTMLSpanElement>;
+    /**
+     * Spinner size.
+     * - 'sm': 10px diameter
+     * - 'md': 14px diameter
+     * - 'lg': 18px diameter
+     * - 'xl': 36px diameter
+     * @default 'md'
+     */
+    size?: SpinnerSize;
+    /**
+     * Color shade.
+     * - 'default': accent color on light backgrounds
+     * - 'onMedia': white on dark/accent backgrounds
+     * - 'subtle': secondary text color, less prominent — for inline use in lists
+     * - 'inherit': inherits the parent's `currentColor` (with a translucent
+     *   track) — use inside colored elements like buttons so the ring matches
+     *   the resolved foreground regardless of theme/variant
+     * @default 'default'
+     */
+    shade?: SpinnerShade;
+    /**
+     * Visible content displayed below the spinner.
+     * Accepts a string or ReactNode for rich content.
+     *
+     * When `label` is a string, it is also used as the accessible name
+     * (aria-label) unless `aria-label` is explicitly set.
+     *
+     * @example
+     * ```
+     * <Spinner label="Loading..." />
+     * <Spinner label={<><strong>Fetching data</strong><br/>This may take a moment</>} aria-label="Fetching data" />
+     * ```
+     */
+    label?: ReactNode;
+    /**
+     * Test ID for the root element.
+     */
+    'data-testid'?: string;
+}
+/**
+ * An animated loading indicator. Available in three sizes and two color shades.
+ *
+ * @example
+ * ```
+ * <Spinner />
+ * <Spinner size="sm" />
+ * <Spinner size="lg" shade="onMedia" />
+ * <Spinner label="Loading..." />
+ * <Spinner aria-label="Loading data" />
+ * ```
+ */
+export declare function Spinner({ size, shade, label, xstyle, className, style, 'aria-label': ariaLabel, 'data-testid': testId, ref, ...restProps }: SpinnerProps): import("react").JSX.Element;
+export declare namespace Spinner {
+    var displayName: string;
+}
+export {};
+//# sourceMappingURL=Spinner.d.ts.map

package/dist/Spinner/Spinner.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"Spinner.d.ts","sourceRoot":"","sources":["../../src/Spinner/Spinner.tsx"],"names":[],"mappings":"AAIA;;;;;;;;;;;;GAYG;AAEH,OAAO,EAAoB,KAAK,SAAS,EAAC,MAAM,OAAO,CAAC;AAIxD,OAAO,KAAK,EAAC,SAAS,EAAC,MAAM,cAAc,CAAC;AAc5C,QAAA,MAAM,KAAK;;;;;;;;;;;;;;;;;CAKV,CAAC;AA0CF,MAAM,MAAM,WAAW,GAAG,MAAM,OAAO,KAAK,CAAC;AAE7C,MAAM,MAAM,YAAY,GAAG,SAAS,GAAG,SAAS,GAAG,QAAQ,GAAG,SAAS,CAAC;AAExE,MAAM,WAAW,YAAa,SAAQ,SAAS,CAAC,eAAe,CAAC;IAC9D,wCAAwC;IACxC,GAAG,CAAC,EAAE,KAAK,CAAC,GAAG,CAAC,eAAe,CAAC,CAAC;IACjC;;;;;;;OAOG;IACH,IAAI,CAAC,EAAE,WAAW,CAAC;IACnB;;;;;;;;;OASG;IACH,KAAK,CAAC,EAAE,YAAY,CAAC;IACrB;;;;;;;;;;;;OAYG;IACH,KAAK,CAAC,EAAE,SAAS,CAAC;IAClB;;OAEG;IACH,aAAa,CAAC,EAAE,MAAM,CAAC;CACxB;AAMD;;;;;;;;;;;GAWG;AACH,wBAAgB,OAAO,CAAC,EACtB,IAAW,EACX,KAAiB,EACjB,KAAK,EACL,MAAM,EACN,SAAS,EACT,KAAK,EACL,YAAY,EAAE,SAAS,EACvB,aAAa,EAAE,MAAM,EACrB,GAAG,EACH,GAAG,SAAS,EACb,EAAE,YAAY,+BA4Id;yBAvJe,OAAO"}