@campxdev/react-blueprint 3.0.0-alpha.1 → 3.0.0-alpha.2

package/dist/esm/types/src/components/Input/DatePicker/DatePicker.d.ts

@@ -1,4 +1,3 @@
-import * as React from 'react';
 type DateFormat = 'yyyy' | 'MMMM yyyy' | 'dd MMMM yyyy' | 'dd/MM/yyyy';
 export type DatePickerProps = {
     label?: React.ReactNode | string;
@@ -28,7 +27,8 @@ export type DatePickerProps = {
     onOpen?: () => void;
     onClose?: () => void;
     onBlur?: React.FocusEventHandler;
+    fullWidth?: boolean;
     [key: string]: any;
 };
-export declare const DatePicker: ({ label, name, value, onChange, required, format, helperText, placeholder, shortcutsItems, openPickerIcon: Icon, containerProps, error, disabled, minDate, maxDate, disablePast, disableFuture, shouldDisableDate, shouldDisableMonth, shouldDisableYear, className, onOpen, onClose, ...rest }: DatePickerProps) => import("react/jsx-runtime").JSX.Element;
+export declare const DatePicker: ({ label, name, value, onChange, required, format, helperText, placeholder, shortcutsItems, openPickerIcon: Icon, containerProps, error, disabled, minDate, maxDate, disablePast, disableFuture, shouldDisableDate, shouldDisableMonth, shouldDisableYear, className, onOpen, onClose, fullWidth, ...rest }: DatePickerProps) => import("react/jsx-runtime").JSX.Element;
 export {};

package/dist/esm/types/src/components/Input/DateTimePicker/DateTimePicker.d.ts

@@ -1,4 +1,3 @@
-import * as React from 'react';
 type DateTimePickerViews = 'year' | 'month' | 'day' | 'hours' | 'minutes' | 'seconds';
 type DateTimeFormat = 'yyyy' | 'MMMM yyyy' | 'MMM yyyy' | 'dd MMMM yyyy' | 'dd/MM/yyyy' | 'MM/dd/yyyy' | 'yyyy-MM-dd' | 'yyyy-MM-dd hh:mm a' | 'dd MMM yyyy hh:mm a' | 'dd/MM/yyyy hh:mm a' | 'yyyy-MM-dd hh:mm:ss a' | 'dd MMM yyyy hh:mm:ss a' | 'dd/MM/yyyy hh:mm:ss a' | 'hh:mm a' | 'hh:mm:ss a' | 'MMM dd, yyyy hh:mm a' | 'MMM dd, yyyy hh:mm:ss a' | 'EEE, MMM dd yyyy' | 'EEEE, MMMM dd, yyyy';
 export type DateTimePickerProps = {
@@ -30,7 +29,8 @@ export type DateTimePickerProps = {
     onOpen?: () => void;
     onClose?: () => void;
     onBlur?: React.FocusEventHandler;
+    fullWidth?: boolean;
     [key: string]: any;
 };
-export declare const DateTimePicker: ({ label, name, value, onChange, required, format, views, helperText, placeholder, shortcutsItems, openPickerIcon: Icon, containerProps, error, disabled, minDate, maxDate, disablePast, disableFuture, shouldDisableDate, shouldDisableMonth, shouldDisableYear, className, onOpen, onClose, ...rest }: DateTimePickerProps) => import("react/jsx-runtime").JSX.Element;
+export declare const DateTimePicker: ({ label, name, value, onChange, required, format, views, helperText, placeholder, shortcutsItems, openPickerIcon: Icon, containerProps, error, disabled, minDate, maxDate, disablePast, disableFuture, shouldDisableDate, shouldDisableMonth, shouldDisableYear, className, onOpen, onClose, fullWidth, ...rest }: DateTimePickerProps) => import("react/jsx-runtime").JSX.Element;
 export {};

package/dist/esm/types/src/components/Input/TextField/TextField.d.ts

@@ -7,5 +7,6 @@ export type TextFieldProps = {
     required?: boolean;
     fullWidth?: boolean;
     error?: boolean;
+    helperText?: React.ReactNode;
 } & React.ComponentProps<typeof Input>;
-export declare const TextField: ({ name, label, value, onChange, required, containerProps, description, fullWidth, className, error, ...rest }: TextFieldProps) => import("react/jsx-runtime").JSX.Element;
+export declare const TextField: ({ name, label, value, onChange, required, containerProps, description, fullWidth, className, error, helperText, ...rest }: TextFieldProps) => import("react/jsx-runtime").JSX.Element;

package/dist/esm/types/src/components/Input/Textarea/Textarea.d.ts

@@ -0,0 +1,12 @@
+import { Textarea as ShadcnTextarea } from '@/shadcn-components/Input/Textarea/Textarea';
+import * as React from 'react';
+export type TextareaProps = {
+    containerProps?: React.HTMLAttributes<HTMLDivElement>;
+    description?: string;
+    label?: React.ReactNode | string;
+    required?: boolean;
+    fullWidth?: boolean;
+    error?: boolean;
+    helperText?: React.ReactNode;
+} & React.ComponentProps<typeof ShadcnTextarea>;
+export declare const Textarea: ({ name, label, value, onChange, required, containerProps, description, fullWidth, className, error, helperText, ...rest }: TextareaProps) => import("react/jsx-runtime").JSX.Element;

package/dist/esm/types/src/components/Input/export.d.ts

@@ -17,4 +17,5 @@ export * from './Select/Select';
 export * from './SingleCheckBox/SingleCheckBox';
 export * from './SingleSelect/SingleSelect';
 export * from './Switch/Switch';
+export * from './Textarea/Textarea';
 export * from './TextField/TextField';

package/dist/esm/types/src/components/Layout/AppLayout/index.d.ts

@@ -3,3 +3,4 @@ export type { AppLayoutProps, HelpDocsAction, HelpDocsConfig } from './types';
 export { SidebarProvider, useSidebar } from './context/SidebarContext';
 export { MenuToggleButton } from './components/MenuToggleButton';
 export { UserProfilePopup } from './components/UserProfilePopup';
+export * from './components/Sidebar/interfaces';

package/dist/esm/types/src/shadcn-components/Input/Textarea/Textarea.d.ts

@@ -0,0 +1,3 @@
+import * as React from 'react';
+declare function Textarea({ className, ...props }: React.ComponentProps<'textarea'>): import("react/jsx-runtime").JSX.Element;
+export { Textarea };

package/dist/index.d.ts

@@ -510,7 +510,7 @@ type DataTableProps<TData = any> = {
 declare const DataTable: <TData extends Record<string, any> = any>(props: DataTableProps<TData>) => react_jsx_runtime.JSX.Element;
 
 declare const typographyVariants: (props?: ({
-    variant?: "blockquote" | "h1" | "h2" | "h3" | "h4" | "p" | "small" | "list" | "muted" | "inlineCode" | "lead" | "large" | null | undefined;
+    variant?: "blockquote" | "h1" | "h2" | "h3" | "h4" | "p" | "small" | "list" | "inlineCode" | "lead" | "large" | "muted" | null | undefined;
 } & class_variance_authority_dist_types.ClassProp) | undefined) => string;
 interface TypographyProps extends React$1.HTMLAttributes<HTMLElement>, VariantProps<typeof typographyVariants> {
     as?: React$1.ElementType;
@@ -627,7 +627,7 @@ declare const Button: ({ loading, disabled, children, startIcon, endIcon, fullWi
 
 type DateFormat = 'yyyy' | 'MMMM yyyy' | 'dd MMMM yyyy' | 'dd/MM/yyyy';
 type DatePickerProps = {
-    label?: React$1.ReactNode | string;
+    label?: React.ReactNode | string;
     name?: string;
     value?: Date;
     onChange?: (date: Date | undefined) => void;
@@ -639,8 +639,8 @@ type DatePickerProps = {
         getValue: () => Date;
     }[];
     required?: boolean;
-    containerProps?: React$1.HTMLAttributes<HTMLDivElement>;
-    openPickerIcon?: React$1.ReactNode;
+    containerProps?: React.HTMLAttributes<HTMLDivElement>;
+    openPickerIcon?: React.ReactNode;
     error?: any;
     disabled?: boolean;
     minDate?: Date;
@@ -653,15 +653,16 @@ type DatePickerProps = {
     className?: string;
     onOpen?: () => void;
     onClose?: () => void;
-    onBlur?: React$1.FocusEventHandler;
+    onBlur?: React.FocusEventHandler;
+    fullWidth?: boolean;
     [key: string]: any;
 };
-declare const DatePicker: ({ label, name, value, onChange, required, format, helperText, placeholder, shortcutsItems, openPickerIcon: Icon, containerProps, error, disabled, minDate, maxDate, disablePast, disableFuture, shouldDisableDate, shouldDisableMonth, shouldDisableYear, className, onOpen, onClose, ...rest }: DatePickerProps) => react_jsx_runtime.JSX.Element;
+declare const DatePicker: ({ label, name, value, onChange, required, format, helperText, placeholder, shortcutsItems, openPickerIcon: Icon, containerProps, error, disabled, minDate, maxDate, disablePast, disableFuture, shouldDisableDate, shouldDisableMonth, shouldDisableYear, className, onOpen, onClose, fullWidth, ...rest }: DatePickerProps) => react_jsx_runtime.JSX.Element;
 
 type DateTimePickerViews = 'year' | 'month' | 'day' | 'hours' | 'minutes' | 'seconds';
 type DateTimeFormat = 'yyyy' | 'MMMM yyyy' | 'MMM yyyy' | 'dd MMMM yyyy' | 'dd/MM/yyyy' | 'MM/dd/yyyy' | 'yyyy-MM-dd' | 'yyyy-MM-dd hh:mm a' | 'dd MMM yyyy hh:mm a' | 'dd/MM/yyyy hh:mm a' | 'yyyy-MM-dd hh:mm:ss a' | 'dd MMM yyyy hh:mm:ss a' | 'dd/MM/yyyy hh:mm:ss a' | 'hh:mm a' | 'hh:mm:ss a' | 'MMM dd, yyyy hh:mm a' | 'MMM dd, yyyy hh:mm:ss a' | 'EEE, MMM dd yyyy' | 'EEEE, MMMM dd, yyyy';
 type DateTimePickerProps = {
-    label?: React$1.ReactNode | string;
+    label?: React.ReactNode | string;
     name?: string;
     value?: Date;
     onChange?: (date: Date | undefined) => void;
@@ -674,8 +675,8 @@ type DateTimePickerProps = {
         getValue: () => Date;
     }[];
     required?: boolean;
-    containerProps?: React$1.HTMLAttributes<HTMLDivElement>;
-    openPickerIcon?: React$1.ReactNode;
+    containerProps?: React.HTMLAttributes<HTMLDivElement>;
+    openPickerIcon?: React.ReactNode;
     error?: any;
     disabled?: boolean;
     minDate?: Date;
@@ -688,10 +689,11 @@ type DateTimePickerProps = {
     className?: string;
     onOpen?: () => void;
     onClose?: () => void;
-    onBlur?: React$1.FocusEventHandler;
+    onBlur?: React.FocusEventHandler;
+    fullWidth?: boolean;
     [key: string]: any;
 };
-declare const DateTimePicker: ({ label, name, value, onChange, required, format, views, helperText, placeholder, shortcutsItems, openPickerIcon: Icon, containerProps, error, disabled, minDate, maxDate, disablePast, disableFuture, shouldDisableDate, shouldDisableMonth, shouldDisableYear, className, onOpen, onClose, ...rest }: DateTimePickerProps) => react_jsx_runtime.JSX.Element;
+declare const DateTimePicker: ({ label, name, value, onChange, required, format, views, helperText, placeholder, shortcutsItems, openPickerIcon: Icon, containerProps, error, disabled, minDate, maxDate, disablePast, disableFuture, shouldDisableDate, shouldDisableMonth, shouldDisableYear, className, onOpen, onClose, fullWidth, ...rest }: DateTimePickerProps) => react_jsx_runtime.JSX.Element;
 
 type FileUploadProps = {
     label: string;
@@ -957,6 +959,19 @@ interface SwitchProps extends React$1.ComponentPropsWithoutRef<typeof Switch$1>
 }
 declare const Switch: React$1.ForwardRefExoticComponent<SwitchProps & React$1.RefAttributes<HTMLButtonElement>>;
 
+declare function Textarea$1({ className, ...props }: React$1.ComponentProps<'textarea'>): react_jsx_runtime.JSX.Element;
+
+type TextareaProps = {
+    containerProps?: React$1.HTMLAttributes<HTMLDivElement>;
+    description?: string;
+    label?: React$1.ReactNode | string;
+    required?: boolean;
+    fullWidth?: boolean;
+    error?: boolean;
+    helperText?: React$1.ReactNode;
+} & React$1.ComponentProps<typeof Textarea$1>;
+declare const Textarea: ({ name, label, value, onChange, required, containerProps, description, fullWidth, className, error, helperText, ...rest }: TextareaProps) => react_jsx_runtime.JSX.Element;
+
 declare function Input({ className, type, ...props }: React$1.ComponentProps<"input">): react_jsx_runtime.JSX.Element;
 
 type TextFieldProps = {
@@ -966,8 +981,9 @@ type TextFieldProps = {
     required?: boolean;
     fullWidth?: boolean;
     error?: boolean;
+    helperText?: React$1.ReactNode;
 } & React$1.ComponentProps<typeof Input>;
-declare const TextField: ({ name, label, value, onChange, required, containerProps, description, fullWidth, className, error, ...rest }: TextFieldProps) => react_jsx_runtime.JSX.Element;
+declare const TextField: ({ name, label, value, onChange, required, containerProps, description, fullWidth, className, error, helperText, ...rest }: TextFieldProps) => react_jsx_runtime.JSX.Element;
 
 interface SideMenuItemProps {
     name: string;
@@ -982,6 +998,51 @@ interface SubMenuData {
     path: string;
     permissionKey?: string;
 }
+interface MenuState {
+    menu: SideMenuItemProps[];
+    title: string | null;
+    path: string | null;
+}
+interface GetActiveMenuProps {
+    menu: SideMenuItemProps[];
+    pathArray: string[];
+    previousMenuState: any;
+}
+interface InternalMenuClickHandlerProps {
+    menuTitle: string;
+    menuPath: string;
+    internalMenu: SideMenuItemProps[];
+}
+interface SidebarNavigationHook {
+    menuPosition: number;
+    currentMenuState: MenuState;
+    history: MenuState[];
+    internalMenuClickHandler: (params: InternalMenuClickHandlerProps) => void;
+    previousMenuClickHandler: () => void;
+}
+interface MenuItemProps {
+    index: number;
+    menuItem: SideMenuItemProps;
+    currentMenuPath: string | null;
+    internalMenuClickHandler: (params: InternalMenuClickHandlerProps) => void;
+    onClose?: () => void;
+    collapsed?: boolean;
+    setCollapsed?: any;
+}
+interface SubMenuItemProps {
+    index: number;
+    subMenuItem: SubMenuData;
+    subMenuButtonPath: string;
+}
+interface MenuBarProps {
+    currentMenuState: MenuState;
+    menuPosition: number;
+    internalMenuClickHandler: (params: InternalMenuClickHandlerProps) => void;
+    previousMenuClickHandler: () => void;
+    onClose?: () => void;
+    collapsed?: boolean;
+    setCollapsed?: any;
+}
 
 interface UserProfilePopupProps {
     /** User's full name */
@@ -1497,5 +1558,5 @@ declare const splitBreadcrumbIdSlug: (param: string) => {
 declare const isLocal: boolean;
 declare const isDevelopment: boolean;
 
-export { Accordion, ActivityLogView, Alert, AnimatedGIFs, AppLayout, Breadcrumbs, Button, Calendar, Card, CardAction, CardContent, CardDescription, CardFooter, CardHeader, Card$1 as CardRoot, CardTitle, Chip, Chips, CircularAvatar, ComingSoon, ConfirmDialog, DataTable, DatePicker, DateTimePicker, Dialog, DialogButton, DropDownButton, DropDownIcon, DropdownMenu, DropdownMenuItem, EmptyIllustration, FileUpload, FormActions, FormControlWrapper, FormWrapper, HorizontalBarChart, HorizontalStepper, IconButtons, Icons, InternalServerError, LabelWrapper, LineChart, MenuToggleButton, MultiCheckBox, MultiSelect, NoInterneConnection, NoItemFound, OtpInput, PageContent, PageHeader, PageNotFound, PasswordField, PieChart, PreviewFiles, RadioGroup, ReactJoyRide, ResourceNotFound, SearchBar, Select, Separator, Sheet, SheetClose, SheetContent, SheetDescription, SheetFooter, SheetHeader, SheetTitle, SheetTrigger, SidebarProvider, SingleCheckBox, SingleSelect, Skeleton, Snackbar, Spinner, StatusCard, Stepper, Svgs, Switch, TablePagination, TabsContainer, TextField, Timeline, Tooltip, Typography, UnAuthorized, UploadDialog, UserProfilePopup, VerticalBarChart, VerticalStepper, buttonVariants, calculateEventStats, cn, createBreadcrumbIdSlug, exportEventsToCSV, filterEventsByDateRange, generateBusinessEvents, generateRecurringEvents, getBreadcrumbsCharacter, groupEventsByDate, isDevelopment, isLocal, reactBlueprintReducers, splitBreadcrumbIdSlug, typographyVariants, useMediaQuery, usePageHeader, useParams, useSidebar, useUrlParams, validateEvent };
-export type { AccordionItemProps, Activity, ActivityAction, AlertProps, AppLayoutProps, BarChartData, BarChartProps, BarChartVariant, BreadcrumbsProps, ButtonConfig, ButtonProps, CalendarDateClickInfo, CalendarDateSelectInfo, CalendarEvent, CalendarEventClickInfo, CalendarEventDropInfo, CalendarEventResizeInfo, CalendarHeaderToolbar, CalendarProps, CalendarView, CardProps, ChartConfig, CheckboxProps, ChipProps, CircularAvatarProps, ConfirmDialogProps, ConfirmDialogType, DataTableProps, DatePickerProps, DateTimePickerProps, DialogButtonProps, DialogProps, DropdownMenuItemProps, DropdownMenuProps, EventStats, FileUploadProps, FormActionsProps, HelpDocsAction, HelpDocsConfig, HorizontalBarChartProps, IconComponent, IconProps, IconsType, LabelWrapperProps, LineChartProps, MaxWidthSize$1 as MaxWidthSize, MultiCheckboxProps, MultiSelectProps, OtpInputProps, PageHeaderProps, PaginationProps, PasswordFieldProps, PieChartProps, PreviewFilesProps, RadioGroupProps, RecurringEventConfig, SearchBarProps, SelectProps, Severity, SingleSelectProps, SnackbarPosition, SnackbarProps, StatusCardProps, StepItem, StepperProps, StepperVariantProps, SwitchProps, TabsContainerProps, TextFieldProps, TimelineItems, TimelineProps, TooltipProps, TreeMapProps, TypographyProps, UploadDialogProps, VerticalBarChartProps };
+export { Accordion, ActivityLogView, Alert, AnimatedGIFs, AppLayout, Breadcrumbs, Button, Calendar, Card, CardAction, CardContent, CardDescription, CardFooter, CardHeader, Card$1 as CardRoot, CardTitle, Chip, Chips, CircularAvatar, ComingSoon, ConfirmDialog, DataTable, DatePicker, DateTimePicker, Dialog, DialogButton, DropDownButton, DropDownIcon, DropdownMenu, DropdownMenuItem, EmptyIllustration, FileUpload, FormActions, FormControlWrapper, FormWrapper, HorizontalBarChart, HorizontalStepper, IconButtons, Icons, InternalServerError, LabelWrapper, LineChart, MenuToggleButton, MultiCheckBox, MultiSelect, NoInterneConnection, NoItemFound, OtpInput, PageContent, PageHeader, PageNotFound, PasswordField, PieChart, PreviewFiles, RadioGroup, ReactJoyRide, ResourceNotFound, SearchBar, Select, Separator, Sheet, SheetClose, SheetContent, SheetDescription, SheetFooter, SheetHeader, SheetTitle, SheetTrigger, SidebarProvider, SingleCheckBox, SingleSelect, Skeleton, Snackbar, Spinner, StatusCard, Stepper, Svgs, Switch, TablePagination, TabsContainer, TextField, Textarea, Timeline, Tooltip, Typography, UnAuthorized, UploadDialog, UserProfilePopup, VerticalBarChart, VerticalStepper, buttonVariants, calculateEventStats, cn, createBreadcrumbIdSlug, exportEventsToCSV, filterEventsByDateRange, generateBusinessEvents, generateRecurringEvents, getBreadcrumbsCharacter, groupEventsByDate, isDevelopment, isLocal, reactBlueprintReducers, splitBreadcrumbIdSlug, typographyVariants, useMediaQuery, usePageHeader, useParams, useSidebar, useUrlParams, validateEvent };
+export type { AccordionItemProps, Activity, ActivityAction, AlertProps, AppLayoutProps, BarChartData, BarChartProps, BarChartVariant, BreadcrumbsProps, ButtonConfig, ButtonProps, CalendarDateClickInfo, CalendarDateSelectInfo, CalendarEvent, CalendarEventClickInfo, CalendarEventDropInfo, CalendarEventResizeInfo, CalendarHeaderToolbar, CalendarProps, CalendarView, CardProps, ChartConfig, CheckboxProps, ChipProps, CircularAvatarProps, ConfirmDialogProps, ConfirmDialogType, DataTableProps, DatePickerProps, DateTimePickerProps, DialogButtonProps, DialogProps, DropdownMenuItemProps, DropdownMenuProps, EventStats, FileUploadProps, FormActionsProps, GetActiveMenuProps, HelpDocsAction, HelpDocsConfig, HorizontalBarChartProps, IconComponent, IconProps, IconsType, InternalMenuClickHandlerProps, LabelWrapperProps, LineChartProps, MaxWidthSize$1 as MaxWidthSize, MenuBarProps, MenuItemProps, MenuState, MultiCheckboxProps, MultiSelectProps, OtpInputProps, PageHeaderProps, PaginationProps, PasswordFieldProps, PieChartProps, PreviewFilesProps, RadioGroupProps, RecurringEventConfig, SearchBarProps, SelectProps, Severity, SideMenuItemProps, SidebarNavigationHook, SingleSelectProps, SnackbarPosition, SnackbarProps, StatusCardProps, StepItem, StepperProps, StepperVariantProps, SubMenuData, SubMenuItemProps, SwitchProps, TabsContainerProps, TextFieldProps, TextareaProps, TimelineItems, TimelineProps, TooltipProps, TreeMapProps, TypographyProps, UploadDialogProps, VerticalBarChartProps };

package/dist/styles.css

@@ -1,4 +1,4 @@
-/*! tailwindcss v4.1.16 | MIT License | https://tailwindcss.com */
+/*! tailwindcss v4.1.17 | MIT License | https://tailwindcss.com */
 @import url('https://fonts.googleapis.com/css2?family=Geist:wght@400;500;600;700&display=swap');
 @layer properties;
 @layer theme, base, components, utilities;
@@ -603,6 +603,9 @@
   .table-row {
     display: table-row;
   }
+  .field-sizing-content {
+    field-sizing: content;
+  }
   .aspect-square {
     aspect-ratio: 1 / 1;
   }
@@ -790,6 +793,9 @@
   .min-h-4 {
     min-height: calc(var(--spacing) * 4);
   }
+  .min-h-16 {
+    min-height: calc(var(--spacing) * 16);
+  }
   .min-h-\[2rem\] {
     min-height: 2rem;
   }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@campxdev/react-blueprint",
-  "version": "3.0.0-alpha.1",
+  "version": "3.0.0-alpha.2",
   "description": "React UI component library for CampX applications",
   "author": "CampX",
   "license": "MIT",

package/src/components/DataDisplay/DataTable/components/TableHeaders/TableActionHeader.tsx

@@ -33,7 +33,7 @@ const TableActionHeader = ({
     viewsProps.type,
     async (): Promise<View[]> => {
       return viewsProps.axios
-        .get(`admin/views/user-views/${viewsProps.type}`)
+        .get(`/admin/views/user-views/${viewsProps.type}`)
         .then((data) => data.data);
     },
   );

package/src/components/Input/DatePicker/DatePicker.tsx

@@ -7,7 +7,7 @@ import {
 } from '@/shadcn-components/Input/Popover/Popover';
 import { format as DateFnsFormat } from 'date-fns';
 import { CalendarDays } from 'lucide-react';
-import * as React from 'react';
+import { cloneElement, useEffect, useRef, useState } from 'react';
 import { Typography } from '../../DataDisplay/Typography/Typography';
 import { Button } from '../Button/Button';
 import { LabelWrapper } from '../LabelWrapper/LabelWrapper';
@@ -39,6 +39,7 @@ export type DatePickerProps = {
   onOpen?: () => void;
   onClose?: () => void;
   onBlur?: React.FocusEventHandler;
+  fullWidth?: boolean;
   [key: string]: any;
 };
 
@@ -66,10 +67,12 @@ export const DatePicker = ({
   className,
   onOpen,
   onClose,
+  fullWidth,
   ...rest
 }: DatePickerProps) => {
-  const [open, setOpen] = React.useState(false);
-  const [date, setDate] = React.useState<Date | undefined>(value);
+  const [open, setOpen] = useState(false);
+  const [date, setDate] = useState<Date | undefined>(value);
+  const wrapperRef = useRef<HTMLSpanElement>(null);
 
   const formatDateString = (date: Date | undefined) => {
     if (!date) return '';
@@ -90,32 +93,46 @@ export const DatePicker = ({
     }
   };
 
+  const [, forceUpdate] = useState({});
+  useEffect(() => {
+    forceUpdate({});
+  }, []);
+
   return (
     <LabelWrapper
       label={label}
       required={required}
       name={name}
-      containerProps={containerProps}
+      containerProps={{
+        ...(fullWidth && { style: { width: '100%' } }),
+        ...containerProps,
+      }}
     >
       <Popover open={open} onOpenChange={handleOpenChange}>
         <PopoverTrigger asChild>
-          <Button
-            variant="input"
-            className={cn(
-              'w-full justify-between text-left font-normal',
-              // !date && 'text-muted-foreground',
-              error && 'border-destructive',
-              className,
-            )}
-            disabled={disabled}
-            {...rest}
+          <span
+            ref={wrapperRef}
+            style={{ display: fullWidth ? 'block' : 'inline-block' }}
           >
-            <span>{date ? formatDateString(date) : placeholder}</span>
-            {Icon &&
-              React.cloneElement(Icon as React.ReactElement, {
-                className: 'ml-2 h-4 w-4',
-              })}
-          </Button>
+            <Button
+              variant="input"
+              className={cn(
+                'justify-between text-left font-normal',
+                !date && 'text-muted-foreground',
+                error && 'border-destructive',
+                fullWidth ? 'w-full' : 'w-auto',
+                className,
+              )}
+              disabled={disabled}
+              {...rest}
+            >
+              <span>{date ? formatDateString(date) : placeholder}</span>
+              {Icon &&
+                cloneElement(Icon as React.ReactElement, {
+                  className: 'ml-2 h-4 w-4',
+                })}
+            </Button>
+          </span>
         </PopoverTrigger>
         <PopoverContent className="w-auto p-0" align="start">
           <div className="flex flex-col">
@@ -199,7 +216,7 @@ export const DatePicker = ({
           variant="small"
           className={cn('ml-1 mt-1', error && 'text-destructive')}
         >
-          {error || helperText}
+          {typeof error === 'string' ? error : error?.message || helperText}
         </Typography>
       )}
     </LabelWrapper>

package/src/components/Input/DateTimePicker/DateTimePicker.tsx

@@ -8,7 +8,7 @@ import {
 } from '@/shadcn-components/Input/Popover/Popover';
 import { format as DateFnsFormat } from 'date-fns';
 import { CalendarDays } from 'lucide-react';
-import * as React from 'react';
+import { cloneElement, useEffect, useMemo, useRef, useState } from 'react';
 import { Typography } from '../../DataDisplay/Typography/Typography';
 import { Button } from '../Button/Button';
 import { LabelWrapper } from '../LabelWrapper/LabelWrapper';
@@ -68,6 +68,7 @@ export type DateTimePickerProps = {
   onOpen?: () => void;
   onClose?: () => void;
   onBlur?: React.FocusEventHandler;
+  fullWidth?: boolean;
   [key: string]: any;
 };
 
@@ -96,14 +97,16 @@ export const DateTimePicker = ({
   className,
   onOpen,
   onClose,
+  fullWidth,
   ...rest
 }: DateTimePickerProps) => {
-  const [open, setOpen] = React.useState(false);
-  const [dateTime, setDateTime] = React.useState<Date | undefined>(value);
-  const [timeValue, setTimeValue] = React.useState<string>('');
+  const [open, setOpen] = useState(false);
+  const [dateTime, setDateTime] = useState<Date | undefined>(value);
+  const [timeValue, setTimeValue] = useState<string>('');
+  const wrapperRef = useRef<HTMLSpanElement>(null);
 
   // Determine view configurations based on views prop
-  const viewConfig = React.useMemo(() => {
+  const viewConfig = useMemo(() => {
     const hasTime =
       views.includes('hours') ||
       views.includes('minutes') ||
@@ -120,7 +123,7 @@ export const DateTimePicker = ({
   }, [views]);
 
   // Update time value when dateTime changes
-  React.useEffect(() => {
+  useEffect(() => {
     if (dateTime && viewConfig.showTime) {
       const hours = dateTime.getHours(),
         minutes = dateTime.getMinutes(),
@@ -184,6 +187,11 @@ export const DateTimePicker = ({
     }
   };
 
+  const [, forceUpdate] = useState({});
+  useEffect(() => {
+    forceUpdate({});
+  }, []);
+
   // If only time selection (no date), render native time input directly
   if (viewConfig.showTime && !viewConfig.showDate) {
     return (
@@ -214,7 +222,7 @@ export const DateTimePicker = ({
             variant="small"
             className={cn('ml-1 mt-1', error && 'text-destructive')}
           >
-            {error || helperText}
+            {typeof error === 'string' ? error : error?.message || helperText}
           </Typography>
         )}
       </LabelWrapper>
@@ -226,29 +234,38 @@ export const DateTimePicker = ({
       label={label}
       required={required}
       name={name}
-      containerProps={containerProps}
+      containerProps={{
+        ...(fullWidth && { style: { width: '100%' } }),
+        ...containerProps,
+      }}
     >
       <Popover open={open} onOpenChange={handleOpenChange}>
         <PopoverTrigger asChild>
-          <Button
-            variant="input"
-            className={cn(
-              'w-full justify-between text-left font-normal',
-              !dateTime && 'text-muted-foreground',
-              error && 'border-destructive',
-              className,
-            )}
-            disabled={disabled}
-            {...rest}
+          <span
+            ref={wrapperRef}
+            style={{ display: fullWidth ? 'block' : 'inline-block' }}
           >
-            <span>
-              {dateTime ? formatDateTimeString(dateTime) : placeholder}
-            </span>
-            {Icon &&
-              React.cloneElement(Icon as React.ReactElement, {
-                className: 'ml-2 h-4 w-4 ',
-              })}
-          </Button>
+            <Button
+              variant="input"
+              className={cn(
+                'w-full justify-between text-left font-normal',
+                !dateTime && 'text-muted-foreground',
+                error && 'border-destructive',
+                fullWidth ? 'w-full' : 'w-auto',
+                className,
+              )}
+              disabled={disabled}
+              {...rest}
+            >
+              <span>
+                {dateTime ? formatDateTimeString(dateTime) : placeholder}
+              </span>
+              {Icon &&
+                cloneElement(Icon as React.ReactElement, {
+                  className: 'ml-2 h-4 w-4 ',
+                })}
+            </Button>
+          </span>
         </PopoverTrigger>
         <PopoverContent className="w-auto p-0" align="start">
           <div className="flex flex-col">
@@ -334,7 +351,7 @@ export const DateTimePicker = ({
           variant="small"
           className={cn('ml-1 mt-1', error && 'text-destructive')}
         >
-          {error || helperText}
+          {typeof error === 'string' ? error : error?.message || helperText}
         </Typography>
       )}
     </LabelWrapper>

package/src/components/Input/MultiSelect/components/MultiSelectInput.tsx

@@ -232,7 +232,7 @@ export const MultiSelectInput = ({
           variant="muted"
           className={cn('text-xs', error && 'text-destructive')}
         >
-          {error || helperText}
+          {typeof error === 'string' ? error : error?.message || helperText}
         </Typography>
       )}
     </LabelWrapper>

package/src/components/Input/SingleSelect/components/SingleInput.tsx

@@ -198,7 +198,7 @@ export const SingleInput = ({
           variant="muted"
           className={cn('text-xs', error && 'text-destructive')}
         >
-          {error || helperText}
+          {typeof error === 'string' ? error : error?.message || helperText}
         </Typography>
       )}
     </LabelWrapper>

package/src/components/Input/TextField/TextField.tsx

@@ -11,6 +11,7 @@ export type TextFieldProps = {
   required?: boolean;
   fullWidth?: boolean;
   error?: boolean;
+  helperText?: React.ReactNode;
 } & React.ComponentProps<typeof Input>;
 
 export const TextField = ({
@@ -24,6 +25,7 @@ export const TextField = ({
   fullWidth,
   className,
   error = false,
+  helperText,
   ...rest
 }: TextFieldProps) => {
   return (
@@ -50,6 +52,11 @@ export const TextField = ({
         aria-invalid={error}
         {...rest}
       />
+      {helperText && (
+        <Typography variant="muted" className={cn(error && 'text-destructive')}>
+          {helperText}
+        </Typography>
+      )}
       {description && (
         <Typography variant="muted" className={cn(error && 'text-destructive')}>
           {description}

package/src/components/Input/Textarea/Textarea.tsx

@@ -0,0 +1,67 @@
+import { cn } from '@/lib/utils';
+import { Typography } from '@/shadcn-components/DataDisplay/Typography/Typography';
+import { Textarea as ShadcnTextarea } from '@/shadcn-components/Input/Textarea/Textarea';
+import * as React from 'react';
+import { LabelWrapper } from '../LabelWrapper/LabelWrapper';
+
+export type TextareaProps = {
+  containerProps?: React.HTMLAttributes<HTMLDivElement>;
+  description?: string;
+  label?: React.ReactNode | string;
+  required?: boolean;
+  fullWidth?: boolean;
+  error?: boolean;
+  helperText?: React.ReactNode;
+} & React.ComponentProps<typeof ShadcnTextarea>;
+
+export const Textarea = ({
+  name,
+  label,
+  value,
+  onChange,
+  required = false,
+  containerProps,
+  description,
+  fullWidth,
+  className,
+  error = false,
+  helperText,
+  ...rest
+}: TextareaProps) => {
+  return (
+    <LabelWrapper
+      label={label}
+      required={required}
+      name={name}
+      containerProps={{
+        ...(fullWidth && { style: { width: '100%' } }),
+        ...containerProps,
+      }}
+    >
+      <ShadcnTextarea
+        id={name}
+        value={value}
+        name={name}
+        onChange={onChange}
+        className={cn(
+          fullWidth && 'w-full',
+          'bg-input-background border-none placeholder:text-muted-foreground',
+          className,
+        )}
+        required={required}
+        aria-invalid={error}
+        {...rest}
+      />
+      {helperText && (
+        <Typography variant="muted" className={cn(error && 'text-destructive')}>
+          {helperText}
+        </Typography>
+      )}
+      {description && (
+        <Typography variant="muted" className={cn(error && 'text-destructive')}>
+          {description}
+        </Typography>
+      )}
+    </LabelWrapper>
+  );
+};

package/src/components/Input/export.ts

@@ -17,4 +17,5 @@ export * from './Select/Select';
 export * from './SingleCheckBox/SingleCheckBox';
 export * from './SingleSelect/SingleSelect';
 export * from './Switch/Switch';
+export * from './Textarea/Textarea';
 export * from './TextField/TextField';