@twintag/twintag-form 0.3.0 → 0.3.1

package/.turbo/turbo-build.log

@@ -1,5 +1,5 @@
 
-> @twintag/twintag-form@0.3.0 build /home/runner/work/twintag-templates/twintag-templates/packages/twintag-form
+> @twintag/twintag-form@0.3.1 build /home/runner/work/twintag-templates/twintag-templates/packages/twintag-form
 > tsc && node ./scripts/build.js
 
 vite v4.3.9 building for production...
@@ -29,7 +29,7 @@ computing gzip size...
 dist/lib/types/index.d.ts                    0.45 kB
 dist/lib/index.d.ts                          0.46 kB
 dist/lib/styles.d.ts                         3.24 kB
-dist/webcomponent.es.js                  1,009.45 kB │ gzip: 240.03 kB
+dist/webcomponent.es.js                  1,009.45 kB │ gzip: 240.02 kB
 [plugin:typescript] @rollup/plugin-typescript: Rollup 'sourcemap' option must be set to generate source maps.
 rendering chunks...
 computing gzip size...
@@ -53,6 +53,6 @@ computing gzip size...
 dist/lib/index.d.ts                        0.46 kB
 dist/lib/styles.d.ts                       3.24 kB
 dist/webcomponent.umd.js                 622.35 kB │ gzip: 194.56 kB
-✓ built in 17.53s
+✓ built in 24.15s
 dist/index.umd.js  556.28 kB │ gzip: 172.27 kB
-✓ built in 17.66s
+✓ built in 24.46s

package/CHANGELOG.md

@@ -1,5 +1,11 @@
 # @twintag/twintag-form
 
+## 0.3.1
+
+### Patch Changes
+
+- Update documentation.
+
 ## 0.3.0
 
 ### Minor Changes

package/README.md

@@ -16,6 +16,7 @@
     - [Toggle](#toggle)
     - [Submit](#submit)
 - [Event Handling](#event-handling)
+- [CSS](#css)
 
 ## **Introduction**
 
@@ -71,10 +72,10 @@ The `config` object contains the form structure. It is organized by the index of
 
 Twintag Form provides some options to customize the form:
 
-| Option          | Type      | Description                                                               |
-| --------------- | --------- | ------------------------------------------------------------------------- | -------------------- |
-| `variant`       | `alpha    | beta`                                                                     | Variant of the form. |
-| `resetOnSubmit` | `boolean` | If `true`, the form will be reset after submitting. (`false` per default) |
+| Option          | Type         | Description                                                               |
+| --------------- | ------------ | ------------------------------------------------------------------------- |
+| `variant`       | `alpha/beta` | Variant of the form.                                                      |
+| `resetOnSubmit` | `boolean`    | If `true`, the form will be reset after submitting. (`false` per default) |
 
 ### **Inputs**
 
@@ -82,11 +83,11 @@ Twintag Form provides some options to customize the form:
 
 Each input can be customized with the following options:
 
-| Option          | Type      | Description                                                  |
-| --------------- | --------- | ------------------------------------------------------------ | --------------------- |
-| `variant`       | `alpha    | beta`                                                        | Variant of the input. |
-| `placeholder`   | `string`  | Placeholder of the input.                                    |
-| `optionalField` | `boolean` | If `true`, the field will be optional. (`false` per default) |
+| Option          | Type         | Description                                                  |
+| --------------- | ------------ | ------------------------------------------------------------ |
+| `variant`       | `alpha/beta` | Variant of the input.                                        |
+| `placeholder`   | `string`     | Placeholder of the input.                                    |
+| `optionalField` | `boolean`    | If `true`, the field will be optional. (`false` per default) |
 
 ```json
 {
@@ -204,3 +205,13 @@ The `submit` input is a submit input.
   });
 </script>
 ```
+
+## **CSS**
+
+The form component exposes the following CSS variables:
+
+| Variable      | Description              |
+| ------------- | ------------------------ |
+| `--clr-label` | Color of the labels.     |
+| `--clr-input` | Color of the inputs.     |
+| `--ff-text`   | Font family of the text. |

package/dist/index.es.js

@@ -4193,7 +4193,7 @@ const gT = ({
     "form",
     {
       ref: f,
-      className: "relative font-fftext",
+      className: "font-fftext relative",
       onSubmit: b(R, _),
       children: /* @__PURE__ */ dt.jsx("div", { className: "grid w-auto gap-4", children: /* @__PURE__ */ dt.jsx(gT, { useForm: { register: m, control: E }, children: u }) })
     }
@@ -26786,7 +26786,7 @@ const pA = ({ useForm: u, label: s, bind: f, options: v }) => {
   ] });
 }, vA = ({ label: u, options: s }) => {
   const f = ua(() => s != null && s.variant ? Fw({ variant: s.variant }) : Fw(), []);
-  return /* @__PURE__ */ dt.jsx("div", { className: "w-full flex justify-center", children: /* @__PURE__ */ dt.jsx("button", { type: "submit", className: f, children: u }) });
+  return /* @__PURE__ */ dt.jsx("div", { className: "flex w-full justify-center", children: /* @__PURE__ */ dt.jsx("button", { type: "submit", className: f, children: u }) });
 };
 function hA(u, s) {
   typeof u == "function" ? u(s) : u != null && (u.current = s);