@atom-learning/components 6.5.4 → 6.5.5

package/dist/components/notification-badge/NotificationBadge.js

@@ -1,9 +1,9 @@
-import { styled as e } from "../../styled.js";
-import { Icon as t } from "../icon/Icon.js";
-import { Badge as n } from "../badge/Badge.js";
-import r from "react";
+import { styled } from "../../styled.js";
+import { Icon } from "../icon/Icon.js";
+import { Badge } from "../badge/Badge.js";
+import React from "react";
 //#region src/components/notification-badge/NotificationBadge.tsx
-var i = e(n, { base: [
+var StyledBadge = styled(Badge, { base: [
 	"font-body",
 	"text-sm",
 	"flex-row",
@@ -17,16 +17,17 @@ var i = e(n, { base: [
 	"h-6",
 	"min-w-6",
 	"text-center"
-] }), a = ({ value: e, emphasis: n = "bold", theme: a = "primary", icon: o, children: s }) => /* @__PURE__ */ r.createElement("div", { className: "relative" }, !!e && /* @__PURE__ */ r.createElement(i, {
+] });
+var NotificationBadge = ({ value, emphasis = "bold", theme = "primary", icon, children }) => /* @__PURE__ */ React.createElement("div", { className: "relative" }, !!value && /* @__PURE__ */ React.createElement(StyledBadge, {
 	role: "status",
-	emphasis: n,
-	theme: a
-}, o && /* @__PURE__ */ r.createElement(t, {
-	is: o,
+	emphasis,
+	theme
+}, icon && /* @__PURE__ */ React.createElement(Icon, {
+	is: icon,
 	role: "img",
 	"aria-hidden": "false"
-}), e), s);
+}), value), children);
 //#endregion
-export { a as NotificationBadge };
+export { NotificationBadge };
 
 //# sourceMappingURL=NotificationBadge.js.map

package/dist/components/notification-badge/NotificationBadge.js.map

@@ -1 +1 @@
-{"version":3,"file":"NotificationBadge.js","names":[],"sources":["../../../src/components/notification-badge/NotificationBadge.tsx"],"sourcesContent":["import React from 'react'\n\nimport { styled } from '~/styled'\n\nimport { Badge } from '../badge/Badge'\nimport { Icon } from '../icon/Icon'\n\nconst StyledBadge = styled(Badge, {\n  base: [\n    'font-body',\n    'text-sm',\n    'flex-row',\n    'justify-center',\n    'absolute',\n    'top-0',\n    'right-0',\n    'translate-x-3',\n    '-translate-y-1/2',\n    'rounded-full',\n    'h-6',\n    'min-w-6',\n    'text-center'\n  ]\n})\n\ntype BadgeProps = React.ComponentProps<typeof Badge>\n\ntype NotificationBadgeProps = {\n  value: number | string\n  emphasis?: BadgeProps['emphasis']\n  theme?: BadgeProps['theme']\n  icon?: React.FC<React.SVGProps<SVGSVGElement>>\n}\n\nexport const NotificationBadge = ({\n  value,\n  emphasis = 'bold',\n  theme = 'primary',\n  icon,\n  children\n}: React.PropsWithChildren<NotificationBadgeProps>) => (\n  <div className=\"relative\">\n    {!!value && (\n      <StyledBadge role=\"status\" emphasis={emphasis} theme={theme}>\n        {icon && <Icon is={icon} role=\"img\" aria-hidden=\"false\" />}\n        {value}\n      </StyledBadge>\n    )}\n    {children}\n  </div>\n)\n"],"mappings":";;;;;AAOA,IAAM,IAAc,EAAO,GAAO,EAChC,MAAM;CACJ;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACD,EACF,CAAC,EAWW,KAAqB,EAChC,UACA,cAAW,QACX,WAAQ,WACR,SACA,kBAEA,kBAAA,cAAC,OAAD,EAAK,WAAU,YAQT,EAPH,CAAC,CAAC,KACD,kBAAA,cAAC,GAAD;CAAa,MAAK;CAAmB;CAAiB;CAGxC,EAFX,KAAQ,kBAAA,cAAC,GAAD;CAAM,IAAI;CAAM,MAAK;CAAM,eAAY;CAAU,CAAA,EACzD,EACW,EAEf,EACG"}
+{"version":3,"file":"NotificationBadge.js","names":[],"sources":["../../../src/components/notification-badge/NotificationBadge.tsx"],"sourcesContent":["import React from 'react'\n\nimport { styled } from '~/styled'\n\nimport { Badge } from '../badge/Badge'\nimport { Icon } from '../icon/Icon'\n\nconst StyledBadge = styled(Badge, {\n  base: [\n    'font-body',\n    'text-sm',\n    'flex-row',\n    'justify-center',\n    'absolute',\n    'top-0',\n    'right-0',\n    'translate-x-3',\n    '-translate-y-1/2',\n    'rounded-full',\n    'h-6',\n    'min-w-6',\n    'text-center'\n  ]\n})\n\ntype BadgeProps = React.ComponentProps<typeof Badge>\n\ntype NotificationBadgeProps = {\n  value: number | string\n  emphasis?: BadgeProps['emphasis']\n  theme?: BadgeProps['theme']\n  icon?: React.FC<React.SVGProps<SVGSVGElement>>\n}\n\nexport const NotificationBadge = ({\n  value,\n  emphasis = 'bold',\n  theme = 'primary',\n  icon,\n  children\n}: React.PropsWithChildren<NotificationBadgeProps>) => (\n  <div className=\"relative\">\n    {!!value && (\n      <StyledBadge role=\"status\" emphasis={emphasis} theme={theme}>\n        {icon && <Icon is={icon} role=\"img\" aria-hidden=\"false\" />}\n        {value}\n      </StyledBadge>\n    )}\n    {children}\n  </div>\n)\n"],"mappings":";;;;;AAOA,IAAM,cAAc,OAAO,OAAO,EAChC,MAAM;CACJ;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACD,EACF,CAAC;AAWF,IAAa,qBAAqB,EAChC,OACA,WAAW,QACX,QAAQ,WACR,MACA,eAEA,sBAAA,cAAC,OAAD,EAAK,WAAU,YAQT,EAPH,CAAC,CAAC,SACD,sBAAA,cAAC,aAAD;CAAa,MAAK;CAAmB;CAAiB;CAGxC,EAFX,QAAQ,sBAAA,cAAC,MAAD;CAAM,IAAI;CAAM,MAAK;CAAM,eAAY;CAAU,CAAA,EACzD,MACW,EAEf,SACG"}

package/dist/components/number-input/NumberInput.js

@@ -1,12 +1,12 @@
-import { styled as e } from "../../styled.js";
-import { Input as t } from "../input/Input.js";
-import { getFieldIconSize as n } from "../../utilities/style/get-icon-size.js";
-import { NumberInputStepper as r } from "./NumberInputStepper.js";
-import i from "clsx";
-import * as a from "react";
-import { Minus as o, Plus as s } from "@atom-learning/icons";
+import { styled } from "../../styled.js";
+import { Input } from "../input/Input.js";
+import { getFieldIconSize } from "../../utilities/style/get-icon-size.js";
+import { NumberInputStepper } from "./NumberInputStepper.js";
+import clsx from "clsx";
+import * as React$1 from "react";
+import { Minus, Plus } from "@atom-learning/icons";
 //#region src/components/number-input/NumberInput.tsx
-var c = e("div", {
+var NumberInputContainer = styled("div", {
 	base: ["flex"],
 	variants: {
 		appearance: {
@@ -15,120 +15,151 @@ var c = e("div", {
 		},
 		emphasis: { bold: ["gap-0"] }
 	}
-}), l = a.forwardRef(({ value: e, defaultValue: l = 0, onValueChange: u, min: d = 0, max: f = 2 ** 53 - 1, step: p = 1, disabled: m = !1, readonly: h = !1, size: g = "md", stepperButtonLabels: _, disabledTooltipContent: v, className: y, appearance: b = "standard", emphasis: x, ...S }, C) => {
-	let [w, T] = a.useState(e || l);
-	a.useEffect(() => {
-		e !== void 0 && T(e);
-	}, [e]);
-	let E = a.useRef(null);
-	a.useImperativeHandle(C, () => E.current);
-	let D = a.useMemo(() => n(g), [g]), O = {
+});
+var NumberInput = React$1.forwardRef(({ value, defaultValue = 0, onValueChange, min = 0, max = Number.MAX_SAFE_INTEGER, step = 1, disabled: isDisabled = false, readonly: isReadOnly = false, size = "md", stepperButtonLabels: stepperButtonLabelsProp, disabledTooltipContent: disabledTooltipContentProp, className, appearance = "standard", emphasis, ...rest }, ref) => {
+	const [internalValue, setInternalValue] = React$1.useState(value || defaultValue);
+	React$1.useEffect(() => {
+		if (typeof value !== "undefined") setInternalValue(value);
+	}, [value]);
+	const inputRef = React$1.useRef(null);
+	React$1.useImperativeHandle(ref, () => inputRef.current);
+	const iconSize = React$1.useMemo(() => getFieldIconSize(size), [size]);
+	const stepperButtonLabels = {
 		increment: "increment",
 		decrement: "decrement",
-		..._
-	}, k = {
-		decrement: `Cannot enter values below ${d}`,
-		increment: `Cannot enter values above ${f}`,
-		...v
-	}, A = w >= f, j = w <= d, M = a.useCallback((e) => Math.min(Math.max(e, d), f), [f, d]), N = a.useCallback((e) => {
-		u?.(e), T(e);
-	}, [u]), P = a.useCallback((e) => {
-		N(Number(e.target.value.replace(/\D/g, "")));
-	}, [N]), F = a.useCallback(() => {
-		A || h || (E?.current?.focus(), N(M(Number(w) + p)));
+		...stepperButtonLabelsProp
+	};
+	const disabledTooltipContent = {
+		decrement: `Cannot enter values below ${min}`,
+		increment: `Cannot enter values above ${max}`,
+		...disabledTooltipContentProp
+	};
+	const isAtMax = internalValue >= max;
+	const isAtMin = internalValue <= min;
+	const clamp = React$1.useCallback((internalValue) => Math.min(Math.max(internalValue, min), max), [max, min]);
+	const updateValue = React$1.useCallback((newValue) => {
+		onValueChange?.(newValue);
+		setInternalValue(newValue);
+	}, [onValueChange]);
+	const onInputChange = React$1.useCallback((event) => {
+		updateValue(Number(event.target.value.replace(/\D/g, "")));
+	}, [updateValue]);
+	const increment = React$1.useCallback(() => {
+		if (isAtMax || isReadOnly) return;
+		inputRef?.current?.focus();
+		updateValue(clamp(Number(internalValue) + step));
 	}, [
-		M,
-		A,
-		h,
-		p,
-		N,
-		w
-	]), I = a.useCallback(() => {
-		j || h || (E?.current?.focus(), N(M(Number(w) - p)));
+		clamp,
+		isAtMax,
+		isReadOnly,
+		step,
+		updateValue,
+		internalValue
+	]);
+	const decrement = React$1.useCallback(() => {
+		if (isAtMin || isReadOnly) return;
+		inputRef?.current?.focus();
+		updateValue(clamp(Number(internalValue) - step));
 	}, [
-		M,
-		j,
-		h,
-		d,
-		p,
-		N,
-		w
-	]), L = a.useCallback((e) => {
-		if (e.nativeEvent.isComposing) return;
-		let t = e.key, n = {
-			ArrowUp: F,
-			ArrowRight: F,
-			ArrowDown: I,
-			ArrowLeft: I,
-			Home: () => N(d),
-			End: () => N(f)
-		}[t];
-		n && (e.preventDefault(), n(e));
+		clamp,
+		isAtMin,
+		isReadOnly,
+		min,
+		step,
+		updateValue,
+		internalValue
+	]);
+	const onKeyDown = React$1.useCallback((event) => {
+		if (event.nativeEvent.isComposing) return;
+		/**
+		* Keyboard Accessibility
+		*
+		* We want to increase or decrease the input's value
+		* based on if the user the arrow keys.
+		*
+		* @see https://www.w3.org/TR/wai-aria-practices-1.1/#keyboard-interaction-17
+		*/
+		const eventKey = event.key;
+		const action = {
+			ArrowUp: increment,
+			ArrowRight: increment,
+			ArrowDown: decrement,
+			ArrowLeft: decrement,
+			Home: () => updateValue(min),
+			End: () => updateValue(max)
+		}[eventKey];
+		if (action) {
+			event.preventDefault();
+			action(event);
+		}
 	}, [
-		F,
-		I,
-		N,
-		d,
-		f
-	]), R = w < d || w > f, { state: z, "aria-invalid": B, ...V } = S, H = {
+		increment,
+		decrement,
+		updateValue,
+		min,
+		max
+	]);
+	const hasError = internalValue < min || internalValue > max;
+	const { state: externalState, "aria-invalid": externalAriaInvalid, ...restProps } = rest;
+	const inputProps = {
 		type: "number",
-		value: w,
-		...V,
-		onChange: P,
-		onKeyDown: L,
-		size: g,
-		appearance: b,
-		state: z || (R ? "error" : void 0),
-		"aria-invalid": B || R || void 0,
-		className: i("rounded-none", "w-16", "[&_>_input]:text-center", "disabled:opacity-30", "disabled:pointer-events-none", x === "bold" && [
+		value: internalValue,
+		...restProps,
+		onChange: onInputChange,
+		onKeyDown,
+		size,
+		appearance,
+		state: externalState || (hasError ? "error" : void 0),
+		"aria-invalid": externalAriaInvalid || hasError || void 0,
+		className: clsx("rounded-none", "w-16", "[&_>_input]:text-center", "disabled:opacity-30", "disabled:pointer-events-none", emphasis === "bold" && [
 			"rounded-1",
 			"[&_>_input[aria-invalid=true]]:text-danger",
 			"focus-within:[&_>_input]:text-grey-1000"
-		], x === "bold" && b === "standard" && [
+		], emphasis === "bold" && appearance === "standard" && [
 			"border-none",
 			"[&:has([aria-invalid=true])]:border-2",
 			"[&:has([aria-invalid=true])]:border-danger",
 			"focus-within:border-2",
 			"focus-within:border-blue-800"
 		]),
-		ref: E,
-		readOnly: h,
-		disabled: m,
-		"aria-valuemin": d,
-		"aria-valuemax": f,
-		"aria-valuenow": w,
+		ref: inputRef,
+		readOnly: isReadOnly,
+		disabled: isDisabled,
+		"aria-valuemin": min,
+		"aria-valuemax": max,
+		"aria-valuenow": internalValue,
 		role: "spinbutton"
 	};
-	return /* @__PURE__ */ a.createElement(c, {
-		appearance: b,
-		emphasis: x,
-		className: y
-	}, /* @__PURE__ */ a.createElement(r, {
-		onClick: I,
-		icon: o,
-		className: i(x !== "bold" && "border-r-none rounded-r-none"),
-		size: D,
-		fieldAppearance: b,
-		emphasis: x,
-		disabled: j || m,
-		showTooltip: j && !m,
-		disabledTooltipContent: k.decrement,
-		label: O.decrement
-	}), /* @__PURE__ */ a.createElement(t, H), /* @__PURE__ */ a.createElement(r, {
-		onClick: F,
-		icon: s,
-		className: i(x !== "bold" && "border-l-none rounded-l-none"),
-		size: D,
-		fieldAppearance: b,
-		emphasis: x,
-		disabled: A || m,
-		showTooltip: A && !m,
-		disabledTooltipContent: k.increment,
-		label: O.increment
+	return /* @__PURE__ */ React$1.createElement(NumberInputContainer, {
+		appearance,
+		emphasis,
+		className
+	}, /* @__PURE__ */ React$1.createElement(NumberInputStepper, {
+		onClick: decrement,
+		icon: Minus,
+		className: clsx(emphasis !== "bold" && "border-r-none rounded-r-none"),
+		size: iconSize,
+		fieldAppearance: appearance,
+		emphasis,
+		disabled: isAtMin || isDisabled,
+		showTooltip: isAtMin && !isDisabled,
+		disabledTooltipContent: disabledTooltipContent.decrement,
+		label: stepperButtonLabels.decrement
+	}), /* @__PURE__ */ React$1.createElement(Input, inputProps), /* @__PURE__ */ React$1.createElement(NumberInputStepper, {
+		onClick: increment,
+		icon: Plus,
+		className: clsx(emphasis !== "bold" && "border-l-none rounded-l-none"),
+		size: iconSize,
+		fieldAppearance: appearance,
+		emphasis,
+		disabled: isAtMax || isDisabled,
+		showTooltip: isAtMax && !isDisabled,
+		disabledTooltipContent: disabledTooltipContent.increment,
+		label: stepperButtonLabels.increment
 	}));
 });
-l.displayName = "NumberInput";
+NumberInput.displayName = "NumberInput";
 //#endregion
-export { l as NumberInput };
+export { NumberInput };
 
 //# sourceMappingURL=NumberInput.js.map

package/dist/components/number-input/NumberInput.js.map

@@ -1 +1 @@
-{"version":3,"file":"NumberInput.js","names":[],"sources":["../../../src/components/number-input/NumberInput.tsx"],"sourcesContent":["import { Minus, Plus } from '@atom-learning/icons'\nimport clsx from 'clsx'\nimport * as React from 'react'\n\nimport { styled } from '~/styled'\nimport { getFieldIconSize } from '~/utilities/style/get-icon-size'\n\nimport { Input } from '../input/Input'\nimport { NumberInputStepper } from './NumberInputStepper'\n\nexport interface NumberInputProps {\n  name: string\n  min?: number\n  max?: number\n  step?: number\n  value?: number\n  defaultValue?: number\n  disabled?: boolean\n  readonly?: boolean\n  size?: 'sm' | 'md' | 'lg'\n  appearance?: 'standard' | 'modern'\n  emphasis?: 'bold'\n  onValueChange?: (value: number) => void\n  stepperButtonLabels?: { increment?: string; decrement?: string }\n  disabledTooltipContent?: { increment?: string; decrement?: string }\n  className?: string\n}\n\nconst NumberInputContainer = styled('div', {\n  base: ['flex'],\n  variants: {\n    appearance: {\n      standard: [],\n      modern: ['gap-px']\n    },\n    emphasis: {\n      bold: ['gap-0']\n    }\n  }\n})\n\nexport const NumberInput = React.forwardRef<HTMLInputElement, NumberInputProps>(\n  (\n    {\n      value,\n      defaultValue = 0,\n      onValueChange,\n      min = 0,\n      max = Number.MAX_SAFE_INTEGER,\n      step = 1,\n      disabled: isDisabled = false,\n      readonly: isReadOnly = false,\n      size = 'md',\n      stepperButtonLabels: stepperButtonLabelsProp,\n      disabledTooltipContent: disabledTooltipContentProp,\n      className,\n      appearance = 'standard',\n      emphasis,\n      ...rest\n    },\n    ref\n  ): JSX.Element => {\n    const [internalValue, setInternalValue] = React.useState<number>(\n      value || defaultValue\n    )\n    React.useEffect(() => {\n      // Update the internal value to match what is passed in.\n      if (typeof value !== 'undefined') setInternalValue(value)\n    }, [value])\n\n    const inputRef = React.useRef<HTMLInputElement | null>(null)\n\n    React.useImperativeHandle(ref, () => inputRef.current as HTMLInputElement)\n\n    const iconSize = React.useMemo(() => getFieldIconSize(size), [size])\n\n    const stepperButtonLabels = {\n      increment: 'increment',\n      decrement: 'decrement',\n      ...stepperButtonLabelsProp\n    }\n\n    const disabledTooltipContent = {\n      decrement: `Cannot enter values below ${min}`,\n      increment: `Cannot enter values above ${max}`,\n      ...disabledTooltipContentProp\n    }\n\n    const isAtMax = internalValue >= max\n    const isAtMin = internalValue <= min\n\n    const clamp = React.useCallback(\n      (internalValue: number) => Math.min(Math.max(internalValue, min), max),\n      [max, min]\n    )\n\n    const updateValue = React.useCallback(\n      (newValue: number) => {\n        onValueChange?.(newValue)\n        setInternalValue(newValue)\n      },\n      [onValueChange]\n    )\n\n    const onInputChange = React.useCallback(\n      (event: React.ChangeEvent<HTMLInputElement>) => {\n        const parsedValue = Number(event.target.value.replace(/\\D/g, ''))\n        updateValue(parsedValue)\n      },\n      [updateValue]\n    )\n\n    const increment = React.useCallback(() => {\n      if (isAtMax || isReadOnly) return\n      inputRef?.current?.focus()\n      const newValue = Number(internalValue) + step\n      updateValue(clamp(newValue))\n    }, [clamp, isAtMax, isReadOnly, step, updateValue, internalValue])\n\n    const decrement = React.useCallback(() => {\n      if (isAtMin || isReadOnly) return\n      inputRef?.current?.focus()\n      const newValue = Number(internalValue) - step\n      updateValue(clamp(newValue))\n    }, [clamp, isAtMin, isReadOnly, min, step, updateValue, internalValue])\n\n    const onKeyDown = React.useCallback(\n      (event: React.KeyboardEvent) => {\n        if (event.nativeEvent.isComposing) return\n\n        /**\n         * Keyboard Accessibility\n         *\n         * We want to increase or decrease the input's value\n         * based on if the user the arrow keys.\n         *\n         * @see https://www.w3.org/TR/wai-aria-practices-1.1/#keyboard-interaction-17\n         */\n        const eventKey = event.key\n\n        const keyMap: Record<string, React.KeyboardEventHandler> = {\n          ArrowUp: increment,\n          ArrowRight: increment,\n          ArrowDown: decrement,\n          ArrowLeft: decrement,\n          Home: () => updateValue(min),\n          End: () => updateValue(max)\n        }\n\n        const action = keyMap[eventKey]\n\n        if (action) {\n          event.preventDefault()\n          action(event)\n        }\n      },\n      [increment, decrement, updateValue, min, max]\n    )\n\n    const hasError = internalValue < min || internalValue > max\n    const {\n      state: externalState,\n      'aria-invalid': externalAriaInvalid,\n      ...restProps\n    } = rest as { state?: 'error'; 'aria-invalid'?: boolean } & typeof rest\n\n    const inputProps: React.ComponentProps<typeof Input> = {\n      type: 'number',\n      value: internalValue,\n      ...restProps,\n      onChange: onInputChange,\n      onKeyDown,\n      size,\n      appearance,\n      state: externalState || (hasError ? 'error' : undefined),\n      'aria-invalid': externalAriaInvalid || hasError || undefined,\n      className: clsx(\n        'rounded-none',\n        'w-16',\n        '[&_>_input]:text-center',\n        'disabled:opacity-30',\n        'disabled:pointer-events-none',\n        emphasis === 'bold' && [\n          'rounded-1',\n          '[&_>_input[aria-invalid=true]]:text-danger',\n          'focus-within:[&_>_input]:text-grey-1000'\n        ],\n        emphasis === 'bold' &&\n          appearance === 'standard' && [\n            'border-none',\n            '[&:has([aria-invalid=true])]:border-2',\n            '[&:has([aria-invalid=true])]:border-danger',\n            'focus-within:border-2',\n            'focus-within:border-blue-800'\n          ]\n      ),\n      ref: inputRef,\n      readOnly: isReadOnly,\n      disabled: isDisabled,\n      'aria-valuemin': min,\n      'aria-valuemax': max,\n      'aria-valuenow': internalValue,\n      role: 'spinbutton'\n    }\n\n    return (\n      <NumberInputContainer\n        appearance={appearance}\n        emphasis={emphasis}\n        className={className}\n      >\n        <NumberInputStepper\n          onClick={decrement}\n          icon={Minus}\n          className={clsx(\n            emphasis !== 'bold' && 'border-r-none rounded-r-none'\n          )}\n          size={iconSize}\n          fieldAppearance={appearance}\n          emphasis={emphasis}\n          disabled={isAtMin || isDisabled}\n          showTooltip={isAtMin && !isDisabled}\n          disabledTooltipContent={disabledTooltipContent.decrement}\n          label={stepperButtonLabels.decrement}\n        />\n        <Input {...inputProps} />\n        <NumberInputStepper\n          onClick={increment}\n          icon={Plus}\n          className={clsx(\n            emphasis !== 'bold' && 'border-l-none rounded-l-none'\n          )}\n          size={iconSize}\n          fieldAppearance={appearance}\n          emphasis={emphasis}\n          disabled={isAtMax || isDisabled}\n          showTooltip={isAtMax && !isDisabled}\n          disabledTooltipContent={disabledTooltipContent.increment}\n          label={stepperButtonLabels.increment}\n        />\n      </NumberInputContainer>\n    )\n  }\n)\n\nNumberInput.displayName = 'NumberInput'\n"],"mappings":"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"}
+{"version":3,"file":"NumberInput.js","names":[],"sources":["../../../src/components/number-input/NumberInput.tsx"],"sourcesContent":["import { Minus, Plus } from '@atom-learning/icons'\nimport clsx from 'clsx'\nimport * as React from 'react'\n\nimport { styled } from '~/styled'\nimport { getFieldIconSize } from '~/utilities/style/get-icon-size'\n\nimport { Input } from '../input/Input'\nimport { NumberInputStepper } from './NumberInputStepper'\n\nexport interface NumberInputProps {\n  name: string\n  min?: number\n  max?: number\n  step?: number\n  value?: number\n  defaultValue?: number\n  disabled?: boolean\n  readonly?: boolean\n  size?: 'sm' | 'md' | 'lg'\n  appearance?: 'standard' | 'modern'\n  emphasis?: 'bold'\n  onValueChange?: (value: number) => void\n  stepperButtonLabels?: { increment?: string; decrement?: string }\n  disabledTooltipContent?: { increment?: string; decrement?: string }\n  className?: string\n}\n\nconst NumberInputContainer = styled('div', {\n  base: ['flex'],\n  variants: {\n    appearance: {\n      standard: [],\n      modern: ['gap-px']\n    },\n    emphasis: {\n      bold: ['gap-0']\n    }\n  }\n})\n\nexport const NumberInput = React.forwardRef<HTMLInputElement, NumberInputProps>(\n  (\n    {\n      value,\n      defaultValue = 0,\n      onValueChange,\n      min = 0,\n      max = Number.MAX_SAFE_INTEGER,\n      step = 1,\n      disabled: isDisabled = false,\n      readonly: isReadOnly = false,\n      size = 'md',\n      stepperButtonLabels: stepperButtonLabelsProp,\n      disabledTooltipContent: disabledTooltipContentProp,\n      className,\n      appearance = 'standard',\n      emphasis,\n      ...rest\n    },\n    ref\n  ): JSX.Element => {\n    const [internalValue, setInternalValue] = React.useState<number>(\n      value || defaultValue\n    )\n    React.useEffect(() => {\n      // Update the internal value to match what is passed in.\n      if (typeof value !== 'undefined') setInternalValue(value)\n    }, [value])\n\n    const inputRef = React.useRef<HTMLInputElement | null>(null)\n\n    React.useImperativeHandle(ref, () => inputRef.current as HTMLInputElement)\n\n    const iconSize = React.useMemo(() => getFieldIconSize(size), [size])\n\n    const stepperButtonLabels = {\n      increment: 'increment',\n      decrement: 'decrement',\n      ...stepperButtonLabelsProp\n    }\n\n    const disabledTooltipContent = {\n      decrement: `Cannot enter values below ${min}`,\n      increment: `Cannot enter values above ${max}`,\n      ...disabledTooltipContentProp\n    }\n\n    const isAtMax = internalValue >= max\n    const isAtMin = internalValue <= min\n\n    const clamp = React.useCallback(\n      (internalValue: number) => Math.min(Math.max(internalValue, min), max),\n      [max, min]\n    )\n\n    const updateValue = React.useCallback(\n      (newValue: number) => {\n        onValueChange?.(newValue)\n        setInternalValue(newValue)\n      },\n      [onValueChange]\n    )\n\n    const onInputChange = React.useCallback(\n      (event: React.ChangeEvent<HTMLInputElement>) => {\n        const parsedValue = Number(event.target.value.replace(/\\D/g, ''))\n        updateValue(parsedValue)\n      },\n      [updateValue]\n    )\n\n    const increment = React.useCallback(() => {\n      if (isAtMax || isReadOnly) return\n      inputRef?.current?.focus()\n      const newValue = Number(internalValue) + step\n      updateValue(clamp(newValue))\n    }, [clamp, isAtMax, isReadOnly, step, updateValue, internalValue])\n\n    const decrement = React.useCallback(() => {\n      if (isAtMin || isReadOnly) return\n      inputRef?.current?.focus()\n      const newValue = Number(internalValue) - step\n      updateValue(clamp(newValue))\n    }, [clamp, isAtMin, isReadOnly, min, step, updateValue, internalValue])\n\n    const onKeyDown = React.useCallback(\n      (event: React.KeyboardEvent) => {\n        if (event.nativeEvent.isComposing) return\n\n        /**\n         * Keyboard Accessibility\n         *\n         * We want to increase or decrease the input's value\n         * based on if the user the arrow keys.\n         *\n         * @see https://www.w3.org/TR/wai-aria-practices-1.1/#keyboard-interaction-17\n         */\n        const eventKey = event.key\n\n        const keyMap: Record<string, React.KeyboardEventHandler> = {\n          ArrowUp: increment,\n          ArrowRight: increment,\n          ArrowDown: decrement,\n          ArrowLeft: decrement,\n          Home: () => updateValue(min),\n          End: () => updateValue(max)\n        }\n\n        const action = keyMap[eventKey]\n\n        if (action) {\n          event.preventDefault()\n          action(event)\n        }\n      },\n      [increment, decrement, updateValue, min, max]\n    )\n\n    const hasError = internalValue < min || internalValue > max\n    const {\n      state: externalState,\n      'aria-invalid': externalAriaInvalid,\n      ...restProps\n    } = rest as { state?: 'error'; 'aria-invalid'?: boolean } & typeof rest\n\n    const inputProps: React.ComponentProps<typeof Input> = {\n      type: 'number',\n      value: internalValue,\n      ...restProps,\n      onChange: onInputChange,\n      onKeyDown,\n      size,\n      appearance,\n      state: externalState || (hasError ? 'error' : undefined),\n      'aria-invalid': externalAriaInvalid || hasError || undefined,\n      className: clsx(\n        'rounded-none',\n        'w-16',\n        '[&_>_input]:text-center',\n        'disabled:opacity-30',\n        'disabled:pointer-events-none',\n        emphasis === 'bold' && [\n          'rounded-1',\n          '[&_>_input[aria-invalid=true]]:text-danger',\n          'focus-within:[&_>_input]:text-grey-1000'\n        ],\n        emphasis === 'bold' &&\n          appearance === 'standard' && [\n            'border-none',\n            '[&:has([aria-invalid=true])]:border-2',\n            '[&:has([aria-invalid=true])]:border-danger',\n            'focus-within:border-2',\n            'focus-within:border-blue-800'\n          ]\n      ),\n      ref: inputRef,\n      readOnly: isReadOnly,\n      disabled: isDisabled,\n      'aria-valuemin': min,\n      'aria-valuemax': max,\n      'aria-valuenow': internalValue,\n      role: 'spinbutton'\n    }\n\n    return (\n      <NumberInputContainer\n        appearance={appearance}\n        emphasis={emphasis}\n        className={className}\n      >\n        <NumberInputStepper\n          onClick={decrement}\n          icon={Minus}\n          className={clsx(\n            emphasis !== 'bold' && 'border-r-none rounded-r-none'\n          )}\n          size={iconSize}\n          fieldAppearance={appearance}\n          emphasis={emphasis}\n          disabled={isAtMin || isDisabled}\n          showTooltip={isAtMin && !isDisabled}\n          disabledTooltipContent={disabledTooltipContent.decrement}\n          label={stepperButtonLabels.decrement}\n        />\n        <Input {...inputProps} />\n        <NumberInputStepper\n          onClick={increment}\n          icon={Plus}\n          className={clsx(\n            emphasis !== 'bold' && 'border-l-none rounded-l-none'\n          )}\n          size={iconSize}\n          fieldAppearance={appearance}\n          emphasis={emphasis}\n          disabled={isAtMax || isDisabled}\n          showTooltip={isAtMax && !isDisabled}\n          disabledTooltipContent={disabledTooltipContent.increment}\n          label={stepperButtonLabels.increment}\n        />\n      </NumberInputContainer>\n    )\n  }\n)\n\nNumberInput.displayName = 'NumberInput'\n"],"mappings":";;;;;;;;AA4BA,IAAM,uBAAuB,OAAO,OAAO;CACzC,MAAM,CAAC,OAAO;CACd,UAAU;EACR,YAAY;GACV,UAAU,EAAE;GACZ,QAAQ,CAAC,SAAS;GACnB;EACD,UAAU,EACR,MAAM,CAAC,QAAQ,EAChB;EACF;CACF,CAAC;AAEF,IAAa,cAAc,QAAM,YAE7B,EACE,OACA,eAAe,GACf,eACA,MAAM,GACN,MAAM,OAAO,kBACb,OAAO,GACP,UAAU,aAAa,OACvB,UAAU,aAAa,OACvB,OAAO,MACP,qBAAqB,yBACrB,wBAAwB,4BACxB,WACA,aAAa,YACb,UACA,GAAG,QAEL,QACgB;CAChB,MAAM,CAAC,eAAe,oBAAoB,QAAM,SAC9C,SAAS,aACV;AACD,SAAM,gBAAgB;AAEpB,MAAI,OAAO,UAAU,YAAa,kBAAiB,MAAM;IACxD,CAAC,MAAM,CAAC;CAEX,MAAM,WAAW,QAAM,OAAgC,KAAK;AAE5D,SAAM,oBAAoB,WAAW,SAAS,QAA4B;CAE1E,MAAM,WAAW,QAAM,cAAc,iBAAiB,KAAK,EAAE,CAAC,KAAK,CAAC;CAEpE,MAAM,sBAAsB;EAC1B,WAAW;EACX,WAAW;EACX,GAAG;EACJ;CAED,MAAM,yBAAyB;EAC7B,WAAW,6BAA6B;EACxC,WAAW,6BAA6B;EACxC,GAAG;EACJ;CAED,MAAM,UAAU,iBAAiB;CACjC,MAAM,UAAU,iBAAiB;CAEjC,MAAM,QAAQ,QAAM,aACjB,kBAA0B,KAAK,IAAI,KAAK,IAAI,eAAe,IAAI,EAAE,IAAI,EACtE,CAAC,KAAK,IAAI,CACX;CAED,MAAM,cAAc,QAAM,aACvB,aAAqB;AACpB,kBAAgB,SAAS;AACzB,mBAAiB,SAAS;IAE5B,CAAC,cAAc,CAChB;CAED,MAAM,gBAAgB,QAAM,aACzB,UAA+C;AAE9C,cADoB,OAAO,MAAM,OAAO,MAAM,QAAQ,OAAO,GAAG,CAAC,CACzC;IAE1B,CAAC,YAAY,CACd;CAED,MAAM,YAAY,QAAM,kBAAkB;AACxC,MAAI,WAAW,WAAY;AAC3B,YAAU,SAAS,OAAO;AAE1B,cAAY,MADK,OAAO,cAAc,GAAG,KACd,CAAC;IAC3B;EAAC;EAAO;EAAS;EAAY;EAAM;EAAa;EAAc,CAAC;CAElE,MAAM,YAAY,QAAM,kBAAkB;AACxC,MAAI,WAAW,WAAY;AAC3B,YAAU,SAAS,OAAO;AAE1B,cAAY,MADK,OAAO,cAAc,GAAG,KACd,CAAC;IAC3B;EAAC;EAAO;EAAS;EAAY;EAAK;EAAM;EAAa;EAAc,CAAC;CAEvE,MAAM,YAAY,QAAM,aACrB,UAA+B;AAC9B,MAAI,MAAM,YAAY,YAAa;;;;;;;;;EAUnC,MAAM,WAAW,MAAM;EAWvB,MAAM,SATqD;GACzD,SAAS;GACT,YAAY;GACZ,WAAW;GACX,WAAW;GACX,YAAY,YAAY,IAAI;GAC5B,WAAW,YAAY,IAAI;GAC5B,CAEqB;AAEtB,MAAI,QAAQ;AACV,SAAM,gBAAgB;AACtB,UAAO,MAAM;;IAGjB;EAAC;EAAW;EAAW;EAAa;EAAK;EAAI,CAC9C;CAED,MAAM,WAAW,gBAAgB,OAAO,gBAAgB;CACxD,MAAM,EACJ,OAAO,eACP,gBAAgB,qBAChB,GAAG,cACD;CAEJ,MAAM,aAAiD;EACrD,MAAM;EACN,OAAO;EACP,GAAG;EACH,UAAU;EACV;EACA;EACA;EACA,OAAO,kBAAkB,WAAW,UAAU,KAAA;EAC9C,gBAAgB,uBAAuB,YAAY,KAAA;EACnD,WAAW,KACT,gBACA,QACA,2BACA,uBACA,gCACA,aAAa,UAAU;GACrB;GACA;GACA;GACD,EACD,aAAa,UACX,eAAe,cAAc;GAC3B;GACA;GACA;GACA;GACA;GACD,CACJ;EACD,KAAK;EACL,UAAU;EACV,UAAU;EACV,iBAAiB;EACjB,iBAAiB;EACjB,iBAAiB;EACjB,MAAM;EACP;AAED,QACE,wBAAA,cAAC,sBAAD;EACc;EACF;EACC;EA+BU,EA7BrB,wBAAA,cAAC,oBAAD;EACE,SAAS;EACT,MAAM;EACN,WAAW,KACT,aAAa,UAAU,+BACxB;EACD,MAAM;EACN,iBAAiB;EACP;EACV,UAAU,WAAW;EACrB,aAAa,WAAW,CAAC;EACzB,wBAAwB,uBAAuB;EAC/C,OAAO,oBAAoB;EAC3B,CAAA,EACF,wBAAA,cAAC,OAAU,WAAc,EACzB,wBAAA,cAAC,oBAAD;EACE,SAAS;EACT,MAAM;EACN,WAAW,KACT,aAAa,UAAU,+BACxB;EACD,MAAM;EACN,iBAAiB;EACP;EACV,UAAU,WAAW;EACrB,aAAa,WAAW,CAAC;EACzB,wBAAwB,uBAAuB;EAC/C,OAAO,oBAAoB;EAC3B,CAAA,CACmB;EAG5B;AAED,YAAY,cAAc"}

package/dist/components/number-input/NumberInputStepper.js

@@ -1,10 +1,10 @@
-import { styled as e } from "../../styled.js";
-import { Icon as t } from "../icon/Icon.js";
-import { Tooltip as n } from "../tooltip/Tooltip.js";
-import { ActionIcon as r } from "../action-icon/ActionIcon.js";
-import * as i from "react";
+import { styled } from "../../styled.js";
+import { Icon } from "../icon/Icon.js";
+import { Tooltip } from "../tooltip/Tooltip.js";
+import { ActionIcon } from "../action-icon/ActionIcon.js";
+import * as React$1 from "react";
 //#region src/components/number-input/NumberInputStepper.tsx
-var a = e(r, {
+var StyledStepperButton = styled(ActionIcon, {
 	base: [
 		"rounded-md",
 		"z-1",
@@ -43,21 +43,27 @@ var a = e(r, {
 		emphasis: "bold",
 		class: ["bg-white!", "hover:bg-primary-100!"]
 	}]
-}), o = i.forwardRef((e, r) => {
-	let { icon: o, disabledTooltipContent: s, showTooltip: c, fieldAppearance: l = "standard", ...u } = e;
-	return /* @__PURE__ */ i.createElement(n, null, /* @__PURE__ */ i.createElement(n.Trigger, { asChild: !0 }, /* @__PURE__ */ i.createElement("span", {
+});
+var NumberInputStepper = React$1.forwardRef((props, forwardedRef) => {
+	const { icon, disabledTooltipContent, showTooltip, fieldAppearance = "standard", ...rest } = props;
+	/**
+	* Focus has been removed from the button
+	* as the increment and decrement buttons should be keyboard accessible via arrow keys.
+	* see MDN docs https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Roles/spinbutton_role
+	*/
+	return /* @__PURE__ */ React$1.createElement(Tooltip, null, /* @__PURE__ */ React$1.createElement(Tooltip.Trigger, { asChild: true }, /* @__PURE__ */ React$1.createElement("span", {
 		className: "z-1",
 		tabIndex: -1
-	}, /* @__PURE__ */ i.createElement(a, {
-		hasTooltip: !1,
+	}, /* @__PURE__ */ React$1.createElement(StyledStepperButton, {
+		hasTooltip: false,
 		tabIndex: -1,
 		appearance: "outline",
-		fieldAppearance: l,
-		ref: r,
-		...u
-	}, /* @__PURE__ */ i.createElement(t, { is: o })))), c && /* @__PURE__ */ i.createElement(n.Content, null, s));
+		fieldAppearance,
+		ref: forwardedRef,
+		...rest
+	}, /* @__PURE__ */ React$1.createElement(Icon, { is: icon })))), showTooltip && /* @__PURE__ */ React$1.createElement(Tooltip.Content, null, disabledTooltipContent));
 });
 //#endregion
-export { o as NumberInputStepper };
+export { NumberInputStepper };
 
 //# sourceMappingURL=NumberInputStepper.js.map

package/dist/components/number-input/NumberInputStepper.js.map

@@ -1 +1 @@
-{"version":3,"file":"NumberInputStepper.js","names":[],"sources":["../../../src/components/number-input/NumberInputStepper.tsx"],"sourcesContent":["import * as React from 'react'\n\nimport { styled } from '~/styled'\n\nimport { ActionIcon } from '../action-icon/ActionIcon'\nimport { Icon } from '../icon/Icon'\nimport { Tooltip } from '../tooltip/Tooltip'\n\nconst StyledStepperButton = styled(ActionIcon, {\n  base: [\n    'rounded-md',\n    'z-1',\n    'h-full!',\n    'hover:[&_svg]:text-grey-800',\n    'hover:bg-grey-100',\n    '[&_svg]:text-grey-700',\n    'active:[&_svg]:text-grey-900',\n    'active:bg-grey-200',\n    'disabled:opacity-30',\n    'disabled:pointer-events-none'\n  ],\n  variants: {\n    fieldAppearance: {\n      standard: ['bg-white', 'border-grey-800!'],\n      modern: ['bg-grey-100', 'border-grey-100!', 'hover:bg-grey-200!']\n    },\n    emphasis: {\n      bold: [\n        '[&_svg]:text-primary-700',\n        'hover:bg-primary-100!',\n        'hover:[&_svg]:text-primary-800!',\n        'active:bg-primary-200!',\n        'active:[&_svg]:text-primary-900!'\n      ]\n    }\n  },\n  compoundVariants: [\n    {\n      fieldAppearance: 'standard',\n      emphasis: 'bold',\n      class: ['bg-white', 'border-primary-800!']\n    },\n    {\n      fieldAppearance: 'modern',\n      emphasis: 'bold',\n      class: ['bg-white!', 'hover:bg-primary-100!']\n    }\n  ]\n})\n\ntype NumberInputStepperProps = Omit<\n  React.ComponentProps<typeof ActionIcon>,\n  'children'\n> &\n  Omit<React.ComponentProps<typeof StyledStepperButton>, 'children'> & {\n    icon: React.FC<React.SVGProps<SVGSVGElement>>\n    showTooltip?: boolean\n    disabledTooltipContent?: string\n  }\n\nexport const NumberInputStepper = React.forwardRef<\n  HTMLButtonElement,\n  NumberInputStepperProps\n>((props, forwardedRef) => {\n  const {\n    icon,\n    disabledTooltipContent,\n    showTooltip,\n    fieldAppearance = 'standard',\n    ...rest\n  } = props\n\n  /**\n   * Focus has been removed from the button\n   * as the increment and decrement buttons should be keyboard accessible via arrow keys.\n   * see MDN docs https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Roles/spinbutton_role\n   */\n  return (\n    <Tooltip>\n      <Tooltip.Trigger asChild>\n        <span className=\"z-1\" tabIndex={-1}>\n          <StyledStepperButton\n            hasTooltip={false}\n            tabIndex={-1}\n            appearance=\"outline\"\n            fieldAppearance={fieldAppearance}\n            ref={forwardedRef}\n            {...rest}\n          >\n            <Icon is={icon} />\n          </StyledStepperButton>\n        </span>\n      </Tooltip.Trigger>\n      {showTooltip && (\n        <Tooltip.Content>{disabledTooltipContent}</Tooltip.Content>\n      )}\n    </Tooltip>\n  )\n})\n"],"mappings":";;;;;;AAQA,IAAM,IAAsB,EAAO,GAAY;CAC7C,MAAM;EACJ;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACD;CACD,UAAU;EACR,iBAAiB;GACf,UAAU,CAAC,YAAY,mBAAmB;GAC1C,QAAQ;IAAC;IAAe;IAAoB;IAAqB;GAClE;EACD,UAAU,EACR,MAAM;GACJ;GACA;GACA;GACA;GACA;GACD,EACF;EACF;CACD,kBAAkB,CAChB;EACE,iBAAiB;EACjB,UAAU;EACV,OAAO,CAAC,YAAY,sBAAsB;EAC3C,EACD;EACE,iBAAiB;EACjB,UAAU;EACV,OAAO,CAAC,aAAa,wBAAwB;EAC9C,CACF;CACF,CAAC,EAYW,IAAqB,EAAM,YAGrC,GAAO,MAAiB;CACzB,IAAM,EACJ,SACA,2BACA,gBACA,qBAAkB,YAClB,GAAG,MACD;AAOJ,QACE,kBAAA,cAAC,GAAA,MACC,kBAAA,cAAC,EAAQ,SAAT,EAAiB,SAAA,IAaC,EAZhB,kBAAA,cAAC,QAAD;EAAM,WAAU;EAAM,UAAU;EAWzB,EAVL,kBAAA,cAAC,GAAD;EACE,YAAY;EACZ,UAAU;EACV,YAAW;EACM;EACjB,KAAK;EACL,GAAI;EAGgB,EADpB,kBAAA,cAAC,GAAD,EAAM,IAAI,GAAQ,CAAA,CACE,CACjB,CACS,EACjB,KACC,kBAAA,cAAC,EAAQ,SAAA,MAAS,EAAyC,CAErD;EAEZ"}
+{"version":3,"file":"NumberInputStepper.js","names":[],"sources":["../../../src/components/number-input/NumberInputStepper.tsx"],"sourcesContent":["import * as React from 'react'\n\nimport { styled } from '~/styled'\n\nimport { ActionIcon } from '../action-icon/ActionIcon'\nimport { Icon } from '../icon/Icon'\nimport { Tooltip } from '../tooltip/Tooltip'\n\nconst StyledStepperButton = styled(ActionIcon, {\n  base: [\n    'rounded-md',\n    'z-1',\n    'h-full!',\n    'hover:[&_svg]:text-grey-800',\n    'hover:bg-grey-100',\n    '[&_svg]:text-grey-700',\n    'active:[&_svg]:text-grey-900',\n    'active:bg-grey-200',\n    'disabled:opacity-30',\n    'disabled:pointer-events-none'\n  ],\n  variants: {\n    fieldAppearance: {\n      standard: ['bg-white', 'border-grey-800!'],\n      modern: ['bg-grey-100', 'border-grey-100!', 'hover:bg-grey-200!']\n    },\n    emphasis: {\n      bold: [\n        '[&_svg]:text-primary-700',\n        'hover:bg-primary-100!',\n        'hover:[&_svg]:text-primary-800!',\n        'active:bg-primary-200!',\n        'active:[&_svg]:text-primary-900!'\n      ]\n    }\n  },\n  compoundVariants: [\n    {\n      fieldAppearance: 'standard',\n      emphasis: 'bold',\n      class: ['bg-white', 'border-primary-800!']\n    },\n    {\n      fieldAppearance: 'modern',\n      emphasis: 'bold',\n      class: ['bg-white!', 'hover:bg-primary-100!']\n    }\n  ]\n})\n\ntype NumberInputStepperProps = Omit<\n  React.ComponentProps<typeof ActionIcon>,\n  'children'\n> &\n  Omit<React.ComponentProps<typeof StyledStepperButton>, 'children'> & {\n    icon: React.FC<React.SVGProps<SVGSVGElement>>\n    showTooltip?: boolean\n    disabledTooltipContent?: string\n  }\n\nexport const NumberInputStepper = React.forwardRef<\n  HTMLButtonElement,\n  NumberInputStepperProps\n>((props, forwardedRef) => {\n  const {\n    icon,\n    disabledTooltipContent,\n    showTooltip,\n    fieldAppearance = 'standard',\n    ...rest\n  } = props\n\n  /**\n   * Focus has been removed from the button\n   * as the increment and decrement buttons should be keyboard accessible via arrow keys.\n   * see MDN docs https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Roles/spinbutton_role\n   */\n  return (\n    <Tooltip>\n      <Tooltip.Trigger asChild>\n        <span className=\"z-1\" tabIndex={-1}>\n          <StyledStepperButton\n            hasTooltip={false}\n            tabIndex={-1}\n            appearance=\"outline\"\n            fieldAppearance={fieldAppearance}\n            ref={forwardedRef}\n            {...rest}\n          >\n            <Icon is={icon} />\n          </StyledStepperButton>\n        </span>\n      </Tooltip.Trigger>\n      {showTooltip && (\n        <Tooltip.Content>{disabledTooltipContent}</Tooltip.Content>\n      )}\n    </Tooltip>\n  )\n})\n"],"mappings":";;;;;;AAQA,IAAM,sBAAsB,OAAO,YAAY;CAC7C,MAAM;EACJ;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACD;CACD,UAAU;EACR,iBAAiB;GACf,UAAU,CAAC,YAAY,mBAAmB;GAC1C,QAAQ;IAAC;IAAe;IAAoB;IAAqB;GAClE;EACD,UAAU,EACR,MAAM;GACJ;GACA;GACA;GACA;GACA;GACD,EACF;EACF;CACD,kBAAkB,CAChB;EACE,iBAAiB;EACjB,UAAU;EACV,OAAO,CAAC,YAAY,sBAAsB;EAC3C,EACD;EACE,iBAAiB;EACjB,UAAU;EACV,OAAO,CAAC,aAAa,wBAAwB;EAC9C,CACF;CACF,CAAC;AAYF,IAAa,qBAAqB,QAAM,YAGrC,OAAO,iBAAiB;CACzB,MAAM,EACJ,MACA,wBACA,aACA,kBAAkB,YAClB,GAAG,SACD;;;;;;AAOJ,QACE,wBAAA,cAAC,SAAA,MACC,wBAAA,cAAC,QAAQ,SAAT,EAAiB,SAAA,MAaC,EAZhB,wBAAA,cAAC,QAAD;EAAM,WAAU;EAAM,UAAU;EAWzB,EAVL,wBAAA,cAAC,qBAAD;EACE,YAAY;EACZ,UAAU;EACV,YAAW;EACM;EACjB,KAAK;EACL,GAAI;EAGgB,EADpB,wBAAA,cAAC,MAAD,EAAM,IAAI,MAAQ,CAAA,CACE,CACjB,CACS,EACjB,eACC,wBAAA,cAAC,QAAQ,SAAA,MAAS,uBAAyC,CAErD;EAEZ"}

package/dist/components/number-input-field/NumberInputField.js

@@ -1,48 +1,54 @@
-import { useFieldError as e } from "../form/useFieldError.js";
-import { FieldWrapper as t } from "../field-wrapper/FieldWrapper.js";
-import { useFormCustomContext as n } from "../form/useFormCustomContext.js";
-import { NumberInput as r } from "../number-input/NumberInput.js";
-import * as i from "react";
-import { useController as a, useFormContext as o } from "react-hook-form";
+import { useFieldError } from "../form/useFieldError.js";
+import { FieldWrapper } from "../field-wrapper/FieldWrapper.js";
+import { useFormCustomContext } from "../form/useFormCustomContext.js";
+import { NumberInput } from "../number-input/NumberInput.js";
+import * as React$1 from "react";
+import { useController, useFormContext } from "react-hook-form";
 //#region src/components/number-input-field/NumberInputField.tsx
-var s = ({ className: s, defaultValue: c = 0, hideLabel: l, value: u, prompt: d, description: f, label: p, name: m, validation: h, onValueChange: g, appearance: _, ...v }) => {
-	let { control: y } = o(), b = n(), { field: { ref: x, onChange: S, value: C, name: w } } = a({
-		name: m,
-		control: y,
-		rules: h,
-		defaultValue: c
-	}), { error: T } = e(m), E = b?.appearance || _;
-	return i.useEffect(() => {
-		u !== void 0 && S(u);
-	}, [u]), /* @__PURE__ */ i.createElement(t, {
-		className: s,
-		description: f,
-		error: T,
-		fieldId: m,
-		hideLabel: l,
-		label: p,
-		prompt: d,
-		required: !!h?.required,
-		appearance: E
-	}, /* @__PURE__ */ i.createElement(r, {
-		id: m,
-		name: w,
-		ref: x,
-		...T && {
+var NumberInputField = ({ className, defaultValue = 0, hideLabel, value, prompt, description, label, name, validation, onValueChange, appearance, ...remainingProps }) => {
+	const { control } = useFormContext();
+	const context = useFormCustomContext();
+	const { field: { ref, onChange, value: innerValue, name: innerName } } = useController({
+		name,
+		control,
+		rules: validation,
+		defaultValue
+	});
+	const { error } = useFieldError(name);
+	const formAppearance = context?.appearance || appearance;
+	React$1.useEffect(() => {
+		if (typeof value !== "undefined") onChange(value);
+	}, [value]);
+	return /* @__PURE__ */ React$1.createElement(FieldWrapper, {
+		className,
+		description,
+		error,
+		fieldId: name,
+		hideLabel,
+		label,
+		prompt,
+		required: Boolean(validation?.required),
+		appearance: formAppearance
+	}, /* @__PURE__ */ React$1.createElement(NumberInput, {
+		id: name,
+		name: innerName,
+		ref,
+		...error && {
 			state: "error",
-			"aria-invalid": !0
+			"aria-invalid": true
 		},
-		defaultValue: c,
-		onValueChange: (e) => {
-			S(e), g?.(e);
+		defaultValue,
+		onValueChange: (newValue) => {
+			onChange(newValue);
+			onValueChange?.(newValue);
 		},
-		value: C,
-		appearance: E,
-		...v
+		value: innerValue,
+		appearance: formAppearance,
+		...remainingProps
 	}));
 };
-s.displayName = "NumberInputField";
+NumberInputField.displayName = "NumberInputField";
 //#endregion
-export { s as NumberInputField };
+export { NumberInputField };
 
 //# sourceMappingURL=NumberInputField.js.map

package/dist/components/number-input-field/NumberInputField.js.map

@@ -1 +1 @@
-{"version":3,"file":"NumberInputField.js","names":[],"sources":["../../../src/components/number-input-field/NumberInputField.tsx"],"sourcesContent":["import * as React from 'react'\nimport { useController, useFormContext } from 'react-hook-form'\n\nimport { FieldWrapper } from '~/components/field-wrapper/FieldWrapper'\nimport { useFieldError } from '~/components/form/useFieldError'\nimport { useFormCustomContext } from '~/components/form/useFormCustomContext'\nimport { ValidationOptions } from '~/components/form/validation'\n\nimport type { NumberInputProps } from '../number-input/NumberInput'\nimport { NumberInput } from '../number-input/NumberInput'\n\nexport interface NumberInputFieldProps extends NumberInputProps {\n  className?: string\n  hideLabel?: boolean\n  description?: string\n  label: string\n  name: string\n  prompt?: { link: string; label: string }\n  validation?: ValidationOptions\n}\n\nexport const NumberInputField = ({\n  className,\n  defaultValue = 0,\n  hideLabel,\n  value,\n  prompt,\n  description,\n  label,\n  name,\n  validation,\n  onValueChange,\n  appearance,\n  ...remainingProps\n}: NumberInputFieldProps) => {\n  const { control } = useFormContext()\n  const context = useFormCustomContext()\n  const {\n    field: { ref, onChange, value: innerValue, name: innerName }\n  } = useController({\n    name,\n    control,\n    rules: validation,\n    defaultValue\n  })\n  const { error } = useFieldError(name)\n\n  const formAppearance = context?.appearance || appearance\n\n  React.useEffect(() => {\n    // Update the react-hook-form inner value to match what is passed in.\n    if (typeof value !== 'undefined') onChange(value)\n  }, [value])\n\n  return (\n    <FieldWrapper\n      className={className}\n      description={description}\n      error={error}\n      fieldId={name}\n      hideLabel={hideLabel}\n      label={label}\n      prompt={prompt}\n      required={Boolean(validation?.required)}\n      appearance={formAppearance}\n    >\n      <NumberInput\n        id={name}\n        name={innerName}\n        ref={ref}\n        {...(error && { state: 'error', 'aria-invalid': true })}\n        defaultValue={defaultValue}\n        onValueChange={(newValue) => {\n          onChange(newValue)\n          onValueChange?.(newValue)\n        }}\n        value={innerValue}\n        appearance={formAppearance}\n        {...remainingProps}\n      />\n    </FieldWrapper>\n  )\n}\n\nNumberInputField.displayName = 'NumberInputField'\n"],"mappings":";;;;;;;AAqBA,IAAa,KAAoB,EAC/B,cACA,kBAAe,GACf,cACA,UACA,WACA,gBACA,UACA,SACA,eACA,kBACA,eACA,GAAG,QACwB;CAC3B,IAAM,EAAE,eAAY,GAAgB,EAC9B,IAAU,GAAsB,EAChC,EACJ,OAAO,EAAE,QAAK,aAAU,OAAO,GAAY,MAAM,QAC/C,EAAc;EAChB;EACA;EACA,OAAO;EACP;EACD,CAAC,EACI,EAAE,aAAU,EAAc,EAAK,EAE/B,IAAiB,GAAS,cAAc;AAO9C,QALA,EAAM,gBAAgB;AAEpB,EAAW,MAAU,UAAa,EAAS,EAAM;IAChD,CAAC,EAAM,CAAC,EAGT,kBAAA,cAAC,GAAD;EACa;EACE;EACN;EACP,SAAS;EACE;EACJ;EACC;EACR,UAAU,EAAQ,GAAY;EAC9B,YAAY;EAgBC,EAdb,kBAAA,cAAC,GAAD;EACE,IAAI;EACJ,MAAM;EACD;EACL,GAAK,KAAS;GAAE,OAAO;GAAS,gBAAgB;GAAM;EACxC;EACd,gBAAgB,MAAa;AAE3B,GADA,EAAS,EAAS,EAClB,IAAgB,EAAS;;EAE3B,OAAO;EACP,YAAY;EACZ,GAAI;EACJ,CAAA,CACW;;AAInB,EAAiB,cAAc"}
+{"version":3,"file":"NumberInputField.js","names":[],"sources":["../../../src/components/number-input-field/NumberInputField.tsx"],"sourcesContent":["import * as React from 'react'\nimport { useController, useFormContext } from 'react-hook-form'\n\nimport { FieldWrapper } from '~/components/field-wrapper/FieldWrapper'\nimport { useFieldError } from '~/components/form/useFieldError'\nimport { useFormCustomContext } from '~/components/form/useFormCustomContext'\nimport { ValidationOptions } from '~/components/form/validation'\n\nimport type { NumberInputProps } from '../number-input/NumberInput'\nimport { NumberInput } from '../number-input/NumberInput'\n\nexport interface NumberInputFieldProps extends NumberInputProps {\n  className?: string\n  hideLabel?: boolean\n  description?: string\n  label: string\n  name: string\n  prompt?: { link: string; label: string }\n  validation?: ValidationOptions\n}\n\nexport const NumberInputField = ({\n  className,\n  defaultValue = 0,\n  hideLabel,\n  value,\n  prompt,\n  description,\n  label,\n  name,\n  validation,\n  onValueChange,\n  appearance,\n  ...remainingProps\n}: NumberInputFieldProps) => {\n  const { control } = useFormContext()\n  const context = useFormCustomContext()\n  const {\n    field: { ref, onChange, value: innerValue, name: innerName }\n  } = useController({\n    name,\n    control,\n    rules: validation,\n    defaultValue\n  })\n  const { error } = useFieldError(name)\n\n  const formAppearance = context?.appearance || appearance\n\n  React.useEffect(() => {\n    // Update the react-hook-form inner value to match what is passed in.\n    if (typeof value !== 'undefined') onChange(value)\n  }, [value])\n\n  return (\n    <FieldWrapper\n      className={className}\n      description={description}\n      error={error}\n      fieldId={name}\n      hideLabel={hideLabel}\n      label={label}\n      prompt={prompt}\n      required={Boolean(validation?.required)}\n      appearance={formAppearance}\n    >\n      <NumberInput\n        id={name}\n        name={innerName}\n        ref={ref}\n        {...(error && { state: 'error', 'aria-invalid': true })}\n        defaultValue={defaultValue}\n        onValueChange={(newValue) => {\n          onChange(newValue)\n          onValueChange?.(newValue)\n        }}\n        value={innerValue}\n        appearance={formAppearance}\n        {...remainingProps}\n      />\n    </FieldWrapper>\n  )\n}\n\nNumberInputField.displayName = 'NumberInputField'\n"],"mappings":";;;;;;;AAqBA,IAAa,oBAAoB,EAC/B,WACA,eAAe,GACf,WACA,OACA,QACA,aACA,OACA,MACA,YACA,eACA,YACA,GAAG,qBACwB;CAC3B,MAAM,EAAE,YAAY,gBAAgB;CACpC,MAAM,UAAU,sBAAsB;CACtC,MAAM,EACJ,OAAO,EAAE,KAAK,UAAU,OAAO,YAAY,MAAM,gBAC/C,cAAc;EAChB;EACA;EACA,OAAO;EACP;EACD,CAAC;CACF,MAAM,EAAE,UAAU,cAAc,KAAK;CAErC,MAAM,iBAAiB,SAAS,cAAc;AAE9C,SAAM,gBAAgB;AAEpB,MAAI,OAAO,UAAU,YAAa,UAAS,MAAM;IAChD,CAAC,MAAM,CAAC;AAEX,QACE,wBAAA,cAAC,cAAD;EACa;EACE;EACN;EACP,SAAS;EACE;EACJ;EACC;EACR,UAAU,QAAQ,YAAY,SAAS;EACvC,YAAY;EAgBC,EAdb,wBAAA,cAAC,aAAD;EACE,IAAI;EACJ,MAAM;EACD;EACL,GAAK,SAAS;GAAE,OAAO;GAAS,gBAAgB;GAAM;EACxC;EACd,gBAAgB,aAAa;AAC3B,YAAS,SAAS;AAClB,mBAAgB,SAAS;;EAE3B,OAAO;EACP,YAAY;EACZ,GAAI;EACJ,CAAA,CACW;;AAInB,iBAAiB,cAAc"}

package/dist/components/pagination/Pagination.d.ts

@@ -1,7 +1,7 @@
 import * as React from 'react';
 import type { PaginationProps } from './types';
 export declare const Pagination: {
-    ({ colorScheme, onSelectedPageChange, selectedPage, visibleElementsCount, pagesCount, indicatedPages, disabledPages, onItemHover, labels, children, ...rest }: PaginationProps): React.JSX.Element | null;
+    ({ colorScheme, onSelectedPageChange, selectedPage, visibleElementsCount, pagesCount, indicatedPages, disabledPages, onItemHover, labels, children, className, ...rest }: PaginationProps): React.JSX.Element | null;
     displayName: string;
 } & {
     Popover: ({ children }: React.PropsWithChildren<unknown>) => React.JSX.Element;