add width, v0.1.10

src/components/DatePicker.tsx

@@ -9,6 +9,7 @@ export type DatePickerProps = {
     placeholder?: string;
     type: DatePickerKind;
     size?: ComponentSize;
+    width?: ComponentSize;
     layout?: Layout;
     value: string;
     name?: string;
@@ -28,6 +29,7 @@ export function DatePicker({
     placeholder = '',
     type,
     size = 'md',
+    width = 'md',
     layout = 'stacked',
     value,
     name,
@@ -41,12 +43,12 @@ export function DatePicker({
     className = '',
     inputClassName = '',
 }: Readonly<DatePickerProps>) {
-    const containerSizeClass = {
+    const containerWidthClass = {
         sm: 'max-w-xs',
         md: 'max-w-sm',
         lg: 'max-w-md',
         full: 'max-w-none',
-    }[size];
+    }[width];
 
     const inputSizeClass = {
         sm: 'h-8 !text-xs',
@@ -63,7 +65,7 @@ export function DatePicker({
 
     return (
         <label
-            className={`${wrapperClass} text-sm font-medium ${disabled ? 'ui-label-disabled' : 'ui-label'} ${containerSizeClass} ${className}`.trim()}
+            className={`${wrapperClass} text-sm font-medium ${disabled ? 'ui-label-disabled' : 'ui-label'} ${containerWidthClass} ${className}`.trim()}
         >
             {label ? <span className={labelClass}>{label}</span> : null}
             <div className={inputWrapperClass}>