@flikk/ui 1.0.0-beta.30 → 1.0.0-beta.32

package/dist/components/forms/FileUpload/FileUploadProgress.js

@@ -2,7 +2,7 @@
 import { jsx, jsxs } from 'react/jsx-runtime';
 import React__default, { useState, useEffect } from 'react';
 import { useReducedMotion, motion, AnimatePresence } from 'motion/react';
-import { DocumentIcon, TrashIcon, ArrowPathIcon, XMarkIcon, CheckIcon } from '@heroicons/react/24/outline';
+import { File, Trash, ArrowsClockwise, X, Check } from '@phosphor-icons/react';
 import { Icon } from '../../core/Icon/Icon.js';
 import { fileTypes } from '../../core/Icon/data/fileTypes.js';
 import { cn } from '../../../utils/cn.js';
@@ -61,13 +61,13 @@ const RadialProgress = ({ progress, status, strokeWidth, trackColor, progressCol
             setConfirmOpen(open);
             if (!open)
                 setIsHovered(false);
-        }, placement: "bottom-end", offset: offsetValue, triggerType: "click", children: [jsx(Popover.Trigger, { children: trigger }), jsxs(Popover.Body, { className: "flex items-center p-1 border-[0.5px] rounded-xl gap-0.5 bg-opacity-50 backdrop-blur-md", children: [jsx("span", { className: "text-sm font-semibold text-[var(--color-text-secondary)] px-3", children: label }), jsxs("div", { className: "flex gap-1", children: [jsx(Button, { size: "sm", color: "danger", variant: "filled", onClick: handleConfirm, children: "Yesss" }), jsx(Button, { size: "sm", variant: "soft", color: "neutral", onClick: () => setConfirmOpen(false), children: "No" })] })] })] }));
+        }, placement: "bottom-end", offset: offsetValue, triggerType: "click", children: [jsx(Popover.Trigger, { children: trigger }), jsxs(Popover.Body, { className: "flex items-center p-1 border-[0.5px] rounded-xl gap-0.5 bg-opacity-50 backdrop-blur-md", children: [jsx("span", { className: "text-sm font-semibold text-[var(--color-text-secondary)] px-3", children: label }), jsxs("div", { className: "flex gap-1", children: [jsx(Button, { size: "sm", color: "danger", variant: "filled", onClick: handleConfirm, children: "Yesss" }), jsx(Button, { size: "sm", variant: "soft", color: "mono", onClick: () => setConfirmOpen(false), children: "No" })] })] })] }));
     // Shared remove button used after completion tick
-    const removeButton = (jsx(motion.div, { initial: shouldReduceMotion ? false : REMOVE_BUTTON_ENTER.initial, animate: REMOVE_BUTTON_ENTER.animate, transition: REMOVE_BUTTON_ENTER.transition, className: "shrink-0", children: jsx(Button, { size: "sm", variant: "soft", color: "neutral", "aria-label": "Remove file", iconOnly: true, className: "rounded-full size-8", onClick: confirmRemove ? undefined : () => onRemove === null || onRemove === void 0 ? void 0 : onRemove(), children: jsx(TrashIcon, { className: "size-3.5", strokeWidth: 2 }) }) }, "remove-btn"));
+    const removeButton = (jsx(motion.div, { initial: shouldReduceMotion ? false : REMOVE_BUTTON_ENTER.initial, animate: REMOVE_BUTTON_ENTER.animate, transition: REMOVE_BUTTON_ENTER.transition, className: "shrink-0", children: jsx(Button, { size: "sm", variant: "soft", color: "mono", "aria-label": "Remove file", iconOnly: true, className: "rounded-full size-8", onClick: confirmRemove ? undefined : () => onRemove === null || onRemove === void 0 ? void 0 : onRemove(), children: jsx(Trash, { className: "size-3.5", weight: "bold" }) }) }, "remove-btn"));
     // Error state: retry + delete buttons (no progress arc/percentage).
     if (isError) {
-        const deleteButton = onRemove ? (jsx(Button, { size: "sm", variant: "soft", color: "neutral", "aria-label": "Remove file", iconOnly: true, className: "rounded-full size-8", onClick: confirmRemove ? undefined : () => onRemove(), children: jsx(TrashIcon, { className: "size-3.5", strokeWidth: 2 }) })) : null;
-        return (jsxs("div", { className: "flex items-center gap-1 shrink-0", children: [onRetry && (jsx(Button, { size: "sm", variant: "soft", color: "neutral", "aria-label": "Retry upload", iconOnly: true, className: "rounded-full size-8", onClick: () => onRetry(), children: jsx(ArrowPathIcon, { className: "size-3.5", strokeWidth: 2 }) })), deleteButton &&
+        const deleteButton = onRemove ? (jsx(Button, { size: "sm", variant: "soft", color: "mono", "aria-label": "Remove file", iconOnly: true, className: "rounded-full size-8", onClick: confirmRemove ? undefined : () => onRemove(), children: jsx(Trash, { className: "size-3.5", weight: "bold" }) })) : null;
+        return (jsxs("div", { className: "flex items-center gap-1 shrink-0", children: [onRetry && (jsx(Button, { size: "sm", variant: "soft", color: "mono", "aria-label": "Retry upload", iconOnly: true, className: "rounded-full size-8", onClick: () => onRetry(), children: jsx(ArrowsClockwise, { className: "size-3.5", weight: "bold" }) })), deleteButton &&
                     (confirmRemove
                         ? confirmPopover(deleteButton, "Remove file?", 6)
                         : deleteButton)] }));
@@ -82,7 +82,7 @@ const RadialProgress = ({ progress, status, strokeWidth, trackColor, progressCol
                     handleClick();
                 }
             }
-            : undefined, children: [jsxs("svg", { viewBox: `0 0 ${VIEWBOX} ${VIEWBOX}`, className: "w-full h-full -rotate-90", children: [jsx("circle", { cx: CENTER, cy: CENTER, r: radius, fill: "none", stroke: trackColor, strokeWidth: strokeWidth }), jsx(motion.circle, { cx: CENTER, cy: CENTER, r: radius, fill: "none", stroke: progressColor, strokeWidth: strokeWidth, strokeLinecap: "round", strokeDasharray: circumference, initial: { strokeDashoffset: circumference }, animate: { strokeDashoffset: isComplete ? 0 : offset }, transition: shouldReduceMotion ? { duration: 0 } : PROGRESS_SPRING })] }), jsx("div", { className: "absolute inset-0 flex items-center justify-center", children: jsxs(AnimatePresence, { mode: "wait", initial: false, children: [isUploading && !isHovered && (jsx(motion.span, { className: centerTextStyle, ...(shouldReduceMotion ? {} : CROSSFADE), children: progress }, "percent")), isUploading && isHovered && onRemove && (jsx(motion.span, { ...(shouldReduceMotion ? {} : CROSSFADE), children: jsx(XMarkIcon, { className: "size-4 text-[var(--color-text-muted)]", strokeWidth: 2.5 }) }, "close")), isComplete && !showRemove && (jsx(motion.span, { ...(shouldReduceMotion ? {} : CROSSFADE), children: jsx(CheckIcon, { className: cn("size-4", statusIconColor), strokeWidth: 3.5 }) }, "check"))] }) })] }));
+            : undefined, children: [jsxs("svg", { viewBox: `0 0 ${VIEWBOX} ${VIEWBOX}`, className: "w-full h-full -rotate-90", children: [jsx("circle", { cx: CENTER, cy: CENTER, r: radius, fill: "none", stroke: trackColor, strokeWidth: strokeWidth }), jsx(motion.circle, { cx: CENTER, cy: CENTER, r: radius, fill: "none", stroke: progressColor, strokeWidth: strokeWidth, strokeLinecap: "round", strokeDasharray: circumference, initial: { strokeDashoffset: circumference }, animate: { strokeDashoffset: isComplete ? 0 : offset }, transition: shouldReduceMotion ? { duration: 0 } : PROGRESS_SPRING })] }), jsx("div", { className: "absolute inset-0 flex items-center justify-center", children: jsxs(AnimatePresence, { mode: "wait", initial: false, children: [isUploading && !isHovered && (jsx(motion.span, { className: centerTextStyle, ...(shouldReduceMotion ? {} : CROSSFADE), children: progress }, "percent")), isUploading && isHovered && onRemove && (jsx(motion.span, { ...(shouldReduceMotion ? {} : CROSSFADE), children: jsx(X, { className: "size-4 text-[var(--color-text-muted)]", weight: "bold" }) }, "close")), isComplete && !showRemove && (jsx(motion.span, { ...(shouldReduceMotion ? {} : CROSSFADE), children: jsx(Check, { className: cn("size-4", statusIconColor), weight: "bold" }) }, "check"))] }) })] }));
     // Determine what to render: radial indicator or remove button
     const showRemoveButton = isComplete && showRemove && onRemove;
     const triggerElement = showRemoveButton ? removeButton : radialElement;
@@ -111,7 +111,7 @@ const FileUploadProgress = React__default.forwardRef(({ items, onRemove, onRetry
             const clampedProgress = Math.min(100, Math.max(0, item.progress));
             const ext = getFileExtension(item.file.name);
             const hasFileTypeIcon = ext !== null && isKnownFileType(ext);
-            return (jsxs("div", { className: (_a = themeOverrides === null || themeOverrides === void 0 ? void 0 : themeOverrides.itemStyle) !== null && _a !== void 0 ? _a : t.itemStyle, children: [hasFileTypeIcon ? (jsx("span", { className: "shrink-0", children: jsx(Icon, { icon: ext, size: "lg" }) })) : (jsx("span", { className: cn((_b = themeOverrides === null || themeOverrides === void 0 ? void 0 : themeOverrides.iconContainerStyle) !== null && _b !== void 0 ? _b : t.iconContainerStyle, t.iconSize), children: jsx(DocumentIcon, { className: (_c = themeOverrides === null || themeOverrides === void 0 ? void 0 : themeOverrides.iconStyle) !== null && _c !== void 0 ? _c : t.iconStyle }) })), jsxs("div", { className: (_d = themeOverrides === null || themeOverrides === void 0 ? void 0 : themeOverrides.fileInfoStyle) !== null && _d !== void 0 ? _d : t.fileInfoStyle, children: [jsx("p", { className: (_e = themeOverrides === null || themeOverrides === void 0 ? void 0 : themeOverrides.fileNameStyle) !== null && _e !== void 0 ? _e : t.fileNameStyle, children: item.file.name }), item.status === "error" && item.error ? (jsx("p", { className: (_f = themeOverrides === null || themeOverrides === void 0 ? void 0 : themeOverrides.errorTextStyle) !== null && _f !== void 0 ? _f : t.errorTextStyle, children: item.error })) : (showFileSize && (jsx("p", { className: (_g = themeOverrides === null || themeOverrides === void 0 ? void 0 : themeOverrides.fileSizeStyle) !== null && _g !== void 0 ? _g : t.fileSizeStyle, children: formatFileSize(item.file.size) })))] }), jsx(RadialProgress, { progress: clampedProgress, status: item.status, strokeWidth: t.radialStroke, trackColor: (_h = themeOverrides === null || themeOverrides === void 0 ? void 0 : themeOverrides.radialTrackColor) !== null && _h !== void 0 ? _h : t.radialTrackColor, progressColor: radialProgressColors[item.status], centerTextStyle: (_j = themeOverrides === null || themeOverrides === void 0 ? void 0 : themeOverrides.radialCenterTextStyle) !== null && _j !== void 0 ? _j : t.radialCenterTextStyle, statusIconColor: statusIconColors[item.status], sizeClass: t.radialSize, shouldReduceMotion: shouldReduceMotion, confirmRemove: confirmRemove, completionDelay: completionDelay, onRemove: onRemove ? () => onRemove(item.id) : undefined, onRetry: onRetry ? () => onRetry(item.id) : undefined })] }, item.id));
+            return (jsxs("div", { className: (_a = themeOverrides === null || themeOverrides === void 0 ? void 0 : themeOverrides.itemStyle) !== null && _a !== void 0 ? _a : t.itemStyle, children: [hasFileTypeIcon ? (jsx("span", { className: "shrink-0", children: jsx(Icon, { icon: ext, size: "lg" }) })) : (jsx("span", { className: cn((_b = themeOverrides === null || themeOverrides === void 0 ? void 0 : themeOverrides.iconContainerStyle) !== null && _b !== void 0 ? _b : t.iconContainerStyle, t.iconSize), children: jsx(File, { className: (_c = themeOverrides === null || themeOverrides === void 0 ? void 0 : themeOverrides.iconStyle) !== null && _c !== void 0 ? _c : t.iconStyle }) })), jsxs("div", { className: (_d = themeOverrides === null || themeOverrides === void 0 ? void 0 : themeOverrides.fileInfoStyle) !== null && _d !== void 0 ? _d : t.fileInfoStyle, children: [jsx("p", { className: (_e = themeOverrides === null || themeOverrides === void 0 ? void 0 : themeOverrides.fileNameStyle) !== null && _e !== void 0 ? _e : t.fileNameStyle, children: item.file.name }), item.status === "error" && item.error ? (jsx("p", { className: (_f = themeOverrides === null || themeOverrides === void 0 ? void 0 : themeOverrides.errorTextStyle) !== null && _f !== void 0 ? _f : t.errorTextStyle, children: item.error })) : (showFileSize && (jsx("p", { className: (_g = themeOverrides === null || themeOverrides === void 0 ? void 0 : themeOverrides.fileSizeStyle) !== null && _g !== void 0 ? _g : t.fileSizeStyle, children: formatFileSize(item.file.size) })))] }), jsx(RadialProgress, { progress: clampedProgress, status: item.status, strokeWidth: t.radialStroke, trackColor: (_h = themeOverrides === null || themeOverrides === void 0 ? void 0 : themeOverrides.radialTrackColor) !== null && _h !== void 0 ? _h : t.radialTrackColor, progressColor: radialProgressColors[item.status], centerTextStyle: (_j = themeOverrides === null || themeOverrides === void 0 ? void 0 : themeOverrides.radialCenterTextStyle) !== null && _j !== void 0 ? _j : t.radialCenterTextStyle, statusIconColor: statusIconColors[item.status], sizeClass: t.radialSize, shouldReduceMotion: shouldReduceMotion, confirmRemove: confirmRemove, completionDelay: completionDelay, onRemove: onRemove ? () => onRemove(item.id) : undefined, onRetry: onRetry ? () => onRetry(item.id) : undefined })] }, item.id));
         }) }));
 });
 FileUploadProgress.displayName = "FileUploadProgress";

package/dist/components/forms/FileUpload/FileUploadProgress.theme.js

@@ -1,7 +1,7 @@
 const fileUploadProgressTheme = {
     containerStyle: "flex flex-col gap-3",
     itemStyle: "w-full flex items-center gap-x-3",
-    iconContainerStyle: "flex items-center justify-center rounded-lg shrink-0 border border-[var(--color-border)] bg-[var(--color-background-secondary)]",
+    iconContainerStyle: "flex items-center justify-center rounded-lg shrink-0 border border-[var(--color-border)] bg-[var(--color-surface)]",
     iconStyle: "shrink-0 size-5 text-[var(--color-text-muted)]",
     fileInfoStyle: "flex-1 min-w-0",
     fileNameStyle: "text-sm font-medium text-[var(--color-text-primary)] truncate",

package/dist/components/forms/Input/Input.js

@@ -4,8 +4,7 @@ import React__default, { useState, useRef, useEffect, useCallback } from 'react'
 import { FormLabel } from '../FormLabel/FormLabel.js';
 import { inputTheme } from './Input.theme.js';
 import { cn } from '../../../utils/cn.js';
-import { LockClosedIcon, EyeSlashIcon, EyeIcon } from '@heroicons/react/24/solid';
-import { MagnifyingGlassIcon, MinusIcon, PlusIcon } from '@heroicons/react/24/outline';
+import { Lock, MagnifyingGlass, EyeSlash, Eye, Minus, Plus } from '@phosphor-icons/react';
 import { validateMaskedInput, applyInputMask, getAdjustedCursorPosition } from './inputMasks.js';
 
 const PasswordToggleButton = ({ showPassword, onToggle, passwordToggleClasses, }) => {
@@ -19,7 +18,7 @@ const PasswordToggleButton = ({ showPassword, onToggle, passwordToggleClasses, }
                 e.preventDefault();
                 onToggle();
             }
-        }, children: showPassword ? (jsx(EyeSlashIcon, { className: toggleIconActive, "aria-hidden": "true" })) : (jsx(EyeIcon, { className: toggleIconInactive, "aria-hidden": "true" })) }));
+        }, children: showPassword ? (jsx(EyeSlash, { className: toggleIconActive, "aria-hidden": "true" })) : (jsx(Eye, { className: toggleIconInactive, "aria-hidden": "true" })) }));
 };
 const NumberButtons = ({ isDisabled, isAtMax, isAtMin, onIncrement, onDecrement, numberButtonsContainerClasses, numberButtonClasses, }) => {
     const incrementIconStyle = inputTheme.typeStyles.number.incrementIconStyle;
@@ -27,10 +26,10 @@ const NumberButtons = ({ isDisabled, isAtMax, isAtMin, onIncrement, onDecrement,
     return (jsxs("div", { className: numberButtonsContainerClasses, children: [jsx("button", { type: "button", className: `${numberButtonClasses}`, onClick: (e) => {
                     e.stopPropagation();
                     onDecrement();
-                }, disabled: isDisabled || isAtMin, "aria-label": "Decrease value", tabIndex: -1, children: jsx(MinusIcon, { className: cn("size-4", decrementIconStyle), "aria-hidden": "true" }) }), jsx("button", { type: "button", className: `${numberButtonClasses}`, onClick: (e) => {
+                }, disabled: isDisabled || isAtMin, "aria-label": "Decrease value", tabIndex: -1, children: jsx(Minus, { className: cn("size-4", decrementIconStyle), "aria-hidden": "true" }) }), jsx("button", { type: "button", className: `${numberButtonClasses}`, onClick: (e) => {
                     e.stopPropagation();
                     onIncrement();
-                }, disabled: isDisabled || isAtMax, "aria-label": "Increase value", tabIndex: -1, children: jsx(PlusIcon, { className: cn("size-4", incrementIconStyle), "aria-hidden": "true" }) })] }));
+                }, disabled: isDisabled || isAtMax, "aria-label": "Increase value", tabIndex: -1, children: jsx(Plus, { className: cn("size-4", incrementIconStyle), "aria-hidden": "true" }) })] }));
 };
 const getActiveDots = (strength) => {
     switch (strength) {
@@ -83,8 +82,8 @@ const Input = React__default.forwardRef(({ size = "md", state = "default", class
     const inputRef = useRef(null);
     const cursorPositionRef = useRef(null);
     // Default icons based on input type
-    const defaultPasswordIcon = showTypeIcon && type === "password" && !iconStart ? (jsx(LockClosedIcon, { className: "size-5 text-[var(--color-text-muted)]" })) : null;
-    const defaultSearchIcon = showTypeIcon && type === "search" && !iconStart ? (jsx(MagnifyingGlassIcon, { className: cn("size-5", inputTheme.typeStyles.search.iconStyle) })) : null;
+    const defaultPasswordIcon = showTypeIcon && type === "password" && !iconStart ? (jsx(Lock, { className: "size-5 text-[var(--color-text-muted)]" })) : null;
+    const defaultSearchIcon = showTypeIcon && type === "search" && !iconStart ? (jsx(MagnifyingGlass, { className: cn("size-5", inputTheme.typeStyles.search.iconStyle) })) : null;
     // Use the provided iconStart or the default icon based on input type
     const finalLeftIcon = iconStart || defaultPasswordIcon || defaultSearchIcon;
     // Derived state flags for internal use

package/dist/components/forms/Input/Input.theme.js

@@ -49,9 +49,9 @@ const inputTheme = {
     iconPadding: formsBaseTheme.iconStyles.padding,
     // Content styles - prefix/suffix content with size-aware font sizes
     contentStyle: {
-        sm: `flex items-center px-3 ${formsBaseTheme.sizes.sm.text} text-[var(--color-text-muted)] shrink-0 dark:text-[var(--color-neutral-500)]`,
-        md: `flex items-center px-3 ${formsBaseTheme.sizes.md.text} text-[var(--color-text-muted)] shrink-0 dark:text-[var(--color-neutral-500)]`,
-        lg: `flex items-center px-3 ${formsBaseTheme.sizes.lg.text} text-[var(--color-text-muted)] shrink-0 dark:text-[var(--color-neutral-500)]`,
+        sm: `flex items-center px-3 ${formsBaseTheme.sizes.sm.text} text-[var(--color-text-muted)] shrink-0`,
+        md: `flex items-center px-3 ${formsBaseTheme.sizes.md.text} text-[var(--color-text-muted)] shrink-0`,
+        lg: `flex items-center px-3 ${formsBaseTheme.sizes.lg.text} text-[var(--color-text-muted)] shrink-0`,
     },
     contentStartStyle: "pr-0 " +
         "[&:has([aria-haspopup])]:pl-0 " +
@@ -67,29 +67,33 @@ const inputTheme = {
         "[&_[aria-haspopup]]:border-none [&_[aria-haspopup]]:rounded-none [&_[aria-haspopup]]:bg-transparent " +
         "[&_[aria-haspopup]]:min-h-0 [&_[aria-haspopup]]:h-full",
     // Keyboard shortcut display
-    keyboardShortcutStyle: "absolute inset-y-0 right-0 flex items-center pr-3 text-[var(--color-text-muted)] z-10 " +
-        "dark:text-[var(--color-neutral-500)]",
+    keyboardShortcutStyle: "absolute inset-y-0 right-0 flex items-center pr-3 text-[var(--color-text-muted)] z-10",
     // Password toggle button with hover states
     passwordToggleStyle: "absolute inset-y-0 right-0 flex items-center pr-3 cursor-pointer " +
-        "text-[var(--color-text-muted)] hover:text-[var(--color-text-primary)] transition-colors z-10 " +
-        "dark:text-[var(--color-neutral-500)] dark:hover:text-[var(--color-neutral-200)]",
+        "text-[var(--color-text-muted)] hover:text-[var(--color-text-primary)] transition-colors z-10",
     // Number input controls
     numberButtonsContainerStyle: "absolute inset-y-0 right-0 flex flex-row items-center pr-2 z-10 gap-1",
-    numberButtonStyle: "bg-[var(--color-background-secondary)] flex items-center justify-center " +
+    // In-field micro-affordance (like the password toggle) — deliberately a plain
+    // <button>, NOT the Button component (form-control heights don't fit in the
+    // field). --checkbox-radius = the capped small-control radius, so it follows
+    // --radius-base without going full pill at 24px.
+    numberButtonStyle: "bg-[var(--color-surface-sunken)] flex items-center justify-center " +
         "text-[var(--color-text-muted)] hover:bg-[var(--color-surface-hover)] " +
-        "hover:text-[var(--color-text-primary)] cursor-pointer size-6 rounded-sm transition-colors",
+        "hover:text-[var(--color-text-primary)] cursor-pointer size-6 rounded-[var(--checkbox-radius)] transition-colors " +
+        "outline-none focus-visible:ring-2 focus-visible:ring-[var(--color-primary)] " +
+        "disabled:opacity-40 disabled:cursor-not-allowed disabled:hover:bg-[var(--color-surface-sunken)]",
     // Type-specific styles organized by input type
     typeStyles: {
         password: {
-            toggleIconActive: "size-5 text-[var(--color-text-primary)] dark:text-[var(--color-neutral-200)]",
-            toggleIconInactive: "size-5 text-[var(--color-text-muted)] dark:text-[var(--color-neutral-500)]",
+            toggleIconActive: "size-5 text-[var(--color-text-primary)]",
+            toggleIconInactive: "size-5 text-[var(--color-text-muted)]",
         },
         search: {
-            iconStyle: "text-[var(--color-text-muted)] dark:text-[var(--color-neutral-500)]",
+            iconStyle: "text-[var(--color-text-muted)]",
         },
         number: {
-            incrementIconStyle: "text-[var(--color-text-muted)] dark:text-[var(--color-neutral-500)]",
-            decrementIconStyle: "text-[var(--color-text-muted)] dark:text-[var(--color-neutral-500)]",
+            incrementIconStyle: "text-[var(--color-text-muted)]",
+            decrementIconStyle: "text-[var(--color-text-muted)]",
         },
     },
     // Password strength indicator with design tokens
@@ -98,7 +102,7 @@ const inputTheme = {
         labelStyle: "text-xs font-semibold mr-1",
         dotStyle: "size-1.5 rounded-full",
         dotActiveStyle: "bg-current",
-        dotInactiveStyle: "bg-[var(--color-border)] dark:bg-[var(--color-neutral-700)]",
+        dotInactiveStyle: "bg-[var(--color-border)] dark:bg-[var(--color-mono-700)]",
         strengthStyles: {
             weak: {
                 label: "Weak",

package/dist/components/forms/InputAddress/InputAddress.js

@@ -75,7 +75,7 @@ const DEFAULT_COUNTRIES = [
  * />
  * ```
  */
-const InputAddress = React__default.forwardRef(({ state = 'default', errorMessage, availableCountries = [], defaultCountry = "United States", onCountryChange, onPostalCodeChange, countryLabel = "Country", postalCodeLabel = "ZIP / Postal code", legendText = "Billing address", streetInputProps = {}, stateInputProps = {}, countryInputProps = {}, postalCodeInputProps = {}, className = "", theme = {}, }, ref) => {
+const InputAddress = React__default.forwardRef(({ state = 'default', errorMessage, showCountrySelector = true, showPostalCode = true, availableCountries = [], defaultCountry = "United States", onCountryChange, onPostalCodeChange, countryLabel = "Country", postalCodeLabel = "ZIP / Postal code", legendText = "Billing address", streetInputProps = {}, stateInputProps = {}, countryInputProps = {}, postalCodeInputProps = {}, className = "", theme = {}, }, ref) => {
     var _a;
     const isDisabled = state === 'disabled';
     // Clear the error visually as soon as the user starts re-entering after an error.
@@ -133,17 +133,24 @@ const InputAddress = React__default.forwardRef(({ state = 'default', errorMessag
     // Children are NEVER given `invalid` — the single red perimeter overlay carries the error
     // (see formsBaseTheme.groupInvalidOverlayStyle). Only disabled propagates to the fields.
     const fieldState = isDisabled ? 'disabled' : 'default';
+    // The fields render as ONE merged perimeter, so the radii are positional: only the
+    // last visible field carries the bottom corners. Hiding country/postal moves that
+    // responsibility up the stack, and a lone bottom field spans the full row.
+    const showBottomRow = showCountrySelector || showPostalCode;
+    const isBottomRowSplit = showCountrySelector && showPostalCode;
     // Merge group state into each field's props; strip per-field helperText so only the
     // consolidated message shows at the bottom.
     const { helperText: _st, onChange: _stOnChange, ...streetProps } = { state: fieldState, ...streetInputProps };
     const { helperText: _sa, onChange: _saOnChange, ...stateProps } = { state: fieldState, ...stateInputProps };
     const { helperText: _co, className: _coClass, ...countryProps } = { state: fieldState, ...countryInputProps };
     const { helperText: _pc, ...postalProps } = { state: fieldState, ...postalCodeInputProps };
-    return (jsxs("fieldset", { ref: ref, className: `w-full border-0 m-0 p-0 ${isInvalid ? 'state-invalid' : ''} ${className}`, "data-testid": "input-address-fieldset", "aria-invalid": isInvalid || undefined, "aria-errormessage": isInvalid && errorMessage ? errorId : undefined, children: [jsx("legend", { className: `block text-sm/6 font-medium mb-2 text-[var(--color-text-primary)] ${(_a = mergedTheme.legendStyles) !== null && _a !== void 0 ? _a : ""}`, children: legendText }), jsxs("div", { className: `relative grid gap-0 ${mergedTheme.contentStyles}`, "data-testid": "input-address-content", children: [jsx("div", { className: "w-full relative focus-within:z-10 hover:z-10", "data-testid": "input-address-street", children: jsx(Input, { id: streetId, type: "text", placeholder: "Street address", "aria-label": "street address", inputGroupClassName: "rounded-b-none", ...streetProps, onChange: markDirty(_stOnChange) }) }), jsx("div", { className: "w-full -mt-[0.5px] relative focus-within:z-10 hover:z-10", "data-testid": "input-address-state", children: jsx(Input, { id: stateId, type: "text", placeholder: "State", "aria-label": "state", inputGroupClassName: "rounded-none", ...stateProps, onChange: markDirty(_saOnChange) }) }), jsxs("div", { className: "grid grid-cols-1 sm:grid-cols-2 w-full -mt-px relative focus-within:z-10 hover:z-10", children: [jsx("div", { className: `${mergedTheme.countryWrapperStyles} w-full sm:pr-0 relative focus-within:z-10 hover:z-10`, "data-testid": "input-address-country", children: jsx(Select, { id: countryId, options: countryOptions, value: country, onChange: handleCountryChange, placeholder: countryLabel, searchable: true, searchPlaceholder: `Search ${countryLabel.toLowerCase()}`, disabled: isDisabled, 
+    return (jsxs("fieldset", { ref: ref, className: `w-full border-0 m-0 p-0 ${isInvalid ? 'state-invalid' : ''} ${className}`, "data-testid": "input-address-fieldset", "aria-invalid": isInvalid || undefined, "aria-errormessage": isInvalid && errorMessage ? errorId : undefined, children: [jsx("legend", { className: `block text-sm/6 font-medium mb-2 text-[var(--color-text-primary)] ${(_a = mergedTheme.legendStyles) !== null && _a !== void 0 ? _a : ""}`, children: legendText }), jsxs("div", { className: `relative grid gap-0 ${mergedTheme.contentStyles}`, "data-testid": "input-address-content", children: [jsx("div", { className: "w-full relative focus-within:z-10 hover:z-10", "data-testid": "input-address-street", children: jsx(Input, { id: streetId, type: "text", placeholder: "Street address", "aria-label": "street address", inputGroupClassName: "rounded-b-none", ...streetProps, onChange: markDirty(_stOnChange) }) }), jsx("div", { className: "w-full -mt-[0.5px] relative focus-within:z-10 hover:z-10", "data-testid": "input-address-state", children: jsx(Input, { id: stateId, type: "text", placeholder: "State", "aria-label": "state", inputGroupClassName: showBottomRow ? "rounded-none" : "rounded-t-none", ...stateProps, onChange: markDirty(_saOnChange) }) }), showBottomRow && (jsxs("div", { className: cn("grid grid-cols-1 w-full -mt-px relative focus-within:z-10 hover:z-10", isBottomRowSplit && "sm:grid-cols-2"), children: [showCountrySelector && (jsx("div", { className: `${mergedTheme.countryWrapperStyles} w-full sm:pr-0 relative focus-within:z-10 hover:z-10`, "data-testid": "input-address-country", children: jsx(Select, { id: countryId, options: countryOptions, value: country, onChange: handleCountryChange, placeholder: countryLabel, searchable: true, searchPlaceholder: `Search ${countryLabel.toLowerCase()}`, disabled: isDisabled, 
                                     // className lands on the Select trigger button (which carries the same
                                     // inputGroup border/radius as Input's inputGroupClassName target), so the
                                     // outer styling and the merged border seams are identical to the old Input.
-                                    className: cn("sm:rounded-bl-[var(--form-radius)] rounded-t-none sm:rounded-tr-none sm:rounded-br-none", _coClass), ...countryProps }) }), jsx("div", { className: `${mergedTheme.postalCodeWrapperStyles} w-full -mt-px sm:mt-0 sm:-ml-px sm:w-[calc(100%+1px)] relative focus-within:z-10 hover:z-10`, "data-testid": "input-address-postal", children: jsx(Input, { id: postalCodeId, type: "text", value: postalCode, onChange: handlePostalCodeChange, placeholder: postalCodeLabel, "aria-label": postalCodeLabel, inputGroupClassName: "sm:rounded-br-[var(--form-radius)] rounded-t-none rounded-tl-none rounded-bl-[var(--form-radius)] sm:rounded-bl-none", ...postalProps }) })] }), isInvalid && jsx("div", { "aria-hidden": "true", className: formsBaseTheme.groupInvalidOverlayStyle })] }), isInvalid && errorMessage && (jsx("p", { id: errorId, role: "alert", className: formsBaseTheme.helperText, children: errorMessage }))] }));
+                                    className: cn("rounded-t-none", isBottomRowSplit &&
+                                        "sm:rounded-bl-[var(--form-radius)] sm:rounded-tr-none sm:rounded-br-none", _coClass), ...countryProps }) })), showPostalCode && (jsx("div", { className: cn(mergedTheme.postalCodeWrapperStyles, "w-full relative focus-within:z-10 hover:z-10", isBottomRowSplit && "-mt-px sm:mt-0 sm:-ml-px sm:w-[calc(100%+1px)]"), "data-testid": "input-address-postal", children: jsx(Input, { id: postalCodeId, type: "text", value: postalCode, onChange: handlePostalCodeChange, placeholder: postalCodeLabel, "aria-label": postalCodeLabel, inputGroupClassName: cn("rounded-t-none", isBottomRowSplit &&
+                                        "sm:rounded-br-[var(--form-radius)] rounded-tl-none rounded-bl-[var(--form-radius)] sm:rounded-bl-none"), ...postalProps }) }))] })), isInvalid && jsx("div", { "aria-hidden": "true", className: formsBaseTheme.groupInvalidOverlayStyle })] }), isInvalid && errorMessage && (jsx("p", { id: errorId, role: "alert", className: formsBaseTheme.helperText, children: errorMessage }))] }));
 });
 InputAddress.displayName = "InputAddress";
 

package/dist/components/forms/InputAddress/InputAddress.types.d.ts

@@ -1,6 +1,6 @@
 import React from 'react';
 import { InputProps, InputTheme } from '../Input/Input.types';
-import { SelectProps } from '../Select/Select.types';
+import { SelectSingleProps } from '../Select/Select.types';
 /**
  * InputAddress component props
  * @property {boolean} showCountrySelector - Whether to show the country selector
@@ -42,7 +42,7 @@ export interface InputAddressProps {
     /** Props passed to the state input */
     stateInputProps?: Omit<InputProps, 'ref'>;
     /** Props passed to the country Select (e.g. `searchable`, `placement`, `theme`) */
-    countryInputProps?: Partial<SelectProps<string>>;
+    countryInputProps?: Partial<SelectSingleProps<string>>;
     /** Props passed to the postal code input */
     postalCodeInputProps?: Omit<InputProps, 'ref'>;
     /** Class name for the container */

package/dist/components/forms/InputCounter/InputCounter.js

@@ -6,7 +6,7 @@ import { inputCounterTheme } from './InputCounter.theme.js';
 import { Button } from '../../core/Button/Button.js';
 import { SlidingNumber } from '../../core/SlidingNumber/SlidingNumber.js';
 import { cn } from '../../../utils/cn.js';
-import { MinusIcon, PlusIcon } from '@heroicons/react/24/outline';
+import { Minus, Plus } from '@phosphor-icons/react';
 import { FormLabel } from '../FormLabel/FormLabel.js';
 
 /**
@@ -175,7 +175,7 @@ const InputCounter = React__default.forwardRef(({ value, onChange, state = "defa
                         // focusable <Button>, so an explicit tabIndex={-1} keeps it out
                         // of the tab order (motion.js only adds its own when the
                         // attribute is absent).
-                        tabIndex: -1, whileHover: !isDisabled && !shouldDisableAnimations ? { scale: 1.05 } : undefined, whileTap: !isDisabled && !shouldDisableAnimations ? { scale: 0.95 } : undefined, children: jsx(Button, { size: "sm", variant: "ghost", iconOnly: true, ...buttonProps, onClick: handleDecrement, disabled: !canDecrement, "aria-label": "Decrement", children: jsx(MinusIcon, { className: "size-4 text-[var(--color-text-primary)]", strokeWidth: 2 }) }) }), jsx(SlidingNumber, { value: value, decimalPlaces: autoDecimalPlaces, className: mergedTheme.numberStyle, transition: transition }), jsx(motion.div, { className: mergedTheme.buttonWrapperStyle, 
+                        tabIndex: -1, whileHover: !isDisabled && !shouldDisableAnimations ? { scale: 1.05 } : undefined, whileTap: !isDisabled && !shouldDisableAnimations ? { scale: 0.95 } : undefined, children: jsx(Button, { size: "sm", variant: "ghost", iconOnly: true, ...buttonProps, onClick: handleDecrement, disabled: !canDecrement, "aria-label": "Decrement", children: jsx(Minus, { className: "size-4 text-[var(--color-text-primary)]", weight: "bold" }) }) }), jsx(SlidingNumber, { value: value, decimalPlaces: autoDecimalPlaces, className: mergedTheme.numberStyle, transition: transition }), jsx(motion.div, { className: mergedTheme.buttonWrapperStyle, 
                         // Framer Motion's press gesture (triggered by `whileTap`) adds
                         // `tabIndex=0` to any non-natively-focusable element that
                         // doesn't already declare a `tabindex`, to make tap gestures
@@ -184,7 +184,7 @@ const InputCounter = React__default.forwardRef(({ value, onChange, state = "defa
                         // focusable <Button>, so an explicit tabIndex={-1} keeps it out
                         // of the tab order (motion.js only adds its own when the
                         // attribute is absent).
-                        tabIndex: -1, whileHover: !isDisabled && !shouldDisableAnimations ? { scale: 1.05 } : undefined, whileTap: !isDisabled && !shouldDisableAnimations ? { scale: 0.95 } : undefined, children: jsx(Button, { size: "sm", variant: "ghost", iconOnly: true, ...buttonProps, onClick: handleIncrement, disabled: !canIncrement, "aria-label": "Increment", children: jsx(PlusIcon, { className: "size-4 text-[var(--color-text-primary)]", strokeWidth: 2 }) }) })] }), displayedMessage && (jsx("div", { id: helperId, role: isInvalid ? "alert" : undefined, className: cn("text-sm mt-1", isInvalid
+                        tabIndex: -1, whileHover: !isDisabled && !shouldDisableAnimations ? { scale: 1.05 } : undefined, whileTap: !isDisabled && !shouldDisableAnimations ? { scale: 0.95 } : undefined, children: jsx(Button, { size: "sm", variant: "ghost", iconOnly: true, ...buttonProps, onClick: handleIncrement, disabled: !canIncrement, "aria-label": "Increment", children: jsx(Plus, { className: "size-4 text-[var(--color-text-primary)]", weight: "bold" }) }) })] }), displayedMessage && (jsx("div", { id: helperId, role: isInvalid ? "alert" : undefined, className: cn("text-sm mt-1", isInvalid
                     ? "text-[var(--color-danger)]"
                     : "text-[var(--color-text-muted)]"), children: displayedMessage }))] }));
 });

package/dist/components/forms/InputOTP/InputOTP.d.ts

@@ -2,17 +2,8 @@ import React from 'react';
 import { InputOTPProps } from './InputOTP.types';
 /**
  * InputOTP component for entering one-time passwords or verification codes.
- *
- * @component
- * @example
- * ```tsx
- * <InputOTP
- *   length={6}
- *   value={otpValue}
- *   onChange={setOtpValue}
- *   onComplete={handleOtpComplete}
- *   label="Enter verification code"
- * />
- * ```
+ * One invisible native input overlays the rendered slots: focus, typing,
+ * paste, and autofill all go through it, and the caret is pinned to the end
+ * of the value so the highlighted slot always matches where edits land.
  */
 export declare const InputOTP: React.ForwardRefExoticComponent<InputOTPProps & React.RefAttributes<HTMLDivElement>>;