mado-ui 0.1.2 → 0.2.0

package/css/index.css

@@ -346,6 +346,9 @@
   .inline-block {
     display: inline-block;
   }
+  .field-sizing-content {
+    field-sizing: content;
+  }
   .size-5 {
     width: calc(var(--spacing) * 5);
     height: calc(var(--spacing) * 5);
@@ -435,12 +438,18 @@
   .cursor-wait {
     cursor: wait;
   }
+  .resize-none {
+    resize: none;
+  }
   .list-inside {
     list-style-position: inside;
   }
   .list-disc {
     list-style-type: disc;
   }
+  .flex-wrap {
+    flex-wrap: wrap;
+  }
   .items-center {
     align-items: center;
   }
@@ -453,6 +462,9 @@
   .gap-3 {
     gap: calc(var(--spacing) * 3);
   }
+  .gap-4 {
+    gap: calc(var(--spacing) * 4);
+  }
   .gap-8 {
     gap: calc(var(--spacing) * 8);
   }
@@ -498,12 +510,6 @@
     border-style: var(--tw-border-style);
     border-width: 1px;
   }
-  .border-neutral-50\/15 {
-    border-color: color-mix(in srgb, oklch(98.5% 0 0) 15%, transparent);
-    @supports (color: color-mix(in lab, red, red)) {
-      border-color: color-mix(in oklab, var(--color-neutral-50) 15%, transparent);
-    }
-  }
   .border-neutral-500\/50 {
     border-color: color-mix(in srgb, oklch(55.6% 0 0) 50%, transparent);
     @supports (color: color-mix(in lab, red, red)) {
@@ -630,13 +636,6 @@
     --tw-gradient-from: currentcolor;
     --tw-gradient-stops: var(--tw-gradient-via-stops, var(--tw-gradient-position), var(--tw-gradient-from) var(--tw-gradient-from-position), var(--tw-gradient-to) var(--tw-gradient-to-position));
   }
-  .from-neutral-900\/50 {
-    --tw-gradient-from: color-mix(in srgb, oklch(20.5% 0 0) 50%, transparent);
-    @supports (color: color-mix(in lab, red, red)) {
-      --tw-gradient-from: color-mix(in oklab, var(--color-neutral-900) 50%, transparent);
-    }
-    --tw-gradient-stops: var(--tw-gradient-via-stops, var(--tw-gradient-position), var(--tw-gradient-from) var(--tw-gradient-from-position), var(--tw-gradient-to) var(--tw-gradient-to-position));
-  }
   .from-ui-blue {
     --tw-gradient-from: var(--color-ui-blue);
     --tw-gradient-stops: var(--tw-gradient-via-stops, var(--tw-gradient-position), var(--tw-gradient-from) var(--tw-gradient-from-position), var(--tw-gradient-to) var(--tw-gradient-to-position));
@@ -789,14 +788,6 @@
     --tw-gradient-via-stops: var(--tw-gradient-position), var(--tw-gradient-from) var(--tw-gradient-from-position), var(--tw-gradient-via) var(--tw-gradient-via-position), var(--tw-gradient-to) var(--tw-gradient-to-position);
     --tw-gradient-stops: var(--tw-gradient-via-stops);
   }
-  .via-neutral-800\/50 {
-    --tw-gradient-via: color-mix(in srgb, oklch(26.9% 0 0) 50%, transparent);
-    @supports (color: color-mix(in lab, red, red)) {
-      --tw-gradient-via: color-mix(in oklab, var(--color-neutral-800) 50%, transparent);
-    }
-    --tw-gradient-via-stops: var(--tw-gradient-position), var(--tw-gradient-from) var(--tw-gradient-from-position), var(--tw-gradient-via) var(--tw-gradient-via-position), var(--tw-gradient-to) var(--tw-gradient-to-position);
-    --tw-gradient-stops: var(--tw-gradient-via-stops);
-  }
   .via-ui-blue {
     --tw-gradient-via: var(--color-ui-blue);
     --tw-gradient-via-stops: var(--tw-gradient-position), var(--tw-gradient-from) var(--tw-gradient-from-position), var(--tw-gradient-via) var(--tw-gradient-via-position), var(--tw-gradient-to) var(--tw-gradient-to-position);
@@ -825,13 +816,6 @@
     --tw-gradient-to: currentcolor;
     --tw-gradient-stops: var(--tw-gradient-via-stops, var(--tw-gradient-position), var(--tw-gradient-from) var(--tw-gradient-from-position), var(--tw-gradient-to) var(--tw-gradient-to-position));
   }
-  .to-neutral-700\/50 {
-    --tw-gradient-to: color-mix(in srgb, oklch(37.1% 0 0) 50%, transparent);
-    @supports (color: color-mix(in lab, red, red)) {
-      --tw-gradient-to: color-mix(in oklab, var(--color-neutral-700) 50%, transparent);
-    }
-    --tw-gradient-stops: var(--tw-gradient-via-stops, var(--tw-gradient-position), var(--tw-gradient-from) var(--tw-gradient-from-position), var(--tw-gradient-to) var(--tw-gradient-to-position));
-  }
   .to-ui-blue {
     --tw-gradient-to: var(--color-ui-blue);
     --tw-gradient-stops: var(--tw-gradient-via-stops, var(--tw-gradient-position), var(--tw-gradient-from) var(--tw-gradient-from-position), var(--tw-gradient-to) var(--tw-gradient-to-position));
@@ -1016,9 +1000,6 @@
   .bg-clip-text {
     background-clip: text;
   }
-  .\[background-position\:50\%_50\%\] {
-    background-position: 50% 50%;
-  }
   .bg-\[position\:0\%_100\%\] {
     background-position: 0% 100%;
   }
@@ -1046,9 +1027,6 @@
   .bg-\[position\:100\%_auto\] {
     background-position: 100% auto;
   }
-  .bg-\[position\:auto_100\%\] {
-    background-position: auto 100%;
-  }
   .bg-bottom-left {
     background-position: left bottom;
   }
@@ -1082,9 +1060,6 @@
   .px-2 {
     padding-inline: calc(var(--spacing) * 2);
   }
-  .px-3 {
-    padding-inline: calc(var(--spacing) * 3);
-  }
   .px-4 {
     padding-inline: calc(var(--spacing) * 4);
   }
@@ -1124,9 +1099,6 @@
   .py-12 {
     padding-block: calc(var(--spacing) * 12);
   }
-  .pt-2 {
-    padding-top: calc(var(--spacing) * 2);
-  }
   .pt-4 {
     padding-top: calc(var(--spacing) * 4);
   }
@@ -1160,9 +1132,6 @@
   .text-center {
     text-align: center;
   }
-  .font-mono {
-    font-family: var(--font-mono);
-  }
   .text-2xl {
     font-size: var(--text-2xl);
     line-height: var(--tw-leading, var(--text-2xl--line-height));
@@ -1203,9 +1172,6 @@
     font-size: var(--text-xs);
     line-height: var(--tw-leading, var(--text-xs--line-height));
   }
-  .text-\[size\:smaller\] {
-    font-size: smaller;
-  }
   .leading-6 {
     --tw-leading: calc(var(--spacing) * 6);
     line-height: calc(var(--spacing) * 6);
@@ -1303,9 +1269,6 @@
   .opacity-75 {
     opacity: 75%;
   }
-  .mix-blend-soft-light {
-    mix-blend-mode: soft-light;
-  }
   .shadow-2xl {
     --tw-shadow: 0 25px 50px -12px var(--tw-shadow-color, rgb(0 0 0 / 0.25));
     box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
@@ -1314,10 +1277,6 @@
     --tw-shadow: 0 -15px 50px -12px var(--tw-shadow-color, currentcolor);
     box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
   }
-  .shadow-inner {
-    --tw-shadow: inset 0 2px 4px 0 var(--tw-shadow-color, rgb(0 0 0 / 0.05));
-    box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
-  }
   .shadow-lg {
     --tw-shadow: 0 10px 15px -3px var(--tw-shadow-color, rgb(0 0 0 / 0.1)), 0 4px 6px -4px var(--tw-shadow-color, rgb(0 0 0 / 0.1));
     box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
@@ -1508,21 +1467,6 @@
     transition-timing-function: var(--tw-ease, var(--default-transition-timing-function));
     transition-duration: var(--tw-duration, var(--default-transition-duration));
   }
-  .transition-\[transform_background-color_box-shadow\] {
-    transition-property: transform background-color box-shadow;
-    transition-timing-function: var(--tw-ease, var(--default-transition-timing-function));
-    transition-duration: var(--tw-duration, var(--default-transition-duration));
-  }
-  .transition-\[transform_background-color_color_box-shadow\] {
-    transition-property: transform background-color color box-shadow;
-    transition-timing-function: var(--tw-ease, var(--default-transition-timing-function));
-    transition-duration: var(--tw-duration, var(--default-transition-duration));
-  }
-  .transition-\[transform_background-position\] {
-    transition-property: transform background-position;
-    transition-timing-function: var(--tw-ease, var(--default-transition-timing-function));
-    transition-duration: var(--tw-duration, var(--default-transition-duration));
-  }
   .transition-\[transform_color\] {
     transition-property: transform color;
     transition-timing-function: var(--tw-ease, var(--default-transition-timing-function));
@@ -1776,12 +1720,6 @@
       --tw-gradient-stops: var(--tw-gradient-via-stops, var(--tw-gradient-position), var(--tw-gradient-from) var(--tw-gradient-from-position), var(--tw-gradient-to) var(--tw-gradient-to-position));
     }
   }
-  .before\:text-white {
-    &::before {
-      content: var(--tw-content);
-      color: var(--color-white);
-    }
-  }
   .before\:opacity-75 {
     &::before {
       content: var(--tw-content);
@@ -2278,6 +2216,19 @@
       padding-bottom: calc(var(--spacing) * 0);
     }
   }
+  .user-invalid\:border-ui-red {
+    &:user-invalid {
+      border-color: var(--color-ui-red);
+    }
+  }
+  .user-invalid\:bg-\[color-mix\(in_oklab\,var\(--color-ui-red\)_20\%\,var\(--color-neutral-100\)\)\] {
+    &:user-invalid {
+      background-color: color-mix(in srgb,oklab(0.5656944011258305 0.17137043937370722 0.0983431730576434) 20%,oklch(97% 0 0));
+      @supports (color: color-mix(in lab, red, red)) {
+        background-color: color-mix(in oklab,var(--color-ui-red) 20%,var(--color-neutral-100));
+      }
+    }
+  }
   .focus-visible\:scale-101 {
     &:focus-visible {
       --tw-scale-x: 101%;
@@ -2478,6 +2429,16 @@
       outline-width: 3px;
     }
   }
+  .user-invalid\:focus-visible\:bg-\[color-mix\(in_oklab\,var\(--color-ui-red\)_1\%\,var\(--color-neutral-100\)\)\] {
+    &:user-invalid {
+      &:focus-visible {
+        background-color: color-mix(in srgb,oklab(0.5656944011258305 0.17137043937370722 0.0983431730576434) 1%,oklch(97% 0 0));
+        @supports (color: color-mix(in lab, red, red)) {
+          background-color: color-mix(in oklab,var(--color-ui-red) 1%,var(--color-neutral-100));
+        }
+      }
+    }
+  }
   .active\:scale-95 {
     &:active {
       --tw-scale-x: 95%;
@@ -2672,11 +2633,6 @@
       background-size: auto 100%;
     }
   }
-  .active\:\[background-position\:50\%_75\%\] {
-    &:active {
-      background-position: 50% 75%;
-    }
-  }
   .active\:text-zinc-50 {
     &:active {
       color: var(--color-zinc-50);
@@ -2853,6 +2809,16 @@
       }
     }
   }
+  .user-invalid\:active\:bg-\[color-mix\(in_oklab\,var\(--color-ui-red\)_25\%\,var\(--color-neutral-100\)\)\] {
+    &:user-invalid {
+      &:active {
+        background-color: color-mix(in srgb,oklab(0.5656944011258305 0.17137043937370722 0.0983431730576434) 25%,oklch(97% 0 0));
+        @supports (color: color-mix(in lab, red, red)) {
+          background-color: color-mix(in oklab,var(--color-ui-red) 25%,var(--color-neutral-100));
+        }
+      }
+    }
+  }
   .data-closed\:scale-50 {
     &[data-closed] {
       --tw-scale-x: 50%;
@@ -4215,6 +4181,16 @@
       }
     }
   }
+  .dark\:user-invalid\:bg-\[color-mix\(in_oklab\,var\(--color-ui-red\)_20\%\,var\(--color-neutral-800\)\)\] {
+    @media (prefers-color-scheme: dark) {
+      &:user-invalid {
+        background-color: color-mix(in srgb,oklab(0.5656944011258305 0.17137043937370722 0.0983431730576434) 20%,oklch(26.9% 0 0));
+        @supports (color: color-mix(in lab, red, red)) {
+          background-color: color-mix(in oklab,var(--color-ui-red) 20%,var(--color-neutral-800));
+        }
+      }
+    }
+  }
   .dark\:focus-visible\:bg-neutral-600 {
     @media (prefers-color-scheme: dark) {
       &:focus-visible {
@@ -4238,6 +4214,18 @@
       }
     }
   }
+  .dark\:user-invalid\:focus-visible\:bg-\[color-mix\(in_oklab\,var\(--color-ui-red\)_1\%\,var\(--color-neutral-800\)\)\] {
+    @media (prefers-color-scheme: dark) {
+      &:user-invalid {
+        &:focus-visible {
+          background-color: color-mix(in srgb,oklab(0.5656944011258305 0.17137043937370722 0.0983431730576434) 1%,oklch(26.9% 0 0));
+          @supports (color: color-mix(in lab, red, red)) {
+            background-color: color-mix(in oklab,var(--color-ui-red) 1%,var(--color-neutral-800));
+          }
+        }
+      }
+    }
+  }
   .dark\:active\:bg-neutral-800 {
     @media (prefers-color-scheme: dark) {
       &:active {
@@ -4271,6 +4259,18 @@
       }
     }
   }
+  .dark\:user-invalid\:active\:bg-\[color-mix\(in_oklab\,var\(--color-ui-red\)_25\%\,var\(--color-neutral-800\)\)\] {
+    @media (prefers-color-scheme: dark) {
+      &:user-invalid {
+        &:active {
+          background-color: color-mix(in srgb,oklab(0.5656944011258305 0.17137043937370722 0.0983431730576434) 25%,oklch(26.9% 0 0));
+          @supports (color: color-mix(in lab, red, red)) {
+            background-color: color-mix(in oklab,var(--color-ui-red) 25%,var(--color-neutral-800));
+          }
+        }
+      }
+    }
+  }
   .dark\:contrast-more\:from-zinc-300 {
     @media (prefers-color-scheme: dark) {
       @media (prefers-contrast: more) {
@@ -4721,15 +4721,6 @@
       }
     }
   }
-  .pointer-fine\:hover\:\[background-position\:50\%_0\%\] {
-    @media (pointer: fine) {
-      &:hover {
-        @media (hover: hover) {
-          background-position: 50% 0%;
-        }
-      }
-    }
-  }
   .pointer-fine\:hover\:text-zinc-50 {
     @media (pointer: fine) {
       &:hover {
@@ -4984,6 +4975,32 @@
       }
     }
   }
+  .user-invalid\:pointer-fine\:hover\:bg-\[color-mix\(in_oklab\,var\(--color-ui-red\)_10\%\,var\(--color-neutral-100\)\)\] {
+    &:user-invalid {
+      @media (pointer: fine) {
+        &:hover {
+          @media (hover: hover) {
+            background-color: color-mix(in srgb,oklab(0.5656944011258305 0.17137043937370722 0.0983431730576434) 10%,oklch(97% 0 0));
+            @supports (color: color-mix(in lab, red, red)) {
+              background-color: color-mix(in oklab,var(--color-ui-red) 10%,var(--color-neutral-100));
+            }
+          }
+        }
+      }
+    }
+  }
+  .user-invalid\:pointer-fine\:focus-visible\:bg-\[color-mix\(in_oklab\,var\(--color-ui-red\)_1\%\,var\(--color-neutral-100\)\)\] {
+    &:user-invalid {
+      @media (pointer: fine) {
+        &:focus-visible {
+          background-color: color-mix(in srgb,oklab(0.5656944011258305 0.17137043937370722 0.0983431730576434) 1%,oklch(97% 0 0));
+          @supports (color: color-mix(in lab, red, red)) {
+            background-color: color-mix(in oklab,var(--color-ui-red) 1%,var(--color-neutral-100));
+          }
+        }
+      }
+    }
+  }
   .pointer-fine\:active\:scale-99 {
     @media (pointer: fine) {
       &:active {
@@ -5033,6 +5050,18 @@
       }
     }
   }
+  .user-invalid\:pointer-fine\:active\:bg-\[color-mix\(in_oklab\,var\(--color-ui-red\)_25\%\,var\(--color-neutral-100\)\)\] {
+    &:user-invalid {
+      @media (pointer: fine) {
+        &:active {
+          background-color: color-mix(in srgb,oklab(0.5656944011258305 0.17137043937370722 0.0983431730576434) 25%,oklch(97% 0 0));
+          @supports (color: color-mix(in lab, red, red)) {
+            background-color: color-mix(in oklab,var(--color-ui-red) 25%,var(--color-neutral-100));
+          }
+        }
+      }
+    }
+  }
   .pointer-fine\:hover\:contrast-more\:from-ui-blue {
     @media (pointer: fine) {
       &:hover {
@@ -5394,6 +5423,36 @@
       }
     }
   }
+  .dark\:user-invalid\:pointer-fine\:hover\:bg-\[color-mix\(in_oklab\,var\(--color-ui-red\)_10\%\,var\(--color-neutral-800\)\)\] {
+    @media (prefers-color-scheme: dark) {
+      &:user-invalid {
+        @media (pointer: fine) {
+          &:hover {
+            @media (hover: hover) {
+              background-color: color-mix(in srgb,oklab(0.5656944011258305 0.17137043937370722 0.0983431730576434) 10%,oklch(26.9% 0 0));
+              @supports (color: color-mix(in lab, red, red)) {
+                background-color: color-mix(in oklab,var(--color-ui-red) 10%,var(--color-neutral-800));
+              }
+            }
+          }
+        }
+      }
+    }
+  }
+  .dark\:user-invalid\:pointer-fine\:focus-visible\:bg-\[color-mix\(in_oklab\,var\(--color-ui-red\)_1\%\,var\(--color-neutral-800\)\)\] {
+    @media (prefers-color-scheme: dark) {
+      &:user-invalid {
+        @media (pointer: fine) {
+          &:focus-visible {
+            background-color: color-mix(in srgb,oklab(0.5656944011258305 0.17137043937370722 0.0983431730576434) 1%,oklch(26.9% 0 0));
+            @supports (color: color-mix(in lab, red, red)) {
+              background-color: color-mix(in oklab,var(--color-ui-red) 1%,var(--color-neutral-800));
+            }
+          }
+        }
+      }
+    }
+  }
   .dark\:pointer-fine\:active\:bg-neutral-800 {
     @media (prefers-color-scheme: dark) {
       @media (pointer: fine) {
@@ -5403,6 +5462,20 @@
       }
     }
   }
+  .dark\:user-invalid\:pointer-fine\:active\:bg-\[color-mix\(in_oklab\,var\(--color-ui-red\)_25\%\,var\(--color-neutral-800\)\)\] {
+    @media (prefers-color-scheme: dark) {
+      &:user-invalid {
+        @media (pointer: fine) {
+          &:active {
+            background-color: color-mix(in srgb,oklab(0.5656944011258305 0.17137043937370722 0.0983431730576434) 25%,oklch(26.9% 0 0));
+            @supports (color: color-mix(in lab, red, red)) {
+              background-color: color-mix(in oklab,var(--color-ui-red) 25%,var(--color-neutral-800));
+            }
+          }
+        }
+      }
+    }
+  }
   .dark\:pointer-fine\:hover\:contrast-more\:from-zinc-300 {
     @media (prefers-color-scheme: dark) {
       @media (pointer: fine) {

package/dist/components/button.d.ts

@@ -10,7 +10,7 @@ export type ButtonProps<T extends HTMLButtonElement | HTMLAnchorElement | unknow
     /** The size of the border-1 radius. */
     rounded?: 'none' | 'xs' | 'sm' | 'md' | 'lg' | 'xl' | 'full';
     /** Color theme. */
-    theme?: 'blue' | 'blue-gradient' | 'brown' | 'brown-gradient' | 'green' | 'green-gradient' | 'grey' | 'grey-gradient' | 'sky-blue' | 'sky-blue-gradient' | 'magenta' | 'magenta-gradient' | 'neutral' | 'neutral-gradient' | 'orange' | 'orange-gradient' | 'pink' | 'pink-gradient' | 'primary' | 'primary-gradient' | 'primary-light' | 'purple' | 'purple-gradient' | 'red' | 'red-gradient' | 'violet' | 'violet-gradient' | 'yellow' | 'yellow-gradient';
+    theme?: 'blue' | 'blue-gradient' | 'brown' | 'brown-gradient' | 'green' | 'green-gradient' | 'grey' | 'grey-gradient' | 'sky-blue' | 'sky-blue-gradient' | 'magenta' | 'magenta-gradient' | 'neutral' | 'neutral-gradient' | 'orange' | 'orange-gradient' | 'pink' | 'pink-gradient' | 'purple' | 'purple-gradient' | 'red' | 'red-gradient' | 'violet' | 'violet-gradient' | 'yellow' | 'yellow-gradient';
 };
 import { AnchorProps } from './link';
 /**

package/dist/components/form/index.d.ts

@@ -27,4 +27,5 @@ import { FormContext, FormStatus } from '../../hooks';
 export default function Form<T extends ElementType = 'form'>({ controlled, initialStatus, ...props }: FormProps<T>): import("react/jsx-runtime").JSX.Element;
 import Input, { InputProps } from './input';
 import SubmitButton, { SubmitButtonProps } from './submit-button';
-export { Input, InputProps, SubmitButton, SubmitButtonProps };
+import Textarea, { TextareaProps } from './textarea';
+export { Input, InputProps, Textarea, TextareaProps, SubmitButton, SubmitButtonProps };

package/dist/components/form/input/index.d.ts

@@ -1,4 +1,4 @@
-import { HTMLInputTypeAttribute, RefObject } from 'react';
+import { HTMLInputTypeAttribute, ReactNode, RefObject } from 'react';
 import { OneOf } from '../../../types';
 type PasswordOptionList = {
     matchPreviousInput: boolean;
@@ -17,13 +17,13 @@ type TypeOfPasswordOrNot = OneOf<[
     }
 ]>;
 export type InputProps = Omit<HeadlessInputProps, 'name' | 'type'> & TypeOfPasswordOrNot & {
-    description?: string;
+    description?: ReactNode;
     descriptionProps?: Omit<DescriptionProps, 'children'> & {
         /** @deprecated Use the `description` prop instead. */
         children?: never;
     };
     fieldProps?: Omit<FieldProps, 'children' | 'disabled'>;
-    label?: string;
+    label?: ReactNode;
     labelProps?: Omit<LabelProps, 'children'> & {
         /** @deprecated Use the `label` prop instead. */
         children?: never;
@@ -32,5 +32,5 @@ export type InputProps = Omit<HeadlessInputProps, 'name' | 'type'> & TypeOfPassw
     ref?: RefObject<HTMLInputElement | null>;
 };
 import { DescriptionProps, FieldProps, InputProps as HeadlessInputProps, LabelProps } from '@headlessui/react';
-export default function Input({ checked, className, defaultValue, description, descriptionProps, disabled, fieldProps, invalid, label, labelProps, name, onChange, placeholder, ref, required, type, value, ...props }: InputProps): import("react/jsx-runtime").JSX.Element;
+export default function Input({ checked, className, defaultValue, description, descriptionProps, disabled, fieldProps, invalid, label, labelProps, name, onBlur, onChange, placeholder, ref, required, type, value, ...props }: InputProps): import("react/jsx-runtime").JSX.Element;
 export {};

package/dist/components/form/submit-button.d.ts

@@ -17,4 +17,4 @@ export type SubmitButtonProps = ButtonProps<HTMLButtonElement> & {
     readonly?: ReactNode;
 };
 import { ButtonProps } from '../button';
-export default function SubmitButton({ children, className, 'aria-disabled': ariaDisabled, error, incomplete, loading, success, theme, type, ref, ...props }: SubmitButtonProps): import("react/jsx-runtime").JSX.Element;
+export default function SubmitButton({ children, className, error, incomplete, loading, success, theme, type, ref, ...props }: SubmitButtonProps): import("react/jsx-runtime").JSX.Element;

package/dist/components/form/textarea.d.ts

@@ -0,0 +1,18 @@
+import { ReactNode, RefObject } from 'react';
+export type TextareaProps = Omit<HeadlessTextareaProps, 'name'> & {
+    description?: ReactNode;
+    descriptionProps?: Omit<DescriptionProps, 'children'> & {
+        /** @deprecated Use the `description` prop instead. */
+        children?: never;
+    };
+    fieldProps?: Omit<FieldProps, 'children' | 'disabled'>;
+    label?: ReactNode;
+    labelProps?: Omit<LabelProps, 'children'> & {
+        /** @deprecated Use the `label` prop instead. */
+        children?: never;
+    };
+    name: string;
+    ref?: RefObject<HTMLTextAreaElement | null>;
+};
+import { DescriptionProps, FieldProps, TextareaProps as HeadlessTextareaProps, LabelProps } from '@headlessui/react';
+export default function Textarea({ className, defaultValue, description, descriptionProps, disabled, fieldProps, invalid, label, labelProps, name, onBlur, onChange, placeholder, ref, required, value, ...props }: TextareaProps): import("react/jsx-runtime").JSX.Element;

package/dist/components/heading.d.ts

@@ -1,5 +1,13 @@
 export type HeadingProps = HTMLAttributes<HTMLHeadingElement> & {
     as?: 'h1' | 'h2' | 'h3' | 'h4' | 'h5' | 'h6';
+    customize?: Partial<{
+        h1: string;
+        h2: string;
+        h3: string;
+        h4: string;
+        h5: string;
+        h6: string;
+    }>;
     ref?: RefObject<HTMLHeadingElement | null>;
 };
 import { HTMLAttributes, RefObject } from 'react';
@@ -8,4 +16,4 @@ import { HTMLAttributes, RefObject } from 'react';
  * A heading component that renders HTML heading elements (h1-h6) with appropriate styling.
  * Automatically generates an ID for the heading based on its content if none is provided.
  */
-export default function Heading({ as, children, className, id, ref, ...props }: HeadingProps): import("react/jsx-runtime").JSX.Element;
+export default function Heading({ as, children, customize, className, id, ref, ...props }: HeadingProps): import("react/jsx-runtime").JSX.Element;

package/dist/components/index.d.ts

@@ -1,8 +1,8 @@
 import Button, { ButtonProps } from './button';
-import Form, { FormProps, FormSubmitArgs, Input, InputProps, SubmitButton, SubmitButtonProps } from './form';
+import Form, { FormProps, FormSubmitArgs, Input, InputProps, SubmitButton, SubmitButtonProps, Textarea, TextareaProps } from './form';
 import Ghost from './ghost';
 import Heading, { HeadingProps } from './heading';
 import Link, { Anchor, AnchorProps, LinkProps } from './link';
 import Modal, { ModalDialog, ModalProps, ModalTrigger } from './modal';
 import Time from './time';
-export { Anchor, AnchorProps, Button, ButtonProps, Form, FormProps, FormSubmitArgs, Ghost, Heading, HeadingProps, Input, InputProps, Link, LinkProps, Modal, ModalDialog, ModalProps, ModalTrigger, SubmitButton, SubmitButtonProps, Time, };
+export { Anchor, AnchorProps, Button, ButtonProps, Form, FormProps, FormSubmitArgs, Ghost, Heading, HeadingProps, Input, InputProps, Link, LinkProps, Modal, ModalDialog, ModalProps, ModalTrigger, SubmitButton, SubmitButtonProps, Textarea, TextareaProps, Time, };

package/dist/components/link.d.ts

@@ -1,24 +1,19 @@
-import { OneOf } from '../types';
-import { AnchorHTMLAttributes, RefObject } from 'react';
+import { AnyElementProps, OneOf } from '../types';
+import { AnchorHTMLAttributes, ElementType, RefObject } from 'react';
 export type AnchorProps = AnchorHTMLAttributes<HTMLAnchorElement> & {
     disabled?: boolean;
     ref?: RefObject<HTMLAnchorElement | null>;
 };
 export declare function Anchor({ className, disabled, href, onClick, ref, target, rel, ...props }: AnchorProps): import("react/jsx-runtime").JSX.Element;
-export type LinkProps = AnchorProps & OneOf<[
+export type LinkProps<T extends ElementType = typeof Anchor> = AnyElementProps<T, OneOf<[
     {
         type?: 'center' | 'lift' | 'ltr' | 'multiline' | 'multiline-center' | 'multiline-lift' | 'multiline-ltr' | 'multiline-rtl' | 'multiline-static' | 'normal' | 'rtl' | 'static';
     },
     {
         type?: 'fill' | 'fill-lift' | 'fill-ltr' | 'fill-rtl' | 'multiline-fill' | 'multiline-fill-center' | 'multiline-fill-ltr' | 'multiline-fill-lift' | 'multiline-fill-rtl';
-        theme?: 'blue' | 'brown' | 'green' | 'grey' | 'sky-blue' | 'magenta' | 'neutral' | 'orange' | 'pink' | 'primary' | 'purple' | 'red' | 'violet' | 'yellow';
+        theme?: 'blue' | 'brown' | 'green' | 'grey' | 'sky-blue' | 'magenta' | 'neutral' | 'orange' | 'pink' | 'purple' | 'red' | 'violet' | 'yellow';
     }
-]>;
-export declare const lineNormalClasses: string;
-export declare const lineLtrClasses: string;
-export declare const lineRtlClasses: string;
-export declare const lineCenterClasses: string;
-export declare const lineLiftClasses: string;
+]>>;
 /**
  * # Link
  *
@@ -48,4 +43,4 @@ export declare const lineLiftClasses: string;
  * @example
  *   <Link href='/about' type='fill-ltr' theme='red' title='About Us'>Learn more about our company</Link>
  */
-export default function Link({ type, theme, className, ref, ...props }: LinkProps): import("react/jsx-runtime").JSX.Element;
+export default function Link({ as, className, ref, theme, type, ...props }: LinkProps): import("react/jsx-runtime").JSX.Element;

package/dist/index.d.ts

@@ -1,6 +1,6 @@
-import { Anchor, AnchorProps, Button, ButtonProps, Form, FormProps, FormSubmitArgs, Ghost, Heading, HeadingProps, Input, InputProps, Link, LinkProps, Modal, ModalDialog, ModalProps, ModalTrigger, SubmitButton, SubmitButtonProps, Time } from './components';
+import { Anchor, AnchorProps, Button, ButtonProps, Form, FormProps, FormSubmitArgs, Ghost, Heading, HeadingProps, Input, InputProps, Link, LinkProps, Modal, ModalDialog, ModalProps, ModalTrigger, SubmitButton, SubmitButtonProps, Textarea, TextareaProps, Time } from './components';
 import { defineField, Field, FieldType, FormContext, FormContextProvider, FormStatus, FormStatusProvider, useFormContext, useFormStatus } from './hooks';
 import { Airplane, ArrowTriangle2CirclepathCircle, ArrowTriangle2CirclepathCircleFill, BagFill, Banknote, BellFill, BoltCar, BoltFill, BoltRingClosed, BoltTrianglebadgeExclamationmark, BookFill, BookmarkFill, BriefcaseFill, BubbleLeftFill, Building2Fill, Calendar, CameraFill, CarFill, CartFill, ChartBarDocHorizontal, Checkmark, CheckmarkSeal, ChevronCompactDown, ChevronDown, ChevronLeft, ChevronLeftForwardslashChevronRight, ChevronRight, ChevronUpChevronDown, CircleFill, ClockBadgeCheckmark, ClockFill, CloudFill, CubeFill, CurvePointLeft, DialHigh, DocFill, DocOnClipboard, DocOnDoc, DocOnDocFill, DocTextMagnifyingglass, DollarSign, EllipsisCircle, EllipsisCircleFill, Envelope, EnvelopeFill, Eye, ExclamationmarkOctagon, FigureWaterFitness, FlagFill, FlameFill, Folder, FolderFill, Gearshape, GearshapeFill, GiftFill, GlobeAmericasFill, House, HouseDeskclock, IPhoneHouse, LightbulbFill, LightbulbLed, ListBulletClipboardFill, LightRibbon, HareFill, HouseFill, Magnifyingglass, MapPinEllipse, MinusPlusBatteryblock, Network, NetworkShield, NewspaperFill, Number, PaperplaneFill, Person, PersonCropSquare, PersonFill, PersonFillQuestionmark, Phone, PhoneArrowUpRight, PhoneFill, PlayRectangleFill, Plus, Qrcode, RectanglePortraitAndArrowLeft, RectanglePortraitAndArrowLeftFill, Sensor, Signature, SolarPanel, SquareAndArrowDown, SquareAndArrowDownFill, SquareAndArrowUp, SquareAndArrowUpFill, SquareAndPencil, SquareAndPencilFill, TextBubble, ThreePeople, ThreeRectanglesDesktop, ThreeRectanglesDesktopFill, Trash, TrashFill, Tree, UmbrellaFill, Xmark } from './icons';
 import { AcceptsRef, AnyElementProps, AsElement, MergeTypes, OneOf, OnlyFirst } from './types';
 import { addClass, AdditionalmadoClassGroupIds, currentMonthName, currentWeekdayName, daysInMonth, easeOutExpo, emailRegex, extendMadoTailwindMerge, findComponentByType, firstOfMonth, formatPhoneNumber, getDate, getHours, getHoursIn12, getWeekdayName, getMilliseconds, getPreviousMonth, getMeridianFromHour, getMinutes, getMonth, getMonthIndexFromName, getMonthName, getNextMonth, getSeconds, getUserReadableDate, getUserReadableDateFromTimestampz, getYearsInRange, hasClass, isEmail, isPhoneNumber, MonthName, monthNamesList, removeClass, telRegex, toFullDateString, toggleClass, toLowerCase, twMerge, twSort, WeekdayName, weekdayNamesList } from './utils';
-export { Airplane, ArrowTriangle2CirclepathCircle, ArrowTriangle2CirclepathCircleFill, BagFill, Banknote, BellFill, BoltCar, BoltFill, BoltRingClosed, BoltTrianglebadgeExclamationmark, BookFill, BookmarkFill, BriefcaseFill, BubbleLeftFill, Building2Fill, Calendar, CameraFill, CarFill, CartFill, ChartBarDocHorizontal, Checkmark, CheckmarkSeal, ChevronCompactDown, ChevronDown, ChevronLeft, ChevronLeftForwardslashChevronRight, ChevronRight, ChevronUpChevronDown, CircleFill, ClockBadgeCheckmark, ClockFill, CloudFill, CubeFill, CurvePointLeft, DialHigh, DocFill, DocOnClipboard, DocOnDoc, DocOnDocFill, DocTextMagnifyingglass, DollarSign, EllipsisCircle, EllipsisCircleFill, Envelope, EnvelopeFill, Eye, ExclamationmarkOctagon, FigureWaterFitness, FlagFill, FlameFill, Folder, FolderFill, Gearshape, GearshapeFill, GiftFill, GlobeAmericasFill, House, HouseDeskclock, IPhoneHouse, LightbulbFill, LightbulbLed, ListBulletClipboardFill, LightRibbon, HareFill, HouseFill, Magnifyingglass, MapPinEllipse, MinusPlusBatteryblock, Network, NetworkShield, NewspaperFill, Number, PaperplaneFill, Person, PersonCropSquare, PersonFill, PersonFillQuestionmark, Phone, PhoneArrowUpRight, PhoneFill, PlayRectangleFill, Plus, Qrcode, RectanglePortraitAndArrowLeft, RectanglePortraitAndArrowLeftFill, Sensor, Signature, SolarPanel, SquareAndArrowDown, SquareAndArrowDownFill, SquareAndArrowUp, SquareAndArrowUpFill, SquareAndPencil, SquareAndPencilFill, TextBubble, ThreePeople, ThreeRectanglesDesktop, ThreeRectanglesDesktopFill, Trash, TrashFill, Tree, UmbrellaFill, Xmark, AcceptsRef, addClass, AdditionalmadoClassGroupIds, Anchor, AnchorProps, AnyElementProps, AsElement, Button, ButtonProps, currentMonthName, currentWeekdayName, daysInMonth, defineField, easeOutExpo, emailRegex, extendMadoTailwindMerge, Field, FieldType, findComponentByType, firstOfMonth, Form, formatPhoneNumber, FormProps, FormSubmitArgs, FormContext, FormContextProvider, FormStatus, FormStatusProvider, getDate, getHours, getHoursIn12, getWeekdayName, getMilliseconds, getPreviousMonth, getMeridianFromHour, getMinutes, getMonth, getMonthIndexFromName, getMonthName, getNextMonth, getSeconds, getUserReadableDate, getUserReadableDateFromTimestampz, getYearsInRange, Ghost, hasClass, Heading, HeadingProps, Input, InputProps, isEmail, isPhoneNumber, Link, LinkProps, MergeTypes, Modal, ModalDialog, ModalProps, ModalTrigger, MonthName, monthNamesList, OneOf, OnlyFirst, removeClass, SubmitButton, SubmitButtonProps, telRegex, Time, toFullDateString, toggleClass, toLowerCase, twMerge, twSort, useFormContext, useFormStatus, WeekdayName, weekdayNamesList, };
+export { Airplane, ArrowTriangle2CirclepathCircle, ArrowTriangle2CirclepathCircleFill, BagFill, Banknote, BellFill, BoltCar, BoltFill, BoltRingClosed, BoltTrianglebadgeExclamationmark, BookFill, BookmarkFill, BriefcaseFill, BubbleLeftFill, Building2Fill, Calendar, CameraFill, CarFill, CartFill, ChartBarDocHorizontal, Checkmark, CheckmarkSeal, ChevronCompactDown, ChevronDown, ChevronLeft, ChevronLeftForwardslashChevronRight, ChevronRight, ChevronUpChevronDown, CircleFill, ClockBadgeCheckmark, ClockFill, CloudFill, CubeFill, CurvePointLeft, DialHigh, DocFill, DocOnClipboard, DocOnDoc, DocOnDocFill, DocTextMagnifyingglass, DollarSign, EllipsisCircle, EllipsisCircleFill, Envelope, EnvelopeFill, Eye, ExclamationmarkOctagon, FigureWaterFitness, FlagFill, FlameFill, Folder, FolderFill, Gearshape, GearshapeFill, GiftFill, GlobeAmericasFill, House, HouseDeskclock, IPhoneHouse, LightbulbFill, LightbulbLed, ListBulletClipboardFill, LightRibbon, HareFill, HouseFill, Magnifyingglass, MapPinEllipse, MinusPlusBatteryblock, Network, NetworkShield, NewspaperFill, Number, PaperplaneFill, Person, PersonCropSquare, PersonFill, PersonFillQuestionmark, Phone, PhoneArrowUpRight, PhoneFill, PlayRectangleFill, Plus, Qrcode, RectanglePortraitAndArrowLeft, RectanglePortraitAndArrowLeftFill, Sensor, Signature, SolarPanel, SquareAndArrowDown, SquareAndArrowDownFill, SquareAndArrowUp, SquareAndArrowUpFill, SquareAndPencil, SquareAndPencilFill, TextBubble, ThreePeople, ThreeRectanglesDesktop, ThreeRectanglesDesktopFill, Trash, TrashFill, Tree, UmbrellaFill, Xmark, AcceptsRef, addClass, AdditionalmadoClassGroupIds, Anchor, AnchorProps, AnyElementProps, AsElement, Button, ButtonProps, currentMonthName, currentWeekdayName, daysInMonth, defineField, easeOutExpo, emailRegex, extendMadoTailwindMerge, Field, FieldType, findComponentByType, firstOfMonth, Form, formatPhoneNumber, FormProps, FormSubmitArgs, FormContext, FormContextProvider, FormStatus, FormStatusProvider, getDate, getHours, getHoursIn12, getWeekdayName, getMilliseconds, getPreviousMonth, getMeridianFromHour, getMinutes, getMonth, getMonthIndexFromName, getMonthName, getNextMonth, getSeconds, getUserReadableDate, getUserReadableDateFromTimestampz, getYearsInRange, Ghost, hasClass, Heading, HeadingProps, Input, InputProps, isEmail, isPhoneNumber, Link, LinkProps, MergeTypes, Modal, ModalDialog, ModalProps, ModalTrigger, MonthName, monthNamesList, OneOf, OnlyFirst, removeClass, SubmitButton, SubmitButtonProps, telRegex, Textarea, TextareaProps, Time, toFullDateString, toggleClass, toLowerCase, twMerge, twSort, useFormContext, useFormStatus, WeekdayName, weekdayNamesList, };