add width, v0.1.10

src/components/Button.tsx

@@ -11,6 +11,7 @@ type ButtonProps = {
     type: ButtonType;
     variant?: ButtonVariant;
     size?: ComponentSize;
+    width?: ComponentSize;
     to?: string;
     htmlType?: NativeButtonType;
     onClick?: MouseEventHandler<HTMLElement>;
@@ -24,14 +25,14 @@ const SIZE_CLASS: Record<ComponentSize, string> = {
     sm: 'h-8 px-3 text-xs',
     md: 'h-10 px-4 text-sm',
     lg: 'h-12 px-5 text-base',
-    full: 'h-10 w-full px-4 text-sm',
+    full: 'h-10 px-4 text-sm',
 };
 
 const ICON_ONLY_SIZE_CLASS: Record<ComponentSize, string> = {
     sm: 'h-8 w-8 !p-0',
     md: 'h-10 w-10 !p-0',
     lg: 'h-12 w-12 !p-0',
-    full: 'h-10 w-full !p-0',
+    full: 'h-10 w-10 !p-0',
 };
 
 const ICON_CLASS: Record<ComponentSize, string> = {
@@ -48,6 +49,13 @@ const ICON_ONLY_CLASS: Record<ComponentSize, string> = {
     full: 'h-5 w-5',
 };
 
+const WIDTH_CLASS: Record<ComponentSize, string> = {
+    sm: 'max-w-xs',
+    md: '',
+    lg: 'max-w-md',
+    full: 'w-full max-w-none',
+};
+
 const TYPE_CLASS: Record<ButtonType, string> = {
     solid: 'btn-solid',
     outlined: 'btn-outlined',
@@ -73,6 +81,7 @@ export function Button({
     type,
     variant,
     size = 'md',
+    width = 'md',
     to,
     htmlType = 'button',
     onClick,
@@ -87,6 +96,7 @@ export function Button({
         TYPE_CLASS[type],
         VARIANT_CLASS[resolvedVariant],
         isIconOnly ? ICON_ONLY_SIZE_CLASS[size] : SIZE_CLASS[size],
+        WIDTH_CLASS[width],
         Icon && label ? 'gap-1.5' : '',
         disabled ? 'pointer-events-none cursor-not-allowed opacity-45 saturate-50' : '',
         className,