@common-origin/design-system 2.19.0 → 2.20.0

package/dist/components/molecules/Slider/Slider.mjs

@@ -0,0 +1,462 @@
+'use client';
+import { __makeTemplateObject } from '../../../vendor/tslib/tslib.es6.mjs';
+import { jsxs, jsx, Fragment } from 'react/jsx-runtime';
+import { useId, useRef, useState, useEffect } from 'react';
+import styled$module from 'styled-components';
+const styled = styled$module.default || styled$module;
+import tokens from '../../../lib/cssTokens.mjs';
+import { forcedColors, reducedMotion } from '../../../lib/styleUtils.mjs';
+
+var semantic = tokens.semantic;
+var StyledSliderContainer = /*#__PURE__*/styled.div.withConfig({
+  displayName: "Slider__StyledSliderContainer",
+  componentId: "sc-6mh2d4-0"
+})(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  display: flex;\n  flex-direction: column;\n  gap:0;\n  width: 100%;\n"], ["\n  display: flex;\n  flex-direction: column;\n  gap:0;\n  width: 100%;\n"])));
+var StyledLabel = /*#__PURE__*/styled.label.withConfig({
+  displayName: "Slider__StyledLabel",
+  componentId: "sc-6mh2d4-1"
+})(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n  font: ", ";\n  color: ", ";\n  margin-bottom: ", ";\n"], ["\n  font: ", ";\n  color: ", ";\n  margin-bottom: ", ";\n"])), semantic.typography.label, function (_a) {
+  var $disabled = _a.$disabled;
+  return $disabled ? semantic.color.text.disabled : semantic.color.text["default"];
+}, semantic.space[400]);
+var StyledSliderTrackContainer = /*#__PURE__*/styled.div.withConfig({
+  displayName: "Slider__StyledSliderTrackContainer",
+  componentId: "sc-6mh2d4-2"
+})(templateObject_3 || (templateObject_3 = __makeTemplateObject(["\n  position: relative;\n  width: 100%;\n  height: ", ";\n  display: flex;\n  align-items: center;\n"], ["\n  position: relative;\n  width: 100%;\n  height: ", ";\n  display: flex;\n  align-items: center;\n"])), semantic.space[1000]);
+var StyledTrack = /*#__PURE__*/styled.div.withConfig({
+  displayName: "Slider__StyledTrack",
+  componentId: "sc-6mh2d4-3"
+})(templateObject_4 || (templateObject_4 = __makeTemplateObject(["\n  position: relative;\n  width: 100%;\n  height: ", ";\n  background-color: ", ";\n  border-radius: ", ";\n  cursor: ", ";\n  /* A vertical swipe over the track still scrolls the page */\n  touch-action: pan-y;\n  /* The thumbs measure their distance apart in cqw (1% of the track's width) */\n  container-type: inline-size;\n\n  /* Forced colours drop the track's fill, so it gets an edge; the thumb stays centred on it (decision 0038).\n     A div gets no system disabled colour, so a disabled track sets GrayText itself. */\n  ", " {\n    border: ", " solid ", ";\n  }\n"], ["\n  position: relative;\n  width: 100%;\n  height: ", ";\n  background-color: ", ";\n  border-radius: ", ";\n  cursor: ", ";\n  /* A vertical swipe over the track still scrolls the page */\n  touch-action: pan-y;\n  /* The thumbs measure their distance apart in cqw (1% of the track's width) */\n  container-type: inline-size;\n\n  /* Forced colours drop the track's fill, so it gets an edge; the thumb stays centred on it (decision 0038).\n     A div gets no system disabled colour, so a disabled track sets GrayText itself. */\n  ", " {\n    border: ", " solid ", ";\n  }\n"])), semantic.space[100], function (_a) {
+  var $disabled = _a.$disabled;
+  return $disabled ? semantic.color.fill.disabled : tokens.component.track.background;
+}, semantic.radius.full, function (_a) {
+  var $disabled = _a.$disabled;
+  return $disabled ? 'not-allowed' : 'pointer';
+}, forcedColors, semantic.border.width.thin, function (_a) {
+  var $disabled = _a.$disabled;
+  return $disabled ? 'GrayText' : 'CanvasText';
+});
+var StyledTrackFill = /*#__PURE__*/styled.div.withConfig({
+  displayName: "Slider__StyledTrackFill",
+  componentId: "sc-6mh2d4-4"
+})(templateObject_5 || (templateObject_5 = __makeTemplateObject(["\n  position: absolute;\n  height: 100%;\n  background-color: ", ";\n  border-radius: ", ";\n  pointer-events: none;\n\n  /* The fill is the value, so it keeps a fill in forced colours (decision 0038) */\n  ", " {\n    forced-color-adjust: none;\n    background-color: ", ";\n  }\n"], ["\n  position: absolute;\n  height: 100%;\n  background-color: ", ";\n  border-radius: ", ";\n  pointer-events: none;\n\n  /* The fill is the value, so it keeps a fill in forced colours (decision 0038) */\n  ", " {\n    forced-color-adjust: none;\n    background-color: ", ";\n  }\n"])), function (_a) {
+  var $disabled = _a.$disabled;
+  return $disabled ? semantic.color.icon.disabled : semantic.color.fill.emphasis;
+}, semantic.radius.full, forcedColors, function (_a) {
+  var $disabled = _a.$disabled;
+  return $disabled ? 'GrayText' : 'Highlight';
+});
+var StyledThumb = /*#__PURE__*/styled.div.withConfig({
+  displayName: "Slider__StyledThumb",
+  componentId: "sc-6mh2d4-5"
+})(templateObject_6 || (templateObject_6 = __makeTemplateObject(["\n  position: absolute;\n  width: ", ";\n  height: ", ";\n  top: calc(-1 * ", ");\n  background-color: ", ";\n  border: ", " solid ", ";\n  border-radius: ", ";\n  cursor: ", ";\n  /* The thumb takes every touch gesture, so a drag moves the value instead of scrolling */\n  touch-action: none;\n  transform: translateX(-50%);\n  /* left is the thumb's position, set from the value: it glides there, as it always has (decision 0037) */\n  transition: left ", " ", ",\n              transform ", " ", ",\n              box-shadow ", " ", ",\n              background-color ", " ", ",\n              border-color ", " ", ";\n  box-shadow: ", ";\n\n  /* The pointer target (WCAG 2.5.8, decision 0039): the thumb keeps its 20px look, and an\n     invisible hit area centred on it takes pointer input instead, 24px for a mouse or pen and\n     44px on a touch screen. A range slider's two hit areas stop at the midpoint between the\n     thumbs (--slider-reach, set from their positions), so they never overlap and a drag always\n     takes the nearer thumb. The thumb itself takes no input, as its body can overlap the other\n     thumb's half. */\n  pointer-events: none;\n  --slider-hit: ", ";\n  @media (pointer: coarse) {\n    --slider-hit: ", ";\n  }\n  --slider-hit-half: calc(var(--slider-hit) / 2);\n  --slider-hit-start: ", ";\n  --slider-hit-end: ", ";\n\n  &::before {\n    content: '';\n    position: absolute;\n    top: 50%;\n    left: calc(50% - var(--slider-hit-start));\n    width: calc(var(--slider-hit-start) + var(--slider-hit-end));\n    height: var(--slider-hit);\n    transform: translateY(-50%);\n    pointer-events: auto;\n  }\n\n  /* Without container query units the midpoint can't be measured, so the hit areas stay whole\n     (where they overlap, the thumb drawn later wins) */\n  @supports not (width: 1cqw) {\n    &::before {\n      left: calc(50% - var(--slider-hit-half));\n      width: var(--slider-hit);\n    }\n  }\n\n  ", " {\n    transition: none;\n  }\n  \n  &:hover:not([aria-disabled=\"true\"]) {\n    transform: translateX(-50%) scale(1.1);\n    box-shadow: ", ";\n  }\n  \n  &:focus-visible {\n    outline: ", ";\n    outline-offset: ", ";\n  }\n  \n  &:active:not([aria-disabled=\"true\"]) {\n    cursor: grabbing;\n    transform: translateX(-50%) scale(0.95);\n  }\n  \n  ", "\n"], ["\n  position: absolute;\n  width: ", ";\n  height: ", ";\n  top: calc(-1 * ", ");\n  background-color: ", ";\n  border: ", " solid ", ";\n  border-radius: ", ";\n  cursor: ", ";\n  /* The thumb takes every touch gesture, so a drag moves the value instead of scrolling */\n  touch-action: none;\n  transform: translateX(-50%);\n  /* left is the thumb's position, set from the value: it glides there, as it always has (decision 0037) */\n  transition: left ", " ", ",\n              transform ", " ", ",\n              box-shadow ", " ", ",\n              background-color ", " ", ",\n              border-color ", " ", ";\n  box-shadow: ", ";\n\n  /* The pointer target (WCAG 2.5.8, decision 0039): the thumb keeps its 20px look, and an\n     invisible hit area centred on it takes pointer input instead, 24px for a mouse or pen and\n     44px on a touch screen. A range slider's two hit areas stop at the midpoint between the\n     thumbs (--slider-reach, set from their positions), so they never overlap and a drag always\n     takes the nearer thumb. The thumb itself takes no input, as its body can overlap the other\n     thumb's half. */\n  pointer-events: none;\n  --slider-hit: ", ";\n  @media (pointer: coarse) {\n    --slider-hit: ", ";\n  }\n  --slider-hit-half: calc(var(--slider-hit) / 2);\n  --slider-hit-start: ", ";\n  --slider-hit-end: ", ";\n\n  &::before {\n    content: '';\n    position: absolute;\n    top: 50%;\n    left: calc(50% - var(--slider-hit-start));\n    width: calc(var(--slider-hit-start) + var(--slider-hit-end));\n    height: var(--slider-hit);\n    transform: translateY(-50%);\n    pointer-events: auto;\n  }\n\n  /* Without container query units the midpoint can't be measured, so the hit areas stay whole\n     (where they overlap, the thumb drawn later wins) */\n  @supports not (width: 1cqw) {\n    &::before {\n      left: calc(50% - var(--slider-hit-half));\n      width: var(--slider-hit);\n    }\n  }\n\n  ", " {\n    transition: none;\n  }\n  \n  &:hover:not([aria-disabled=\"true\"]) {\n    transform: translateX(-50%) scale(1.1);\n    box-shadow: ", ";\n  }\n  \n  &:focus-visible {\n    outline: ", ";\n    outline-offset: ", ";\n  }\n  \n  &:active:not([aria-disabled=\"true\"]) {\n    cursor: grabbing;\n    transform: translateX(-50%) scale(0.95);\n  }\n  \n  ", "\n"])), semantic.space[500], semantic.space[500], semantic.space[200], function (_a) {
+  var $disabled = _a.$disabled;
+  return $disabled ? semantic.color.fill.disabled : tokens.component.slider.thumb.background;
+}, semantic.border.width.thick, function (_a) {
+  var $disabled = _a.$disabled;
+  return $disabled ? semantic.color.icon.disabled : semantic.color.fill.emphasis;
+}, semantic.radius.full, function (_a) {
+  var $disabled = _a.$disabled;
+  return $disabled ? 'not-allowed' : 'grab';
+}, semantic.motion.duration.fast, semantic.motion.easing.decelerate, semantic.motion.duration.fast, semantic.motion.easing.decelerate, semantic.motion.duration.fast, semantic.motion.easing.decelerate, semantic.motion.duration.fast, semantic.motion.easing.decelerate, semantic.motion.duration.fast, semantic.motion.easing.decelerate, tokens.component.slider.thumb.shadow["default"], semantic.size.pointerTarget, semantic.size.touchTarget, function (_a) {
+  var $range = _a.$range;
+  return $range === 'max' ? 'min(var(--slider-hit-half), var(--slider-reach))' : 'var(--slider-hit-half)';
+}, function (_a) {
+  var $range = _a.$range;
+  return $range === 'min' ? 'min(var(--slider-hit-half), var(--slider-reach))' : 'var(--slider-hit-half)';
+}, reducedMotion, tokens.component.slider.thumb.shadow.hover, semantic.border.focus, semantic.border.focusOffset, function (_a) {
+  var $active = _a.$active;
+  return $active && "\n    transform: translateX(-50%) scale(1.1);\n    box-shadow: ".concat(tokens.component.slider.thumb.shadow.active, ";\n  ");
+});
+var StyledValueLabel = /*#__PURE__*/styled.div.withConfig({
+  displayName: "Slider__StyledValueLabel",
+  componentId: "sc-6mh2d4-6"
+})(templateObject_7 || (templateObject_7 = __makeTemplateObject(["\n  position: absolute;\n  top: calc(-1 * ", ");\n  left: ", ";\n  transform: translateX(-50%);\n  padding: ", " ", ";\n  background-color: ", ";\n  color: ", ";\n  font: ", ";\n  border-radius: ", ";\n  white-space: nowrap;\n  pointer-events: none;\n  opacity: ", ";\n  \n  &::after {\n    content: '';\n    position: absolute;\n    top: 100%;\n    left: 50%;\n    transform: translateX(-50%);\n    width: 0;\n    height: 0;\n    border-left: ", " solid transparent;\n    border-right: ", " solid transparent;\n    border-top: ", " solid ", ";\n  }\n"], ["\n  position: absolute;\n  top: calc(-1 * ", ");\n  left: ", ";\n  transform: translateX(-50%);\n  padding: ", " ", ";\n  background-color: ", ";\n  color: ", ";\n  font: ", ";\n  border-radius: ", ";\n  white-space: nowrap;\n  pointer-events: none;\n  opacity: ", ";\n  \n  &::after {\n    content: '';\n    position: absolute;\n    top: 100%;\n    left: 50%;\n    transform: translateX(-50%);\n    width: 0;\n    height: 0;\n    border-left: ", " solid transparent;\n    border-right: ", " solid transparent;\n    border-top: ", " solid ", ";\n  }\n"])), semantic.space[800], semantic.space[200], semantic.space[100], semantic.space[200], semantic.color.fill.emphasis, semantic.color.text.inverse, semantic.typography.caption, semantic.radius.sm, function (_a) {
+  var $disabled = _a.$disabled;
+  return $disabled ? semantic.opacity.disabled : semantic.opacity.full;
+}, semantic.space[100], semantic.space[100], semantic.space[100], semantic.color.fill.emphasis);
+var StyledMinMaxLabels = /*#__PURE__*/styled.div.withConfig({
+  displayName: "Slider__StyledMinMaxLabels",
+  componentId: "sc-6mh2d4-7"
+})(templateObject_8 || (templateObject_8 = __makeTemplateObject(["\n  display: flex;\n  justify-content: space-between;\n  font: ", ";\n  color: ", ";\n  margin-top: ", ";\n"], ["\n  display: flex;\n  justify-content: space-between;\n  font: ", ";\n  color: ", ";\n  margin-top: ", ";\n"
+/**
+ * Slider component for single value or range selection
+ *
+ * @example
+ * ```tsx
+ * // Single value slider
+ * <Slider
+ *   label="Volume"
+ *   min={0}
+ *   max={100}
+ *   value={50}
+ *   onChange={(value) => console.log(value)}
+ * />
+ *
+ * // Range slider
+ * <Slider
+ *   label="Budget Range"
+ *   min={0}
+ *   max={1000}
+ *   rangeValue={[200, 800]}
+ *   onRangeChange={(values) => console.log(values)}
+ * />
+ * ```
+ */])), semantic.typography.body, semantic.color.text.muted, semantic.space[100]);
+/**
+ * Slider component for single value or range selection
+ *
+ * @example
+ * ```tsx
+ * // Single value slider
+ * <Slider
+ *   label="Volume"
+ *   min={0}
+ *   max={100}
+ *   value={50}
+ *   onChange={(value) => console.log(value)}
+ * />
+ *
+ * // Range slider
+ * <Slider
+ *   label="Budget Range"
+ *   min={0}
+ *   max={1000}
+ *   rangeValue={[200, 800]}
+ *   onRangeChange={(values) => console.log(values)}
+ * />
+ * ```
+ */
+var Slider = function Slider(_a) {
+  var _b = _a.min,
+    min = _b === void 0 ? 0 : _b,
+    _c = _a.max,
+    max = _c === void 0 ? 100 : _c,
+    _d = _a.step,
+    step = _d === void 0 ? 1 : _d,
+    controlledValue = _a.value,
+    defaultValue = _a.defaultValue,
+    controlledRangeValue = _a.rangeValue,
+    defaultRangeValue = _a.defaultRangeValue,
+    onChange = _a.onChange,
+    onRangeChange = _a.onRangeChange,
+    _e = _a.disabled,
+    disabled = _e === void 0 ? false : _e,
+    label = _a.label,
+    _f = _a.showValueLabel,
+    showValueLabel = _f === void 0 ? true : _f,
+    _g = _a.formatValue,
+    formatValue = _g === void 0 ? function (val) {
+      return val.toString();
+    } : _g,
+    dataTestId = _a["data-testid"],
+    ariaLabel = _a["aria-label"],
+    ariaDescribedBy = _a["aria-describedby"];
+  var generatedId = useId();
+  var trackRef = useRef(null);
+  var _h = useState(null),
+    activeThumb = _h[0],
+    setActiveThumb = _h[1];
+  // Removes the document listeners of a drag in progress
+  var endDragRef = useRef(null);
+  useEffect(function () {
+    return function () {
+      var _a;
+      return (_a = endDragRef.current) === null || _a === void 0 ? void 0 : _a.call(endDragRef);
+    };
+  }, []);
+  // Determine if this is a range slider
+  var isRange = controlledRangeValue !== undefined || defaultRangeValue !== undefined || onRangeChange !== undefined;
+  // State for single slider
+  var _j = useState(defaultValue !== null && defaultValue !== void 0 ? defaultValue : min),
+    internalValue = _j[0],
+    setInternalValue = _j[1];
+  var currentValue = controlledValue !== null && controlledValue !== void 0 ? controlledValue : internalValue;
+  // State for range slider
+  var _k = useState(defaultRangeValue !== null && defaultRangeValue !== void 0 ? defaultRangeValue : [min, min + (max - min) / 4]),
+    internalRangeValue = _k[0],
+    setInternalRangeValue = _k[1];
+  var currentRangeValue = controlledRangeValue !== null && controlledRangeValue !== void 0 ? controlledRangeValue : internalRangeValue;
+  // Clamp value to min/max and nearest step
+  var clampValue = function clampValue(val) {
+    var clamped = Math.max(min, Math.min(max, val));
+    var stepped = Math.round((clamped - min) / step) * step + min;
+    return Math.min(max, stepped);
+  };
+  // Convert pixel position to value
+  var positionToValue = function positionToValue(clientX) {
+    if (!trackRef.current) return min;
+    var rect = trackRef.current.getBoundingClientRect();
+    var percent = (clientX - rect.left) / rect.width;
+    var rawValue = min + percent * (max - min);
+    return clampValue(rawValue);
+  };
+  // Convert value to percentage for positioning
+  var valueToPercent = function valueToPercent(val) {
+    return (val - min) / (max - min) * 100;
+  };
+  // Handle single slider change
+  var handleSingleChange = function handleSingleChange(newValue) {
+    var clampedValue = clampValue(newValue);
+    setInternalValue(clampedValue);
+    onChange === null || onChange === void 0 ? void 0 : onChange(clampedValue);
+  };
+  // Handle range slider change
+  var handleRangeChange = function handleRangeChange(newMin, newMax) {
+    var clampedMin = clampValue(newMin);
+    var clampedMax = clampValue(newMax);
+    // Ensure min <= max
+    var orderedMin = Math.min(clampedMin, clampedMax);
+    var orderedMax = Math.max(clampedMin, clampedMax);
+    setInternalRangeValue([orderedMin, orderedMax]);
+    onRangeChange === null || onRangeChange === void 0 ? void 0 : onRangeChange([orderedMin, orderedMax]);
+  };
+  // Pointer handlers: mouse, touch and pen
+  var handleTrackClick = function handleTrackClick(event) {
+    if (disabled) return;
+    // A click on a thumb (or the end of a drag) leaves the value where the thumb put it
+    if (event.target.closest('[role="slider"]')) return;
+    var newValue = positionToValue(event.clientX);
+    if (isRange) {
+      var minVal = currentRangeValue[0],
+        maxVal = currentRangeValue[1];
+      var distToMin = Math.abs(newValue - minVal);
+      var distToMax = Math.abs(newValue - maxVal);
+      if (distToMin < distToMax) {
+        handleRangeChange(newValue, maxVal);
+      } else {
+        handleRangeChange(minVal, newValue);
+      }
+    } else {
+      handleSingleChange(newValue);
+    }
+  };
+  var handleThumbPointerDown = function handleThumbPointerDown(thumb, event) {
+    var _a, _b, _c;
+    if (disabled) return;
+    // Only the primary button drags; a touch or pen contact always counts
+    if (event.pointerType === 'mouse' && event.button !== 0) return;
+    event.preventDefault();
+    (_a = endDragRef.current) === null || _a === void 0 ? void 0 : _a.call(endDragRef);
+    setActiveThumb(thumb);
+    var pointerId = event.pointerId;
+    // Capture keeps the drag on this thumb when the pointer leaves it, or the window
+    (_c = (_b = event.currentTarget).setPointerCapture) === null || _c === void 0 ? void 0 : _c.call(_b, pointerId);
+    var handlePointerMove = function handlePointerMove(e) {
+      if (e.pointerId !== pointerId) return;
+      var newValue = positionToValue(e.clientX);
+      if (isRange) {
+        var minVal = currentRangeValue[0],
+          maxVal = currentRangeValue[1];
+        if (thumb === 'min') {
+          handleRangeChange(newValue, maxVal);
+        } else {
+          handleRangeChange(minVal, newValue);
+        }
+      } else {
+        handleSingleChange(newValue);
+      }
+    };
+    var endDrag = function endDrag() {
+      setActiveThumb(null);
+      document.removeEventListener('pointermove', handlePointerMove);
+      document.removeEventListener('pointerup', handlePointerEnd);
+      document.removeEventListener('pointercancel', handlePointerEnd);
+      endDragRef.current = null;
+    };
+    // pointercancel fires when the browser takes the gesture over, so it ends the drag too
+    var handlePointerEnd = function handlePointerEnd(e) {
+      if (e.pointerId === pointerId) endDrag();
+    };
+    document.addEventListener('pointermove', handlePointerMove);
+    document.addEventListener('pointerup', handlePointerEnd);
+    document.addEventListener('pointercancel', handlePointerEnd);
+    endDragRef.current = endDrag;
+  };
+  // Keyboard navigation
+  var handleKeyDown = function handleKeyDown(thumb) {
+    return function (event) {
+      if (disabled) return;
+      var valueChange = 0;
+      switch (event.key) {
+        case 'ArrowRight':
+        case 'ArrowUp':
+          valueChange = step;
+          event.preventDefault();
+          break;
+        case 'ArrowLeft':
+        case 'ArrowDown':
+          valueChange = -step;
+          event.preventDefault();
+          break;
+        case 'PageUp':
+          valueChange = step * 10;
+          event.preventDefault();
+          break;
+        case 'PageDown':
+          valueChange = -step * 10;
+          event.preventDefault();
+          break;
+        case 'Home':
+          if (isRange) {
+            var minVal = currentRangeValue[0],
+              maxVal = currentRangeValue[1];
+            if (thumb === 'min') {
+              handleRangeChange(min, maxVal);
+            } else {
+              handleRangeChange(minVal, min);
+            }
+          } else {
+            handleSingleChange(min);
+          }
+          event.preventDefault();
+          return;
+        case 'End':
+          if (isRange) {
+            var minVal = currentRangeValue[0],
+              maxVal = currentRangeValue[1];
+            if (thumb === 'min') {
+              handleRangeChange(max, maxVal);
+            } else {
+              handleRangeChange(minVal, max);
+            }
+          } else {
+            handleSingleChange(max);
+          }
+          event.preventDefault();
+          return;
+        default:
+          return;
+      }
+      if (isRange) {
+        var minVal = currentRangeValue[0],
+          maxVal = currentRangeValue[1];
+        if (thumb === 'min') {
+          handleRangeChange(minVal + valueChange, maxVal);
+        } else {
+          handleRangeChange(minVal, maxVal + valueChange);
+        }
+      } else {
+        handleSingleChange(currentValue + valueChange);
+      }
+    };
+  };
+  // Calculate positions
+  var singlePercent = valueToPercent(currentValue);
+  var _l = [valueToPercent(currentRangeValue[0]), valueToPercent(currentRangeValue[1])],
+    minPercent = _l[0],
+    maxPercent = _l[1];
+  return jsxs(StyledSliderContainer, {
+    "data-testid": dataTestId,
+    children: [label && jsx(StyledLabel, {
+      htmlFor: generatedId,
+      "$disabled": disabled,
+      children: label
+    }), jsx(StyledSliderTrackContainer, {
+      children: jsxs(StyledTrack, {
+        ref: trackRef,
+        onClick: handleTrackClick,
+        "$disabled": disabled,
+        children: [isRange ? jsx(StyledTrackFill, {
+          "$disabled": disabled,
+          style: {
+            left: "".concat(minPercent, "%"),
+            width: "".concat(maxPercent - minPercent, "%")
+          }
+        }) : jsx(StyledTrackFill, {
+          "$disabled": disabled,
+          style: {
+            left: 0,
+            width: "".concat(singlePercent, "%")
+          }
+        }), isRange ? jsxs(Fragment, {
+          children: [jsx(StyledThumb, {
+            role: "slider",
+            tabIndex: disabled ? -1 : 0,
+            "aria-label": ariaLabel ? "".concat(ariaLabel, " minimum") : 'Minimum value',
+            "aria-valuemin": min,
+            "aria-valuemax": max,
+            "aria-valuenow": currentRangeValue[0],
+            "aria-valuetext": formatValue(currentRangeValue[0]),
+            "aria-disabled": disabled,
+            "aria-describedby": ariaDescribedBy,
+            "$disabled": disabled,
+            "$active": activeThumb === 'min',
+            "$range": "min",
+            style: {
+              left: "".concat(minPercent, "%"),
+              '--slider-reach': "".concat((maxPercent - minPercent) / 2, "cqw")
+            },
+            onPointerDown: function onPointerDown(event) {
+              return handleThumbPointerDown('min', event);
+            },
+            onKeyDown: handleKeyDown('min'),
+            children: showValueLabel && jsx(StyledValueLabel, {
+              "$disabled": disabled,
+              children: formatValue(currentRangeValue[0])
+            })
+          }), jsx(StyledThumb, {
+            role: "slider",
+            tabIndex: disabled ? -1 : 0,
+            "aria-label": ariaLabel ? "".concat(ariaLabel, " maximum") : 'Maximum value',
+            "aria-valuemin": min,
+            "aria-valuemax": max,
+            "aria-valuenow": currentRangeValue[1],
+            "aria-valuetext": formatValue(currentRangeValue[1]),
+            "aria-disabled": disabled,
+            "aria-describedby": ariaDescribedBy,
+            "$disabled": disabled,
+            "$active": activeThumb === 'max',
+            "$range": "max",
+            style: {
+              left: "".concat(maxPercent, "%"),
+              '--slider-reach': "".concat((maxPercent - minPercent) / 2, "cqw")
+            },
+            onPointerDown: function onPointerDown(event) {
+              return handleThumbPointerDown('max', event);
+            },
+            onKeyDown: handleKeyDown('max'),
+            children: showValueLabel && jsx(StyledValueLabel, {
+              "$disabled": disabled,
+              children: formatValue(currentRangeValue[1])
+            })
+          })]
+        }) : jsx(StyledThumb, {
+          role: "slider",
+          tabIndex: disabled ? -1 : 0,
+          "aria-label": ariaLabel || label || 'Slider value',
+          "aria-valuemin": min,
+          "aria-valuemax": max,
+          "aria-valuenow": currentValue,
+          "aria-valuetext": formatValue(currentValue),
+          "aria-disabled": disabled,
+          "aria-describedby": ariaDescribedBy,
+          "$disabled": disabled,
+          "$active": activeThumb === 'single',
+          style: {
+            left: "".concat(singlePercent, "%")
+          },
+          onPointerDown: function onPointerDown(event) {
+            return handleThumbPointerDown('single', event);
+          },
+          onKeyDown: handleKeyDown('single'),
+          children: showValueLabel && jsx(StyledValueLabel, {
+            "$disabled": disabled,
+            children: formatValue(currentValue)
+          })
+        })]
+      })
+    }), jsxs(StyledMinMaxLabels, {
+      children: [jsx("span", {
+        children: formatValue(min)
+      }), jsx("span", {
+        children: formatValue(max)
+      })]
+    })]
+  });
+};
+Slider.displayName = 'Slider';
+var templateObject_1, templateObject_2, templateObject_3, templateObject_4, templateObject_5, templateObject_6, templateObject_7, templateObject_8;
+
+export { Slider };
+//# sourceMappingURL=Slider.mjs.map

package/dist/components/molecules/Slider/Slider.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"Slider.mjs","sources":[],"sourcesContent":[],"names":[],"mappings":""}

package/dist/components/molecules/Slider/index.d.mts

@@ -0,0 +1,2 @@
+export { Slider } from './Slider.mjs';
+export type { SliderProps } from './Slider.mjs';

package/dist/components/molecules/TabBar/TabBar.d.mts

@@ -0,0 +1,82 @@
+/**
+ * Tab variant options for TabBar.
+ * @deprecated TabBar has one look, `underline` (decision 0020). `'default'` and `'pills'` render
+ * as `underline`. The type is removed in 3.0.
+ */
+export type TabVariant = 'default' | 'pills' | 'underline';
+/**
+ * Individual tab configuration
+ */
+export interface Tab {
+    /**
+     * Unique identifier for the tab
+     */
+    id: string;
+    /**
+     * Tab label text
+     */
+    label: string;
+    /**
+     * Optional badge count to display
+     */
+    badge?: number;
+    /**
+     * Whether this tab is disabled
+     * @default false
+     */
+    disabled?: boolean;
+}
+/**
+ * Props for the TabBar component
+ */
+export interface TabBarProps {
+    /**
+     * Array of tab configurations
+     */
+    tabs: Tab[];
+    /**
+     * Currently active tab ID
+     */
+    activeTab: string;
+    /**
+     * Callback when tab changes
+     */
+    onTabChange: (tabId: string) => void;
+    /**
+     * Visual variant of the tabs.
+     * @deprecated TabBar has one look, `underline` (decision 0020). `'default'` and `'pills'` render
+     * as `underline`. Remove the prop; it is removed in 3.0.
+     * @default 'underline'
+     */
+    variant?: TabVariant;
+    /**
+     * Accessible label for the tab list
+     */
+    'aria-label'?: string;
+    /**
+     * Test identifier for automated testing
+     */
+    'data-testid'?: string;
+}
+/**
+ * TabBar component for tabbed navigation
+ *
+ * Provides accessible tab navigation with an underline style, keyboard support,
+ * and optional badge counts. Follows ARIA tablist pattern.
+ *
+ * @example
+ * ```tsx
+ * const [activeTab, setActiveTab] = useState('all')
+ *
+ * <TabBar
+ *   tabs={[
+ *     { id: 'all', label: 'All', badge: 42 },
+ *     { id: 'pending', label: 'Pending', badge: 5 },
+ *     { id: 'completed', label: 'Completed' }
+ *   ]}
+ *   activeTab={activeTab}
+ *   onTabChange={setActiveTab}
+ * />
+ * ```
+ */
+export declare const TabBar: React.FC<TabBarProps>;