@latte-macchiat-io/latte-vanilla-components 0.0.262 → 0.0.263

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@latte-macchiat-io/latte-vanilla-components",
3
- "version": "0.0.262",
3
+ "version": "0.0.263",
4
4
  "description": "Beautiful components for amazing projects, with a touch of Vanilla 🥤",
5
5
  "type": "module",
6
6
  "main": "./src/index.ts",
@@ -3,9 +3,11 @@ import { forwardRef } from 'react';
3
3
  import { formRecipe } from './styles.css';
4
4
 
5
5
  export type FormProps = React.HTMLAttributes<HTMLDivElement> & {
6
+ as?: 'form' | 'div';
6
7
  children: React.ReactNode;
7
8
  };
8
9
 
9
- export const Form = forwardRef<HTMLFormElement, FormProps>(({ children, className }) => {
10
- return <form className={clsx(formRecipe(), className)}>{children}</form>;
10
+ export const Form = forwardRef<HTMLFormElement, FormProps>(({ as = 'form', children, className }) => {
11
+ const Component = as;
12
+ return <Component className={clsx(formRecipe(), className)}>{children}</Component>;
11
13
  });
@@ -6,6 +6,8 @@ import { generateResponsiveMedia } from '../../utils/generateResponsiveMedia';
6
6
 
7
7
  const formBase = style({
8
8
  maxWidth: '100%',
9
+ margin: '0 auto',
10
+ borderRadius: themeContract.form.borderRadius,
9
11
  backgroundColor: themeContract.form.backgroundColor,
10
12
 
11
13
  '@media': {
@@ -1,5 +1,6 @@
1
1
  const themeFormBase = {
2
2
  form: {
3
+ borderRadius: '30px',
3
4
  width: {
4
5
  mobile: '15px',
5
6
  sm: '15px',
@@ -856,6 +856,7 @@ export const themeContract = createGlobalThemeContract({
856
856
  },
857
857
 
858
858
  form: {
859
+ borderRadius: 'latte-form-borderRadius',
859
860
  backgroundColor: 'latte-form-backgroundColor',
860
861
  width: {
861
862
  mobile: 'latte-form-width-mobile',