@common-origin/design-system 2.19.0 → 2.20.0

package/dist/components/molecules/Modal/Modal.mjs

@@ -0,0 +1,259 @@
+'use client';
+import { __makeTemplateObject } from '../../../vendor/tslib/tslib.es6.mjs';
+import { jsxs, Fragment, jsx } from 'react/jsx-runtime';
+import { useRef, useEffect } from 'react';
+import { createPortal } from 'react-dom';
+import styled$module, { keyframes, css } from 'styled-components';
+const styled = styled$module.default || styled$module;
+import { IconButton } from '../../atoms/IconButton/IconButton.mjs';
+import { Button } from '../../atoms/Button/Button.mjs';
+import { Typography } from '../../atoms/Typography/Typography.mjs';
+import { Divider } from '../../atoms/Divider/Divider.mjs';
+import tokens from '../../../lib/cssTokens.mjs';
+import { exitAnimation, reducedMotion } from '../../../lib/styleUtils.mjs';
+import { usePresence, useInert } from '../../../lib/usePresence.mjs';
+
+var semantic = tokens.semantic;
+var space = semantic.space,
+  color = semantic.color,
+  elevation = semantic.elevation,
+  motion = semantic.motion;
+// ---------------------------------------------------------------------------
+// Size map
+// ---------------------------------------------------------------------------
+var sizeToWidth = {
+  small: tokens.semantic.size.overlay.sm,
+  medium: tokens.semantic.size.overlay.md,
+  large: tokens.semantic.size.overlay.lg
+};
+// ---------------------------------------------------------------------------
+// Animations
+// ---------------------------------------------------------------------------
+var fadeIn = keyframes(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  from { opacity: 0; }\n  to   { opacity: 1; }\n"], ["\n  from { opacity: 0; }\n  to   { opacity: 1; }\n"])));
+var scaleIn = keyframes(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n  from {\n    opacity: 0;\n    transform: translate(-50%, -50%) scale(0.95);\n  }\n  to {\n    opacity: 1;\n    transform: translate(-50%, -50%) scale(1);\n  }\n"], ["\n  from {\n    opacity: 0;\n    transform: translate(-50%, -50%) scale(0.95);\n  }\n  to {\n    opacity: 1;\n    transform: translate(-50%, -50%) scale(1);\n  }\n"
+// ---------------------------------------------------------------------------
+// Styled components
+// ---------------------------------------------------------------------------
+])));
+// ---------------------------------------------------------------------------
+// Styled components
+// ---------------------------------------------------------------------------
+var StyledOverlay = /*#__PURE__*/styled.div.withConfig({
+  displayName: "Modal__StyledOverlay",
+  componentId: "sc-1d3g5gh-0"
+})(templateObject_4 || (templateObject_4 = __makeTemplateObject(["\n  position: fixed;\n  inset: 0;\n  background-color: ", ";\n  z-index: ", ";\n  ", "\n"], ["\n  position: fixed;\n  inset: 0;\n  background-color: ", ";\n  z-index: ", ";\n  ", "\n"])), semantic.surface.scrim, semantic.layer.modal, css(templateObject_3 || (templateObject_3 = __makeTemplateObject(["animation: ", " ", " ", "", ";"], ["animation: ", " ", " ", "", ";"])), fadeIn, motion.duration.moderate, motion.easing.decelerate, function (_a) {
+  var $isExiting = _a.$isExiting;
+  return $isExiting && exitAnimation;
+}));
+var StyledDialog = /*#__PURE__*/styled.div.withConfig({
+  shouldForwardProp: function shouldForwardProp(prop) {
+    return !prop.startsWith('$');
+  },
+  displayName: "Modal__StyledDialog",
+  componentId: "sc-1d3g5gh-1"
+})(templateObject_6 || (templateObject_6 = __makeTemplateObject(["\n  position: fixed;\n  top: 50%;\n  left: 50%;\n  transform: translate(-50%, -50%) scale(1);\n  z-index: ", ";\n\n  width: ", ";\n  max-width: calc(100vw - ", " * 2);\n  max-height: calc(100vh - ", " * 2);\n\n  display: flex;\n  flex-direction: column;\n\n  background-color: ", ";\n  border-radius: ", ";\n  box-shadow: ", ";\n  overflow: hidden;\n\n  ", "\n\n  ", " {\n    animation: ", " ", " ", "", ";\n  }\n\n  /* Auto-fullscreen below md breakpoint (768px) */\n  @media (max-width: ", ") {\n    width: 100vw;\n    height: 100vh;\n    max-width: 100vw;\n    max-height: 100vh;\n    border-radius: 0;\n    top: 0;\n    left: 0;\n    transform: none;\n    animation: ", " ", " ", "", ";\n  }\n\n  &:focus {\n    outline: none;\n  }\n\n"], ["\n  position: fixed;\n  top: 50%;\n  left: 50%;\n  transform: translate(-50%, -50%) scale(1);\n  z-index: ", ";\n\n  width: ", ";\n  max-width: calc(100vw - ", " * 2);\n  max-height: calc(100vh - ", " * 2);\n\n  display: flex;\n  flex-direction: column;\n\n  background-color: ", ";\n  border-radius: ", ";\n  box-shadow: ", ";\n  overflow: hidden;\n\n  ", "\n\n  ", " {\n    animation: ", " ", " ", "", ";\n  }\n\n  /* Auto-fullscreen below md breakpoint (768px) */\n  @media (max-width: ", ") {\n    width: 100vw;\n    height: 100vh;\n    max-width: 100vw;\n    max-height: 100vh;\n    border-radius: 0;\n    top: 0;\n    left: 0;\n    transform: none;\n    animation: ", " ", " ", "", ";\n  }\n\n  &:focus {\n    outline: none;\n  }\n\n"])), semantic.layer.modal, function (_a) {
+  var $width = _a.$width;
+  return $width;
+}, space[400], space[400], semantic.surface.raised, semantic.radius.xl, elevation.overlay, css(templateObject_5 || (templateObject_5 = __makeTemplateObject(["animation: ", " ", " ", "", ";"], ["animation: ", " ", " ", "", ";"])), scaleIn, motion.duration.moderate, motion.easing.decelerate, function (_a) {
+  var $isExiting = _a.$isExiting;
+  return $isExiting && exitAnimation;
+}), reducedMotion, fadeIn, motion.duration.moderate, motion.easing.decelerate, function (_a) {
+  var $isExiting = _a.$isExiting;
+  return $isExiting && exitAnimation;
+}, semantic.breakpoint.md, fadeIn, motion.duration.moderate, motion.easing.decelerate, function (_a) {
+  var $isExiting = _a.$isExiting;
+  return $isExiting && exitAnimation;
+});
+var StyledHeader = /*#__PURE__*/styled.div.withConfig({
+  displayName: "Modal__StyledHeader",
+  componentId: "sc-1d3g5gh-2"
+})(templateObject_7 || (templateObject_7 = __makeTemplateObject(["\n  display: flex;\n  align-items: center;\n  justify-content: space-between;\n  padding: ", " ", " 0;\n  flex-shrink: 0;\n"], ["\n  display: flex;\n  align-items: center;\n  justify-content: space-between;\n  padding: ", " ", " 0;\n  flex-shrink: 0;\n"])), space[400], space[400]);
+var StyledBody = /*#__PURE__*/styled.div.withConfig({
+  displayName: "Modal__StyledBody",
+  componentId: "sc-1d3g5gh-3"
+})(templateObject_8 || (templateObject_8 = __makeTemplateObject(["\n  flex: 1 1 auto;\n  overflow-y: auto;\n  padding: ", " ", ";\n\n  /* Scrollbar styling */\n  &::-webkit-scrollbar {\n    width: ", ";\n  }\n  &::-webkit-scrollbar-track {\n    background: ", ";\n  }\n  &::-webkit-scrollbar-thumb {\n    background: ", ";\n    border-radius: ", ";\n  }\n  &::-webkit-scrollbar-thumb:hover {\n    background: ", ";\n  }\n"], ["\n  flex: 1 1 auto;\n  overflow-y: auto;\n  padding: ", " ", ";\n\n  /* Scrollbar styling */\n  &::-webkit-scrollbar {\n    width: ", ";\n  }\n  &::-webkit-scrollbar-track {\n    background: ", ";\n  }\n  &::-webkit-scrollbar-thumb {\n    background: ", ";\n    border-radius: ", ";\n  }\n  &::-webkit-scrollbar-thumb:hover {\n    background: ", ";\n  }\n"])), space[300], space[400], semantic.space[200], color.fill.muted, color.border["default"], semantic.radius.full, color.fill.inverse);
+var StyledFooter = /*#__PURE__*/styled.div.withConfig({
+  displayName: "Modal__StyledFooter",
+  componentId: "sc-1d3g5gh-4"
+})(templateObject_9 || (templateObject_9 = __makeTemplateObject(["\n  display: flex;\n  justify-content: flex-end;\n  gap: ", ";\n  padding: 0 ", " ", ";\n  flex-shrink: 0;\n"], ["\n  display: flex;\n  justify-content: flex-end;\n  gap: ", ";\n  padding: 0 ", " ", ";\n  flex-shrink: 0;\n"
+// ---------------------------------------------------------------------------
+// Component
+// ---------------------------------------------------------------------------
+/**
+ * Modal component
+ *
+ * A centred dialog overlay with a title, close button (IconButton), scrollable
+ * body content, and an optional footer with structured action buttons.
+ *
+ * - Renders via `createPortal` to avoid z-index / overflow issues.
+ * - Auto-fullscreen on viewports narrower than 768 px.
+ * - Focus trap, Escape-to-close, overlay-click-to-close.
+ * - Locks body scroll while open.
+ *
+ * Composes: IconButton, Button, Typography, Stack, Divider
+ */])), space[200], space[400], space[400]);
+// ---------------------------------------------------------------------------
+// Component
+// ---------------------------------------------------------------------------
+/**
+ * Modal component
+ *
+ * A centred dialog overlay with a title, close button (IconButton), scrollable
+ * body content, and an optional footer with structured action buttons.
+ *
+ * - Renders via `createPortal` to avoid z-index / overflow issues.
+ * - Auto-fullscreen on viewports narrower than 768 px.
+ * - Focus trap, Escape-to-close, overlay-click-to-close.
+ * - Locks body scroll while open.
+ *
+ * Composes: IconButton, Button, Typography, Stack, Divider
+ */
+var Modal = function Modal(_a) {
+  var isOpen = _a.isOpen,
+    onClose = _a.onClose,
+    title = _a.title,
+    children = _a.children,
+    _b = _a.size,
+    size = _b === void 0 ? 'medium' : _b,
+    actions = _a.actions,
+    _c = _a.closeOnOverlayClick,
+    closeOnOverlayClick = _c === void 0 ? true : _c,
+    _d = _a.closeOnEscape,
+    closeOnEscape = _d === void 0 ? true : _d,
+    dataTestId = _a["data-testid"],
+    ariaLabel = _a["aria-label"],
+    ariaDescribedBy = _a["aria-describedby"];
+  var dialogRef = useRef(null);
+  var previousFocusRef = useRef(null);
+  var _e = usePresence(isOpen),
+    isPresent = _e.isPresent,
+    isExiting = _e.isExiting;
+  useInert(dialogRef, isExiting);
+  // -----------------------------------------------------------------------
+  // Focus & scroll-lock management
+  // -----------------------------------------------------------------------
+  useEffect(function () {
+    var _a;
+    if (isOpen) {
+      previousFocusRef.current = document.activeElement;
+      // Short delay so the animation can start before we shift focus
+      var timer_1 = setTimeout(function () {
+        var _a;
+        return (_a = dialogRef.current) === null || _a === void 0 ? void 0 : _a.focus();
+      }, 100);
+      document.body.style.overflow = 'hidden';
+      return function () {
+        clearTimeout(timer_1);
+      };
+    } else {
+      (_a = previousFocusRef.current) === null || _a === void 0 ? void 0 : _a.focus();
+      document.body.style.overflow = '';
+    }
+    return function () {
+      document.body.style.overflow = '';
+    };
+  }, [isOpen]);
+  // -----------------------------------------------------------------------
+  // Keyboard handling (Escape + focus trap)
+  // -----------------------------------------------------------------------
+  var handleKeyDown = function handleKeyDown(event) {
+    var _a;
+    if (closeOnEscape && event.key === 'Escape') {
+      event.preventDefault();
+      onClose();
+    }
+    if (event.key === 'Tab') {
+      var focusableElements = (_a = dialogRef.current) === null || _a === void 0 ? void 0 : _a.querySelectorAll('button, [href], input, select, textarea, [tabindex]:not([tabindex="-1"])');
+      if (!focusableElements || focusableElements.length === 0) return;
+      var first = focusableElements[0];
+      var last = focusableElements[focusableElements.length - 1];
+      if (event.shiftKey && document.activeElement === first) {
+        event.preventDefault();
+        last.focus();
+      } else if (!event.shiftKey && document.activeElement === last) {
+        event.preventDefault();
+        first.focus();
+      }
+    }
+  };
+  // -----------------------------------------------------------------------
+  // Overlay click
+  // -----------------------------------------------------------------------
+  var handleOverlayClick = function handleOverlayClick(event) {
+    // While exiting, the backdrop still catches clicks but doesn't close again
+    if (!isExiting && closeOnOverlayClick && event.target === event.currentTarget) {
+      onClose();
+    }
+  };
+  // -----------------------------------------------------------------------
+  // Render
+  // -----------------------------------------------------------------------
+  // Stays mounted while the exit fade runs, hidden from assistive technology
+  if (!isPresent) return null;
+  var titleId = dataTestId ? "".concat(dataTestId, "-title") : 'modal-title';
+  var width = sizeToWidth[size];
+  var modal = jsxs(Fragment, {
+    children: [jsx(StyledOverlay, {
+      onClick: handleOverlayClick,
+      "$isExiting": isExiting,
+      "data-testid": dataTestId ? "".concat(dataTestId, "-overlay") : 'modal-overlay'
+    }), jsxs(StyledDialog, {
+      ref: dialogRef,
+      role: "dialog",
+      "aria-modal": "true",
+      "aria-label": ariaLabel || title,
+      "aria-labelledby": titleId,
+      "aria-describedby": ariaDescribedBy,
+      "aria-hidden": isExiting || undefined,
+      tabIndex: -1,
+      "$width": width,
+      "$isExiting": isExiting,
+      onKeyDown: handleKeyDown,
+      "data-testid": dataTestId,
+      children: [jsxs(StyledHeader, {
+        children: [jsx("span", {
+          id: titleId,
+          children: jsx(Typography, {
+            variant: "h3",
+            children: title
+          })
+        }), jsx(IconButton, {
+          variant: "naked",
+          iconName: "close",
+          "aria-label": "Close modal",
+          onClick: onClose,
+          size: "medium",
+          "data-testid": dataTestId ? "".concat(dataTestId, "-close") : 'modal-close'
+        })]
+      }), jsx(Divider, {
+        size: "small"
+      }), jsx(StyledBody, {
+        "data-testid": dataTestId ? "".concat(dataTestId, "-body") : 'modal-body',
+        children: children
+      }), actions && actions.length > 0 && jsxs(Fragment, {
+        children: [jsx(Divider, {
+          size: "small"
+        }), jsx(StyledFooter, {
+          "data-testid": dataTestId ? "".concat(dataTestId, "-footer") : 'modal-footer',
+          children: actions.map(function (action, index) {
+            return jsx(Button, {
+              onClick: action.onClick,
+              variant: action.variant || 'secondary',
+              iconName: action.icon,
+              disabled: action.disabled,
+              size: "medium",
+              "data-testid": dataTestId ? "".concat(dataTestId, "-action-").concat(index) : "modal-action-".concat(index),
+              children: action.label
+            }, "".concat(action.label, "-").concat(index));
+          })
+        })]
+      })]
+    })]
+  });
+  return /*#__PURE__*/createPortal(modal, document.body);
+};
+Modal.displayName = 'Modal';
+var templateObject_1, templateObject_2, templateObject_3, templateObject_4, templateObject_5, templateObject_6, templateObject_7, templateObject_8, templateObject_9;
+
+export { Modal };
+//# sourceMappingURL=Modal.mjs.map

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

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

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

@@ -0,0 +1,2 @@
+export { Modal } from './Modal.mjs';
+export type { ModalProps, ModalAction, ModalSize } from './Modal.mjs';

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

@@ -0,0 +1,86 @@
+import { InputHTMLAttributes, ChangeEvent } from 'react';
+/**
+ * Props for the NumberInput component
+ */
+export interface NumberInputProps extends Omit<InputHTMLAttributes<HTMLInputElement>, 'type' | 'onChange' | 'value' | 'defaultValue'> {
+    /**
+     * Label text for the input
+     */
+    label?: string;
+    /**
+     * Helper text displayed below the input
+     */
+    helperText?: string;
+    /**
+     * Error message to display
+     */
+    error?: string;
+    /**
+     * Whether the field is required
+     * @default false
+     */
+    required?: boolean;
+    /**
+     * Whether the input is disabled
+     * @default false
+     */
+    disabled?: boolean;
+    /**
+     * Minimum allowed value
+     */
+    min?: number;
+    /**
+     * Maximum allowed value
+     */
+    max?: number;
+    /**
+     * Step increment/decrement value
+     * @default 1
+     */
+    step?: number;
+    /**
+     * Current value (controlled)
+     */
+    value?: number | '';
+    /**
+     * Default value (uncontrolled)
+     */
+    defaultValue?: number | '';
+    /**
+     * Callback fired when value changes
+     */
+    onChange?: (value: number | '', event: ChangeEvent<HTMLInputElement>) => void;
+    /**
+     * Unique identifier for the input
+     * Generated automatically if not provided
+     */
+    id?: string;
+    /**
+     * Test identifier for automated testing
+     */
+    'data-testid'?: string;
+}
+/**
+ * NumberInput component for numeric input with stepper buttons and WCAG 2.2 AA compliance
+ *
+ * Features:
+ * - Stepper buttons for increment/decrement
+ * - Keyboard arrow up/down support
+ * - Min/max value constraints
+ * - Custom step values
+ * - Decimal and integer support
+ * - Full accessibility with ARIA attributes
+ *
+ * @example
+ * ```tsx
+ * <NumberInput
+ *   label="Quantity"
+ *   min={0}
+ *   max={100}
+ *   step={1}
+ *   value={value}
+ *   onChange={(newValue) => setValue(newValue)}
+ * />
+ * ```
+ */
+export declare const NumberInput: import("react").ForwardRefExoticComponent<NumberInputProps & import("react").RefAttributes<HTMLInputElement>>;

package/dist/components/molecules/NumberInput/NumberInput.mjs

@@ -0,0 +1,268 @@
+'use client';
+import { __makeTemplateObject, __rest, __assign } from '../../../vendor/tslib/tslib.es6.mjs';
+import { jsxs, jsx } from 'react/jsx-runtime';
+import { forwardRef, useId, useCallback } from 'react';
+import styled$module from 'styled-components';
+const styled = styled$module.default || styled$module;
+import { StyledInputBase } from '../TextField/InputBase.mjs';
+import { IconButton } from '../../atoms/IconButton/IconButton.mjs';
+import tokens from '../../../lib/cssTokens.mjs';
+
+var field = tokens.component.field;
+// Gaps come from the semantic spacing scale: no component spacing tokens (decision 0022)
+var space = tokens.semantic.space;
+var StyledFieldContainer = /*#__PURE__*/styled.div.withConfig({
+  displayName: "NumberInput__StyledFieldContainer",
+  componentId: "sc-qotc3w-0"
+})(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  display: flex;\n  flex-direction: column;\n  gap: ", ";\n  width: 100%;\n"], ["\n  display: flex;\n  flex-direction: column;\n  gap: ", ";\n  width: 100%;\n"])), space[200]);
+var StyledLabel = /*#__PURE__*/styled.label.withConfig({
+  displayName: "NumberInput__StyledLabel",
+  componentId: "sc-qotc3w-1"
+})(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n  display: flex;\n  align-items: center;\n  gap: ", ";\n  font: ", ";\n  color: ", ";\n\n  &[data-disabled='true'] {\n    color: ", ";\n  }\n"], ["\n  display: flex;\n  align-items: center;\n  gap: ", ";\n  font: ", ";\n  color: ", ";\n\n  &[data-disabled='true'] {\n    color: ", ";\n  }\n"])), space[100], field.label.typography, field.label.color, field.label.colorDisabled);
+var StyledRequiredIndicator = /*#__PURE__*/styled.span.withConfig({
+  displayName: "NumberInput__StyledRequiredIndicator",
+  componentId: "sc-qotc3w-2"
+})(templateObject_3 || (templateObject_3 = __makeTemplateObject(["\n  color: ", ";\n  font-weight: ", ";\n"], ["\n  color: ", ";\n  font-weight: ", ";\n"])), field.requiredIndicator.color, field.requiredIndicator.fontWeight);
+var StyledInputWrapper = /*#__PURE__*/styled.div.withConfig({
+  displayName: "NumberInput__StyledInputWrapper",
+  componentId: "sc-qotc3w-3"
+})(templateObject_4 || (templateObject_4 = __makeTemplateObject(["\n  position: relative;\n  display: flex;\n  align-items: center;\n"], ["\n  position: relative;\n  display: flex;\n  align-items: center;\n"])));
+var StyledNumberInput = /*#__PURE__*/styled(StyledInputBase).withConfig({
+  displayName: "NumberInput__StyledNumberInput",
+  componentId: "sc-qotc3w-4"
+})(templateObject_5 || (templateObject_5 = __makeTemplateObject(["\n  /* Add padding on the right to make room for stepper buttons */\n  padding-right: ", ";\n"], ["\n  /* Add padding on the right to make room for stepper buttons */\n  padding-right: ", ";\n"])), tokens.semantic.space[1000]);
+var StyledStepperContainer = /*#__PURE__*/styled.div.withConfig({
+  displayName: "NumberInput__StyledStepperContainer",
+  componentId: "sc-qotc3w-5"
+})(templateObject_6 || (templateObject_6 = __makeTemplateObject(["\n  position: absolute;\n  right: ", ";\n  display: flex;\n  flex-direction: row;\n  gap: ", ";\n"], ["\n  position: absolute;\n  right: ", ";\n  display: flex;\n  flex-direction: row;\n  gap: ", ";\n"])), tokens.semantic.space[200], tokens.semantic.space[200]);
+var StyledHelperText = /*#__PURE__*/styled.div.withConfig({
+  displayName: "NumberInput__StyledHelperText",
+  componentId: "sc-qotc3w-6"
+})(templateObject_7 || (templateObject_7 = __makeTemplateObject(["\n  font: ", ";\n  color: ", ";\n"], ["\n  font: ", ";\n  color: ", ";\n"
+/**
+ * NumberInput component for numeric input with stepper buttons and WCAG 2.2 AA compliance
+ *
+ * Features:
+ * - Stepper buttons for increment/decrement
+ * - Keyboard arrow up/down support
+ * - Min/max value constraints
+ * - Custom step values
+ * - Decimal and integer support
+ * - Full accessibility with ARIA attributes
+ *
+ * @example
+ * ```tsx
+ * <NumberInput
+ *   label="Quantity"
+ *   min={0}
+ *   max={100}
+ *   step={1}
+ *   value={value}
+ *   onChange={(newValue) => setValue(newValue)}
+ * />
+ * ```
+ */])), field.helperText.typography, function (_a) {
+  var $isError = _a.$isError;
+  return $isError ? field.helperText.colorError : field.helperText.color;
+});
+/**
+ * NumberInput component for numeric input with stepper buttons and WCAG 2.2 AA compliance
+ *
+ * Features:
+ * - Stepper buttons for increment/decrement
+ * - Keyboard arrow up/down support
+ * - Min/max value constraints
+ * - Custom step values
+ * - Decimal and integer support
+ * - Full accessibility with ARIA attributes
+ *
+ * @example
+ * ```tsx
+ * <NumberInput
+ *   label="Quantity"
+ *   min={0}
+ *   max={100}
+ *   step={1}
+ *   value={value}
+ *   onChange={(newValue) => setValue(newValue)}
+ * />
+ * ```
+ */
+var NumberInput = /*#__PURE__*/forwardRef(function (_a, ref) {
+  var label = _a.label,
+    helperText = _a.helperText,
+    error = _a.error,
+    _b = _a.required,
+    required = _b === void 0 ? false : _b,
+    _c = _a.disabled,
+    disabled = _c === void 0 ? false : _c,
+    min = _a.min,
+    max = _a.max,
+    _d = _a.step,
+    step = _d === void 0 ? 1 : _d,
+    value = _a.value,
+    defaultValue = _a.defaultValue,
+    onChange = _a.onChange,
+    providedId = _a.id,
+    testId = _a["data-testid"],
+    placeholder = _a.placeholder,
+    ariaLabel = _a["aria-label"],
+    ariaDescribedBy = _a["aria-describedby"],
+    rest = __rest(_a, ["label", "helperText", "error", "required", "disabled", "min", "max", "step", "value", "defaultValue", "onChange", "id", 'data-testid', "placeholder", 'aria-label', 'aria-describedby']);
+  var generatedId = useId();
+  var id = providedId || generatedId;
+  var helperId = "".concat(id, "-helper");
+  var errorId = "".concat(id, "-error");
+  // Parse string value to number or empty string
+  var parseValue = useCallback(function (val) {
+    if (val === '' || val === '-') return '';
+    var parsed = parseFloat(val);
+    return isNaN(parsed) ? '' : parsed;
+  }, []);
+  // Format number to string for display
+  var formatValue = useCallback(function (val) {
+    return val === '' ? '' : String(val);
+  }, []);
+  // Handle increment
+  var handleIncrement = useCallback(function () {
+    if (disabled) return;
+    var inputElement = ref === null || ref === void 0 ? void 0 : ref.current;
+    var currentValue = value !== undefined ? value : parseValue((inputElement === null || inputElement === void 0 ? void 0 : inputElement.value) || '');
+    var numValue = currentValue === '' ? min !== undefined ? min : 0 : currentValue;
+    var newValue = numValue + step;
+    // Check max constraint
+    if (max !== undefined && newValue > max) return;
+    // Update input value directly for both controlled and uncontrolled
+    if (inputElement) {
+      inputElement.value = String(newValue);
+    }
+    // Create synthetic event
+    var syntheticEvent = {
+      target: inputElement || {
+        value: String(newValue)
+      },
+      currentTarget: inputElement || {
+        value: String(newValue)
+      }
+    };
+    onChange === null || onChange === void 0 ? void 0 : onChange(newValue, syntheticEvent);
+  }, [disabled, value, min, max, step, onChange, parseValue, ref]);
+  // Handle decrement
+  var handleDecrement = useCallback(function () {
+    if (disabled) return;
+    var inputElement = ref === null || ref === void 0 ? void 0 : ref.current;
+    var currentValue = value !== undefined ? value : parseValue((inputElement === null || inputElement === void 0 ? void 0 : inputElement.value) || '');
+    var numValue = currentValue === '' ? max !== undefined ? max : 0 : currentValue;
+    var newValue = numValue - step;
+    // Check min constraint
+    if (min !== undefined && newValue < min) return;
+    // Update input value directly for both controlled and uncontrolled
+    if (inputElement) {
+      inputElement.value = String(newValue);
+    }
+    // Create synthetic event
+    var syntheticEvent = {
+      target: inputElement || {
+        value: String(newValue)
+      },
+      currentTarget: inputElement || {
+        value: String(newValue)
+      }
+    };
+    onChange === null || onChange === void 0 ? void 0 : onChange(newValue, syntheticEvent);
+  }, [disabled, value, min, max, step, onChange, parseValue, ref]);
+  // Handle input change
+  var handleChange = useCallback(function (e) {
+    var inputValue = e.target.value;
+    // Allow empty, negative sign, or valid number (including decimals)
+    if (inputValue === '' || inputValue === '-' || /^-?\d*\.?\d*$/.test(inputValue)) {
+      var parsedValue = parseValue(inputValue);
+      onChange === null || onChange === void 0 ? void 0 : onChange(parsedValue, e);
+    } else {
+      // Prevent invalid input by not updating
+      e.preventDefault();
+      e.target.value = formatValue(value !== undefined ? value : '');
+    }
+  }, [onChange, parseValue, value, formatValue]);
+  // Handle keyboard navigation
+  var handleKeyDown = useCallback(function (e) {
+    if (e.key === 'ArrowUp') {
+      e.preventDefault();
+      handleIncrement();
+    } else if (e.key === 'ArrowDown') {
+      e.preventDefault();
+      handleDecrement();
+    }
+  }, [handleIncrement, handleDecrement]);
+  // Check if buttons should be disabled
+  var isIncrementDisabled = disabled || max !== undefined && value !== '' && typeof value === 'number' && value >= max;
+  var isDecrementDisabled = disabled || min !== undefined && value !== '' && typeof value === 'number' && value <= min;
+  // Build aria-describedby
+  var ariaDescribedByIds = [ariaDescribedBy, helperText ? helperId : null, error ? errorId : null].filter(Boolean).join(' ') || undefined;
+  return jsxs(StyledFieldContainer, {
+    children: [label && jsxs(StyledLabel, {
+      htmlFor: id,
+      "data-disabled": disabled,
+      children: [label, required && jsx(StyledRequiredIndicator, {
+        "aria-label": "required",
+        children: "*"
+      })]
+    }), jsxs(StyledInputWrapper, {
+      children: [jsx(StyledNumberInput, __assign({
+        ref: ref,
+        id: id,
+        type: "text",
+        inputMode: "decimal",
+        value: value !== undefined ? formatValue(value) : undefined,
+        defaultValue: defaultValue !== undefined ? formatValue(defaultValue) : undefined,
+        onChange: handleChange,
+        onKeyDown: handleKeyDown,
+        disabled: disabled,
+        required: required,
+        placeholder: placeholder,
+        "$hasError": !!error,
+        "$disabled": disabled,
+        "aria-label": ariaLabel || label,
+        "aria-invalid": !!error,
+        "aria-describedby": ariaDescribedByIds,
+        "aria-required": required,
+        "data-testid": testId,
+        role: "spinbutton",
+        "aria-valuemin": min,
+        "aria-valuemax": max,
+        "aria-valuenow": typeof value === 'number' ? value : undefined
+      }, rest)), jsxs(StyledStepperContainer, {
+        children: [jsx(IconButton, {
+          iconName: "caretUp",
+          variant: "secondary",
+          size: "small",
+          onClick: handleIncrement,
+          disabled: isIncrementDisabled,
+          "aria-label": "Increment value",
+          tabIndex: -1,
+          type: "button"
+        }), jsx(IconButton, {
+          iconName: "caretDown",
+          variant: "secondary",
+          size: "small",
+          onClick: handleDecrement,
+          disabled: isDecrementDisabled,
+          "aria-label": "Decrement value",
+          tabIndex: -1,
+          type: "button"
+        })]
+      })]
+    }), (helperText || error) && jsx(StyledHelperText, {
+      id: error ? errorId : helperId,
+      "$isError": !!error,
+      role: error ? 'alert' : undefined,
+      "aria-live": error ? 'polite' : undefined,
+      children: error || helperText
+    })]
+  });
+});
+NumberInput.displayName = 'NumberInput';
+var templateObject_1, templateObject_2, templateObject_3, templateObject_4, templateObject_5, templateObject_6, templateObject_7;
+
+export { NumberInput };
+//# sourceMappingURL=NumberInput.mjs.map

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

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

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

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

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

@@ -0,0 +1,21 @@
+import { FC } from 'react';
+interface PageTitleProps {
+    title: string;
+    hasBackButton?: boolean;
+    subtitle?: string;
+}
+/**
+ * @deprecated PageTitle is a leftover from the personal site (its back button always links to `/music`)
+ * and will be removed in the next major version. Compose a page title from `Typography` in a `Stack`:
+ *
+ * ```tsx
+ * <Stack direction="column" gap="md">
+ *   <Typography variant="h1">{title}</Typography>
+ *   <Typography variant="caption" color="subdued">{subtitle}</Typography>
+ * </Stack>
+ * ```
+ *
+ * For a back link, add an `IconButton` with your own `url` and `aria-label`.
+ */
+export declare const PageTitle: FC<PageTitleProps>;
+export {};