datepicker placeholder, tabs default

package.json

@@ -1,6 +1,6 @@
 {
   "name": "@raidguild/design-system",
-  "version": "0.5.7",
+  "version": "0.5.8",
   "license": "MIT",
   "author": "Raid Guild",
   "main": "./dist/src/index.js",

src/components/forms/DatePicker/CustomDatePickerButton.tsx

@@ -5,6 +5,7 @@ export type CustomDatePickerButtonProps = ChakraButtonProps & {
   value?: React.ReactNode;
   onClick?: () => void;
   ref?: HTMLInputElement;
+  placeholder?: string;
 };
 
 export type CustomDatePickerButton = CustomDatePickerButtonProps & {
@@ -13,9 +14,12 @@ export type CustomDatePickerButton = CustomDatePickerButtonProps & {
 
 export const CustomDatePickerButton: React.FC<CustomDatePickerButtonProps> =
   forwardRef<CustomDatePickerButtonProps, 'button'>(
-    ({ value, onClick, variant = 'outline' }, ref) => (
+    (
+      { value, onClick, placeholder = 'Select Date', variant = 'outline' },
+      ref
+    ) => (
       <Button onClick={onClick} ref={ref} variant={variant}>
-        {value}
+        {value || placeholder}
       </Button>
     )
   );

src/components/forms/DatePicker/DatePicker.tsx

@@ -26,6 +26,7 @@ export type DatePickerProps = {
   localForm: Pick<UseFormReturn, 'control' | 'formState' | 'watch'>;
   registerOptions?: RegisterOptions;
   tooltip?: string;
+  placeholder?: string;
   variant?: string;
   spacing?: number | string;
 } & Omit<ReactDatePickerProps, 'onChange'>;
@@ -36,6 +37,8 @@ const DatePicker: React.FC<DatePickerProps> = ({
   localForm,
   registerOptions,
   tooltip,
+  placeholderText, // default prop from react-datepicker
+  placeholder, // match rest of inputs for consistency, takes priority
   variant = 'ghost',
   spacing,
   ...props
@@ -89,7 +92,12 @@ const DatePicker: React.FC<DatePickerProps> = ({
               {...props}
               {...field}
               selected={watch?.(name)}
-              customInput={<CustomDatePickerButton variant={variant} />}
+              customInput={
+                <CustomDatePickerButton
+                  variant={variant}
+                  placeholder={placeholder || placeholderText}
+                />
+              }
               ref={(ref) => {
                 field.ref({
                   focus: ref?.setFocus,

src/stories/forms/DatePicker.stories.tsx

@@ -24,6 +24,7 @@ const DatePicker: StoryFn<typeof DatePickerComponent> = () => {
         <DatePickerComponent
           name='raidStartDate'
           localForm={localForm}
+          placeholder='Select a date'
           label='Raid Start Date'
           tooltip='The date the raid is expected to start'
         />

src/theme/components/Tabs.ts

@@ -25,5 +25,8 @@ const Tabs = {
       },
     },
   },
+  defaultProps: {
+    variant: 'default',
+  },
 };
 export default Tabs;