@mich8060/unified-design-system 0.1.10

package/src/ui/Slider/Slider.jsx

@@ -0,0 +1,283 @@
+import React, { useState, useRef, useEffect } from "react";
+import "./Slider.scss";
+
+const BASE_CLASS = "uds-slider";
+
+/**
+ * Slider component for selecting values within a range
+ * @param {number|array} value - Current value(s). For single slider: number. For range slider: [min, max] array
+ * @param {function} onChange - Callback function when slider value changes
+ * @param {number} min - Minimum value
+ * @param {number} max - Maximum value
+ * @param {number} step - Step increment
+ * @param {boolean} range - Whether to use range mode (two handles)
+ * @param {boolean} showLabels - Whether to show value labels
+ * @param {string} label - Optional label text to display above the slider
+ * @param {boolean} disabled - Whether the slider is disabled
+ * @param {string} className - Additional CSS classes
+ * @param {string} 'aria-label' - Accessible label for screen readers
+ * @param {object} props - Additional props to pass to the slider element
+ */
+export default function Slider({
+  value: controlledValue,
+  onChange,
+  min = 0,
+  max = 100,
+  step = 1,
+  range = false,
+  showLabels = false,
+  label,
+  disabled = false,
+  className = "",
+  "aria-label": ariaLabel,
+  ...props
+}) {
+  const [internalValue, setInternalValue] = useState(range ? [min, max] : min);
+  const [isDragging, setIsDragging] = useState(null); // 'min', 'max', or null
+  const sliderRef = useRef(null);
+  const isControlled = controlledValue !== undefined;
+
+  const value = isControlled ? controlledValue : internalValue;
+  const currentMin = range ? value[0] : min;
+  const currentMax = range ? value[1] : value;
+
+  const sliderId = `slider-${Math.random().toString(36).substr(2, 9)}`;
+
+  const getPercentage = (val) => {
+    return ((val - min) / (max - min)) * 100;
+  };
+
+  const getValueFromPosition = (clientX) => {
+    if (!sliderRef.current) return min;
+    const rect = sliderRef.current.getBoundingClientRect();
+    const percentage = Math.max(
+      0,
+      Math.min(1, (clientX - rect.left) / rect.width),
+    );
+    const rawValue = min + percentage * (max - min);
+    return Math.round(rawValue / step) * step;
+  };
+
+  const handleMouseDown = (e, handle) => {
+    if (disabled) return;
+    e.preventDefault();
+    setIsDragging(handle);
+  };
+
+  const handleMouseMove = (e) => {
+    if (!isDragging || disabled) return;
+
+    const newValue = getValueFromPosition(e.clientX);
+    let updatedValue;
+
+    if (range) {
+      if (isDragging === "min") {
+        updatedValue = [Math.min(newValue, currentMax - step), currentMax];
+      } else {
+        updatedValue = [currentMin, Math.max(newValue, currentMin + step)];
+      }
+    } else {
+      updatedValue = newValue;
+    }
+
+    if (!isControlled) {
+      setInternalValue(updatedValue);
+    }
+    if (onChange) {
+      onChange(updatedValue);
+    }
+  };
+
+  const handleMouseUp = () => {
+    setIsDragging(null);
+  };
+
+  useEffect(() => {
+    if (isDragging) {
+      const moveHandler = (e) => handleMouseMove(e);
+      const upHandler = () => handleMouseUp();
+      document.addEventListener("mousemove", moveHandler);
+      document.addEventListener("mouseup", upHandler);
+      return () => {
+        document.removeEventListener("mousemove", moveHandler);
+        document.removeEventListener("mouseup", upHandler);
+      };
+    }
+  }, [ // eslint-disable-line react-hooks/exhaustive-deps
+    isDragging,
+    currentMin,
+    currentMax,
+    range,
+    step,
+    disabled,
+    isControlled,
+    onChange,
+  ]);
+
+  const handleInputChange = (e, handle) => {
+    if (disabled) return;
+    const newValue = parseFloat(e.target.value);
+    let updatedValue;
+
+    if (range) {
+      if (handle === "min") {
+        updatedValue = [Math.min(newValue, currentMax - step), currentMax];
+      } else {
+        updatedValue = [currentMin, Math.max(newValue, currentMin + step)];
+      }
+    } else {
+      updatedValue = newValue;
+    }
+
+    if (!isControlled) {
+      setInternalValue(updatedValue);
+    }
+    if (onChange) {
+      onChange(updatedValue);
+    }
+  };
+
+  const minPercentage = getPercentage(currentMin);
+  const maxPercentage = getPercentage(currentMax);
+  const leftPosition = minPercentage;
+  const width = maxPercentage - minPercentage;
+
+  const classNames = [
+    BASE_CLASS,
+    range && `${BASE_CLASS}--range`,
+    disabled && `${BASE_CLASS}--disabled`,
+    className,
+  ]
+    .filter(Boolean)
+    .join(" ");
+
+  return (
+    <div className={classNames} {...props}>
+      {label && (
+        <div className={`${BASE_CLASS}__header`}>
+          <label htmlFor={sliderId} className={`${BASE_CLASS}__label`}>
+            {label}
+          </label>
+        </div>
+      )}
+      <div className={`${BASE_CLASS}__container`} ref={sliderRef}>
+        <div className={`${BASE_CLASS}__track`}>
+          {range ? (
+            <>
+              <div
+                className={`${BASE_CLASS}__fill`}
+                style={{
+                  left: `${leftPosition}%`,
+                  width: `${width}%`,
+                }}
+              />
+              <input
+                type="range"
+                id={`${sliderId}-min`}
+                min={min}
+                max={max}
+                step={step}
+                value={currentMin}
+                onChange={(e) => handleInputChange(e, "min")}
+                disabled={disabled}
+                className={`${BASE_CLASS}__input ${BASE_CLASS}__input--min`}
+                aria-label={ariaLabel || `${label || "Slider"} minimum value`}
+              />
+              <input
+                type="range"
+                id={`${sliderId}-max`}
+                min={min}
+                max={max}
+                step={step}
+                value={currentMax}
+                onChange={(e) => handleInputChange(e, "max")}
+                disabled={disabled}
+                className={`${BASE_CLASS}__input ${BASE_CLASS}__input--max`}
+                aria-label={ariaLabel || `${label || "Slider"} maximum value`}
+              />
+              <div
+                className={`${BASE_CLASS}__thumb ${BASE_CLASS}__thumb--min`}
+                style={{ left: `${minPercentage}%` }}
+                onMouseDown={(e) => handleMouseDown(e, "min")}
+                role="slider"
+                aria-valuemin={min}
+                aria-valuemax={max}
+                aria-valuenow={currentMin}
+                tabIndex={disabled ? -1 : 0}
+              />
+              <div
+                className={`${BASE_CLASS}__thumb ${BASE_CLASS}__thumb--max`}
+                style={{ left: `${maxPercentage}%` }}
+                onMouseDown={(e) => handleMouseDown(e, "max")}
+                role="slider"
+                aria-valuemin={min}
+                aria-valuemax={max}
+                aria-valuenow={currentMax}
+                tabIndex={disabled ? -1 : 0}
+              />
+            </>
+          ) : (
+            <>
+              <div
+                className={`${BASE_CLASS}__fill`}
+                style={{ width: `${maxPercentage}%` }}
+              />
+              <input
+                type="range"
+                id={sliderId}
+                min={min}
+                max={max}
+                step={step}
+                value={currentMax}
+                onChange={(e) => handleInputChange(e, "single")}
+                disabled={disabled}
+                className={`${BASE_CLASS}__input`}
+                aria-label={ariaLabel || label || "Slider"}
+              />
+              <div
+                className={`${BASE_CLASS}__thumb`}
+                style={{ left: `${maxPercentage}%` }}
+                onMouseDown={(e) => handleMouseDown(e, "single")}
+                role="slider"
+                aria-valuemin={min}
+                aria-valuemax={max}
+                aria-valuenow={currentMax}
+                tabIndex={disabled ? -1 : 0}
+              />
+            </>
+          )}
+        </div>
+        {showLabels && (
+          <div className={`${BASE_CLASS}__labels`}>
+            {range ? (
+              <>
+                <span
+                  className={`${BASE_CLASS}__label-value`}
+                  style={{ left: `${minPercentage}%` }}
+                >
+                  {Math.round(((currentMin - min) / (max - min)) * 100)}%
+                </span>
+                <span
+                  className={`${BASE_CLASS}__label-value`}
+                  style={{ left: `${maxPercentage}%` }}
+                >
+                  {Math.round(((currentMax - min) / (max - min)) * 100)}%
+                </span>
+              </>
+            ) : (
+              <>
+                <span className={`${BASE_CLASS}__label-value`}>0%</span>
+                <span
+                  className={`${BASE_CLASS}__label-value`}
+                  style={{ left: `${maxPercentage}%` }}
+                >
+                  {Math.round(((currentMax - min) / (max - min)) * 100)}%
+                </span>
+              </>
+            )}
+          </div>
+        )}
+      </div>
+    </div>
+  );
+}

package/src/ui/Slider/Slider.scss

@@ -0,0 +1,156 @@
+@use "../../styles/typography" as *;
+
+.uds-slider {
+  display: flex;
+  flex-direction: column;
+  gap: var(--uds-gap-8);
+  width: 100%;
+
+  &__header {
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+  }
+
+  &__label {
+    @include uds-body-14-medium;
+    color: var(--uds-text-primary);
+  }
+
+  &__container {
+    position: relative;
+    width: 100%;
+    padding: var(--uds-spacing-8) 0;
+  }
+
+  &__track {
+    position: relative;
+    width: 100%;
+    height: 4px;
+    background-color: var(--uds-surface-tertiary);
+    border-radius: var(--uds-radius-2);
+    cursor: pointer;
+  }
+
+  &__fill {
+    position: absolute;
+    top: 0;
+    height: 100%;
+    background-color: var(--uds-surface-brand-primary);
+    border-radius: var(--uds-radius-2);
+    pointer-events: none;
+  }
+
+  &__input {
+    position: absolute;
+    width: 100%;
+    height: 4px;
+    top: 0;
+    left: 0;
+    margin: 0;
+    padding: 0;
+    opacity: 0;
+    cursor: pointer;
+    z-index: 2;
+
+    &::-webkit-slider-thumb {
+      appearance: none;
+      width: 0;
+      height: 0;
+    }
+
+    &::-moz-range-thumb {
+      width: 0;
+      height: 0;
+      border: none;
+    }
+
+    &:focus-visible {
+      outline: none;
+    }
+
+    &:focus-visible + .uds-slider__thumb {
+      outline: solid var(--uds-focus-ring-width) var(--uds-focus-ring-border);
+      outline-offset: var(--uds-focus-ring-offset);
+    }
+
+    &--min {
+      z-index: 3;
+    }
+
+    &--max {
+      z-index: 4;
+    }
+  }
+
+  &__thumb {
+    position: absolute;
+    width: 20px;
+    height: 20px;
+    background-color: var(--uds-surface-primary);
+    border: var(--uds-border-width-1) solid var(--uds-border-primary);
+    border-radius: 50%;
+    cursor: grab;
+    transform: translate(-50%, -50%);
+    top: 50%;
+    z-index: 5;
+    transition:
+      border-color var(--uds-animation-duration-200) var(--uds-animation-ease-standard),
+      box-shadow var(--uds-animation-duration-200) var(--uds-animation-ease-standard);
+
+    &:hover:not(.uds-slider--disabled &) {
+      border-color: var(--uds-border-brand-primary);
+    }
+
+    &:active {
+      cursor: grabbing;
+    }
+
+    &--min {
+      z-index: 6;
+    }
+
+    &--max {
+      z-index: 7;
+    }
+  }
+
+  &__labels {
+    position: relative;
+    width: 100%;
+    margin-top: var(--uds-gap-8);
+    height: 20px;
+  }
+
+  &__label-value {
+    @include uds-body-12-medium;
+    position: absolute;
+    color: var(--uds-text-secondary);
+    transform: translateX(-50%);
+    white-space: nowrap;
+  }
+
+  &--disabled {
+    opacity: 0.6;
+    pointer-events: none;
+    cursor: not-allowed;
+
+    .uds-slider__track {
+      cursor: not-allowed;
+    }
+
+    .uds-slider__thumb {
+      cursor: not-allowed;
+    }
+  }
+
+  &--range {
+    .uds-slider__input--min {
+      z-index: 3;
+    }
+
+    .uds-slider__input--max {
+      z-index: 4;
+    }
+  }
+}

package/src/ui/Slider/Slider.spec.ts

@@ -0,0 +1,12 @@
+export const SLIDER_DEFAULTS = {
+  className: "",
+} as const;
+
+export const SLIDER_STORY_SPEC = {
+  defaults: {
+    className: SLIDER_DEFAULTS.className,
+  },
+  stories: {
+    default: {},
+  },
+} as const;

package/src/ui/Slider/Slider.stories.jsx

@@ -0,0 +1,14 @@
+import Slider from "./Slider";
+
+export default {
+  title: "Components/Slider",
+  component: Slider,
+  tags: ["autodocs"],
+  parameters: {
+    layout: "padded",
+  },
+};
+
+export const Default = {
+  args: {},
+};

package/src/ui/Slider/Slider.stories.tsx

@@ -0,0 +1,14 @@
+import Slider from "./Slider.jsx";
+
+export default {
+  title: "Components/Slider",
+  component: Slider,
+  tags: ["autodocs"],
+  parameters: {
+    layout: "padded",
+  },
+};
+
+export const Default = {
+  args: {},
+};

package/src/ui/Slider/Slider.test.tsx

@@ -0,0 +1 @@
+export {};

package/src/ui/Slider/Slider.tsx

@@ -0,0 +1,6 @@
+import type { ComponentType } from "react";
+import LegacySlider from "./Slider.jsx";
+
+const Slider = LegacySlider as ComponentType<any>;
+
+export default Slider;

package/src/ui/Slider/Slider.types.ts

@@ -0,0 +1,3 @@
+export interface SliderProps {
+  className?: string;
+}

package/src/ui/Slider/index.js

@@ -0,0 +1 @@
+export { default } from "./Slider";

package/src/ui/Status/Status.ai.md

@@ -0,0 +1,36 @@
+# Status
+
+Inline status indicator with dot, icon, or label for conveying state information.
+
+## When to Use
+- Displaying record status inline (Active, Inactive, Pending)
+- Server/connection status indicators
+- Any compact state display
+
+## Props
+
+| Prop | Type | Default | Values | Description |
+|------|------|---------|--------|-------------|
+| `label` | `string` | — | — | Status text |
+| `color` | `string` | `"gray"` | `"red"`, `"orange"`, `"yellow"`, `"green"`, `"blue"`, `"purple"`, `"gray"` | Dot color |
+| `variant` | `string` | `"dot"` | `"dot"`, `"icon"`, `"label"` | Display style |
+| `icon` | `string` | — | Phosphor icon name | Icon (for icon variant) |
+| `className` | `string` | `""` | — | Additional CSS classes |
+
+## Examples
+
+```jsx
+<Status label="Online" color="green" />
+<Status label="Away" color="yellow" />
+<Status label="Offline" color="gray" />
+<Status label="Error" color="red" variant="icon" icon="Warning" />
+```
+
+### In a user list
+```jsx
+<Flex gap="8" alignItems="center">
+  <Avatar src={user.photo} size="small" />
+  <span>{user.name}</span>
+  <Status label={user.status} color={user.online ? "green" : "gray"} />
+</Flex>
+```

package/src/ui/Status/Status.jsx

@@ -0,0 +1,66 @@
+import React from "react";
+import DotStatus from "../DotStatus/DotStatus";
+import "./Status.scss";
+
+const BASE_CLASS = "uds-status";
+
+const appearanceClassMap = {
+  "light-gray": "light-gray",
+  white: "white",
+};
+
+const shapeClassMap = {
+  pill: "pill",
+  rounded: "rounded",
+};
+
+/**
+ * Status component for displaying status indicators with labels
+ * @param {string} label - The text content of the status
+ * @param {string} variant - Color variant for the status dot
+ * @param {string} appearance - Background appearance: 'light-gray' or 'white'
+ * @param {string} shape - Shape variant: 'pill' (fully rounded) or 'rounded' (slightly rounded)
+ * @param {string} className - Additional CSS classes
+ * @param {function} onClick - Click handler function
+ * @param {boolean} disabled - Whether the status is disabled
+ * @param {object} props - Additional props to pass to the status element
+ */
+export default function Status({
+  label,
+  variant = "blue",
+  appearance = "light-gray",
+  shape = "pill",
+  className = "",
+  onClick,
+  disabled = false,
+  ...props
+}) {
+  const classNames = [
+    BASE_CLASS,
+    appearanceClassMap[appearance] &&
+      `${BASE_CLASS}--${appearanceClassMap[appearance]}`,
+    shapeClassMap[shape] && `${BASE_CLASS}--${shapeClassMap[shape]}`,
+    disabled && `${BASE_CLASS}--disabled`,
+    className,
+  ]
+    .filter(Boolean)
+    .join(" ");
+
+  const Element = onClick ? "button" : "span";
+
+  return (
+    <Element
+      className={classNames}
+      onClick={disabled ? undefined : onClick}
+      disabled={disabled}
+      {...props}
+    >
+      <DotStatus
+        variant={variant}
+        size="small"
+        className={`${BASE_CLASS}__dot`}
+      />
+      {label && <span className={`${BASE_CLASS}__label`}>{label}</span>}
+    </Element>
+  );
+}

package/src/ui/Status/Status.scss

@@ -0,0 +1,90 @@
+@use "../../styles/typography" as *;
+
+.uds-status {
+  @include uds-body-14-medium;
+  display: inline-flex;
+  align-items: center;
+  gap: var(--uds-gap-8);
+  padding-inline: var(--uds-spacing-12);
+  padding-block: var(--uds-spacing-6);
+  border: var(--uds-border-width-1) solid var(--uds-border-primary);
+  background-color: var(--uds-surface-secondary);
+  color: var(--uds-text-primary);
+  cursor: pointer;
+  user-select: none;
+  transition: all var(--uds-animation-duration-200) var(--uds-animation-ease-standard);
+  box-sizing: border-box;
+  white-space: nowrap;
+  width: fit-content;
+  height: fit-content;
+
+  // Shape variants
+  &--pill {
+    border-radius: 999px; // Fully rounded pill shape
+  }
+
+  &--rounded {
+    border-radius: var(--uds-radius-4); // Slightly rounded rectangular
+  }
+
+  // Appearance variants
+  &--light-gray {
+    background-color: var(--uds-surface-secondary);
+    border-color: var(--uds-border-primary);
+    color: var(--uds-text-primary);
+
+    &:hover:not(&--disabled) {
+      border-color: var(--uds-border-secondary);
+      background-color: var(--uds-surface-tertiary);
+    }
+
+    &:active:not(&--disabled) {
+      border-color: var(--uds-border-tertiary);
+      background-color: var(--uds-surface-quaternary);
+    }
+  }
+
+  &--white {
+    background-color: var(--uds-surface-primary);
+    border-color: var(--uds-border-primary);
+    color: var(--uds-text-primary);
+
+    &:hover:not(&--disabled) {
+      border-color: var(--uds-border-secondary);
+      background-color: var(--uds-surface-secondary);
+    }
+
+    &:active:not(&--disabled) {
+      border-color: var(--uds-border-tertiary);
+      background-color: var(--uds-surface-tertiary);
+    }
+  }
+
+  &__dot {
+    flex-shrink: 0;
+  }
+
+  &__label {
+    display: inline-block;
+    white-space: nowrap;
+  }
+
+  // Disabled state
+  &--disabled {
+    cursor: not-allowed;
+    opacity: 0.6;
+    pointer-events: none;
+  }
+
+  // Focus state
+  &:focus-visible {
+    outline: solid var(--uds-focus-ring-width) var(--uds-focus-ring-border);
+    outline-offset: var(--uds-focus-ring-offset);
+  }
+
+  // When used as button, remove default button styles
+  &:is(button) {
+    all: unset;
+    display: inline-flex;
+  }
+}

package/src/ui/Status/Status.spec.ts

@@ -0,0 +1,12 @@
+export const STATUS_DEFAULTS = {
+  className: "",
+} as const;
+
+export const STATUS_STORY_SPEC = {
+  defaults: {
+    className: STATUS_DEFAULTS.className,
+  },
+  stories: {
+    default: {},
+  },
+} as const;