@flikk/ui 1.0.0-beta.2 → 1.0.0-beta.21

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

@@ -33,7 +33,7 @@ import { MinusIcon, PlusIcon } from '@heroicons/react/24/outline';
  * );
  * ```
  */
-const InputCounter = React__default.forwardRef(({ value, onChange, min, max, step = 1, disabled = false, decimalPlaces, formatNumber = (n) => n.toString(), className, buttonProps, theme, transition = { type: "spring", bounce: 0, stiffness: 300, damping: 30 }, "aria-label": ariaLabel = "Counter", ...props }, ref) => {
+const InputCounter = React__default.forwardRef(({ value, onChange, min, max, step = 1, disabled = false, decimalPlaces, formatNumber = (n) => n.toString(), className, buttonProps, theme, transition = { type: "spring", bounce: 0, stiffness: 300, damping: 30 }, "aria-label": ariaLabel = "Counter", onAnimationStart, onAnimationEnd, onDrag, onDragStart, onDragEnd, ...props }, ref) => {
     const shouldReduceMotion = useReducedMotion();
     const shouldDisableAnimations = !!shouldReduceMotion;
     // Auto-detect decimal places from step if not explicitly provided

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

@@ -5,7 +5,7 @@
 const inputCounterTheme = {
     baseStyle: "flex items-center gap-3 transition-all p-1 border border-[var(--color-border)] rounded-[var(--form-radius)] w-fit",
     buttonWrapperStyle: "flex-shrink-0",
-    numberStyle: "min-w-fit text-center text-sm font-medium text-[var(--color-text-primary)] tabular-nums select-none",
+    numberStyle: "min-w-fit text-center text-base font-medium text-[var(--color-text-primary)] tabular-nums select-none",
 };
 
 export { inputCounterTheme };

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

@@ -1,4 +1,5 @@
-import { HTMLMotionProps, Transition } from 'motion/react';
+import React from 'react';
+import type { Transition } from 'motion/react';
 import { ButtonProps } from '../../core/Button/Button.types';
 /**
  * InputCounter component props
@@ -13,7 +14,7 @@ import { ButtonProps } from '../../core/Button/Button.types';
  * @property {object} theme - Theme overrides for styling
  * @property {object} transition - Custom Framer Motion transition
  */
-export interface InputCounterProps extends Omit<HTMLMotionProps<'div'>, 'onChange'> {
+export interface InputCounterProps extends Omit<React.HTMLAttributes<HTMLDivElement>, 'onChange'> {
     /** Current counter value (controlled) */
     value: number;
     /** Callback when value changes */

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

@@ -26,7 +26,7 @@ const inputCreditCardTheme = {
     cvcInput: {
         ...inputTheme,
     },
-    chevronStyles: 'pointer-events-none col-start-1 row-start-1 mr-2 size-5 self-center justify-self-end text-gray-500 sm:size-4',
+    chevronStyles: 'pointer-events-none col-start-1 row-start-1 mr-2 size-5 self-center justify-self-end text-[var(--color-text-muted)] sm:size-4',
 };
 /**
  * Styled theme matching the reference design

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

@@ -10,9 +10,9 @@ const inputOTPTheme = {
     // OTP input container
     containerStyle: 'flex items-center gap-3',
     // Individual input field styles with design tokens
-    inputStyle: 'text-center text-lg text-[var(--color-text-primary)] h-full',
+    inputStyle: 'text-center text-xl text-[var(--color-text-primary)] h-full !p-0',
     // Input group wrapper for grouped inputs (overrides default Input styling)
-    inputGroupStyle: 'w-12 min-w-12 h-12 min-h-12',
+    inputGroupStyle: 'w-10 min-w-10 h-10 min-h-10 sm:w-12 sm:min-w-12 sm:h-12 sm:min-h-12',
     // Separator between input groups
     separatorStyle: 'text-[var(--color-text-muted)] font-medium select-none',
     // Helper text with state handling (reuses form base)

package/dist/components/forms/InputTag/InputTag.js

@@ -480,7 +480,7 @@ suggestions, creatable = true, openOnFocus = true, filterFn = defaultFilterFn, e
                             : placeholder, size: size, state: state, label: label, 
                         // Only pass helperText to Input when NOT in dropdown mode
                         // Otherwise the dropdown positions below the helper text
-                        helperText: hasDropdown ? undefined : displayHelperText, disabled: isInputDisabled, className: inputClassName, "aria-expanded": hasDropdown ? isOpen : undefined, "aria-haspopup": hasDropdown ? "listbox" : undefined, "aria-autocomplete": hasDropdown ? "list" : undefined }), hasDropdown && (jsx(InputTagOptions, { isOpen: isOpen, onClose: handleCloseDropdown, triggerRef: wrapperRef, filteredOptions: filteredOptions, selectedTags: tags, highlightedIndex: highlightedIndex, setHighlightedIndex: setHighlightedIndex, onSelectOption: handleSelectOption, showSelectedIndicator: showSelectedIndicator, portal: portal, placement: placement, offset: offset, emptyMessage: emptyMessage, className: dropdownClassName, theme: theme }))] }), hasDropdown && displayHelperText && (jsx("p", { className: "text-xs text-[var(--color-text-muted)] mt-1.5", children: displayHelperText })), jsx("div", { className: cn(theme.tagsContainerStyle, "empty:hidden", tagsContainerClassName), children: jsx(AnimatePresence, { mode: "popLayout", children: tags.map((tag, index) => {
+                        helperText: hasDropdown ? undefined : displayHelperText, disabled: isInputDisabled, className: inputClassName, "aria-expanded": hasDropdown ? isOpen : undefined, "aria-haspopup": hasDropdown ? "listbox" : undefined, "aria-autocomplete": hasDropdown ? "list" : undefined }), hasDropdown && (jsx(InputTagOptions, { isOpen: isOpen, onClose: handleCloseDropdown, triggerRef: wrapperRef, filteredOptions: filteredOptions, selectedTags: tags, highlightedIndex: highlightedIndex, setHighlightedIndex: setHighlightedIndex, onSelectOption: handleSelectOption, showSelectedIndicator: showSelectedIndicator, portal: portal, placement: placement, offset: offset, emptyMessage: emptyMessage, className: dropdownClassName, theme: theme }))] }), hasDropdown && displayHelperText && (jsx("p", { className: "text-sm text-[var(--color-text-muted)] mt-1.5", children: displayHelperText })), jsx("div", { className: cn(theme.tagsContainerStyle, "empty:hidden", tagsContainerClassName), children: jsx(AnimatePresence, { mode: "popLayout", children: tags.map((tag, index) => {
                         return (jsx(Tag, { size: size, onRemove: () => removeTag(index), disabled: disabled, className: tagClassName, children: tag }, `${tag}-${occurrenceMap[index]}`));
                     }) }) })] }));
 });

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

@@ -0,0 +1,3 @@
+import React from "react";
+import type { MentionProps } from "./Mention.types";
+export declare const Mention: React.ForwardRefExoticComponent<MentionProps & React.RefAttributes<HTMLDivElement>>;