[Feat]: New Counter Field component

[Emmagevv]

Description: The Counter Field component allows users to increment or decrement a numeric value using plus and minus buttons or by directly inputting the number. This component is commonly used in scenarios like quantity selection, numeric input, or form fields with a minimum and maximum value.

Requirements:

1. Component Implementation:

• Implement the Counter Field component in TypeScript.
• Utilize SCSS with BEM methodology for styling.
• Integrate design tokens from @geneui/tokens for consistent colors, font sizes, spacing, and button styles.
• Support configuration options such as minimum, maximum values, and step increments.
• Ensure proper accessibility, including keyboard navigation and ARIA attributes.

2. Unit Tests:

• Write unit tests using Jest and React Testing Library.
• Ensure test coverage for all props, including rendering of different configurations (min, max, step).
• Test for edge cases such as invalid input values, exceeding limits, and unsupported step values.

3. Storybook Stories:

• Create a Storybook story for the Counter Field component.
• Showcase different configurations (e.g., various min/max values, step sizes).
• Create controls for the props so users can interact with the Counter Field component in Storybook.
• Document all props of the public interfaces.

4. Figma Design:

Follow the design outlined in the provided Figma link.

Checklist:

• Component is implemented in TypeScript.
• Styling follows SCSS using BEM methodology.
• Design tokens from @geneui/tokens are used for colors, font sizes, spacing, and button styles.
• Unit tests written and cover different states and edge cases.
• Storybook stories created with examples of all props and configuration options.
• Figma design matches the component implementation.