@campxdev/react-blueprint 3.0.0-alpha.3 → 3.0.0-alpha.5

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

@@ -28,7 +28,8 @@ export type DatePickerProps = {
     onClose?: () => void;
     onBlur?: React.FocusEventHandler;
     fullWidth?: boolean;
+    type?: 'input' | 'filter';
     [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, fullWidth, ...rest }: DatePickerProps) => import("react/jsx-runtime").JSX.Element;
+export declare const DatePicker: ({ type, ...props }: DatePickerProps) => import("react/jsx-runtime").JSX.Element;
 export {};

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

@@ -0,0 +1,2 @@
+import { DatePickerProps } from '../DatePicker';
+export declare const DatePickerFilter: ({ label, value, onChange, format, placeholder, shortcutsItems, openPickerIcon: Icon, disabled, minDate, maxDate, disablePast, disableFuture, shouldDisableDate, shouldDisableMonth, shouldDisableYear, className, onOpen, onClose, fullWidth, type, ...rest }: DatePickerProps) => import("react/jsx-runtime").JSX.Element;

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

@@ -0,0 +1,2 @@
+import { DatePickerProps } from '../DatePicker';
+export declare const DatePickerInput: ({ 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, type, ...rest }: DatePickerProps) => import("react/jsx-runtime").JSX.Element;

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

@@ -30,7 +30,8 @@ export type DateTimePickerProps = {
     onClose?: () => void;
     onBlur?: React.FocusEventHandler;
     fullWidth?: boolean;
+    type?: 'input' | 'filter';
     [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, fullWidth, ...rest }: DateTimePickerProps) => import("react/jsx-runtime").JSX.Element;
+export declare const DateTimePicker: ({ type, ...props }: DateTimePickerProps) => import("react/jsx-runtime").JSX.Element;
 export {};

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

@@ -0,0 +1,2 @@
+import { DateTimePickerProps } from '../DateTimePicker';
+export declare const DateTimePickerFilter: ({ label, value, onChange, format, views, placeholder, shortcutsItems, disabled, minDate, maxDate, disablePast, disableFuture, shouldDisableDate, shouldDisableMonth, shouldDisableYear, className, onOpen, onClose, fullWidth, type, ...rest }: DateTimePickerProps) => import("react/jsx-runtime").JSX.Element;

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

@@ -0,0 +1,2 @@
+import { DateTimePickerProps } from '../DateTimePicker';
+export declare const DateTimePickerInput: ({ 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, type, ...rest }: DateTimePickerProps) => import("react/jsx-runtime").JSX.Element;

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

@@ -35,6 +35,8 @@ export type MultiSelectProps = {
     type?: 'input' | 'filter';
     disableClear?: boolean;
     fullWidth?: boolean;
+    disabled?: boolean;
+    loading?: boolean;
 };
 export declare const MultiSelect: ({ options, optionsApiEndPoint, optionsApiEndpointParams, externalAxios, getValue, value, onChange, dbValueProps, dbLabelProps, onOpen, onClose, type, ...restProps }: MultiSelectProps) => import("react/jsx-runtime").JSX.Element;
 export default MultiSelect;

package/dist/esm/types/src/components/Input/MultiSelect/components/MultiSelectFilter.d.ts

@@ -11,4 +11,4 @@ export type MultiSelectFilterProps = {
     handleClearAll: () => void;
     state: MultiSelectState;
 } & MultiSelectProps;
-export declare const MultiSelectFilter: ({ optionsApiEndPoint, label, name, value, onChange, searchDb, handleOpen, handleClose, handleScroll, handleSelectOption, handleClearAll, state, disableClear, }: MultiSelectFilterProps) => import("react/jsx-runtime").JSX.Element;
+export declare const MultiSelectFilter: ({ optionsApiEndPoint, label, name, value, onChange, searchDb, handleOpen, handleClose, handleScroll, handleSelectOption, handleClearAll, state, disableClear, disabled, loading, }: MultiSelectFilterProps) => import("react/jsx-runtime").JSX.Element;

package/dist/esm/types/src/components/Input/MultiSelect/components/MultiSelectInput.d.ts

@@ -11,4 +11,4 @@ export type MultiSelectInputProps = {
     handleClearAll: () => void;
     state: MultiSelectState;
 } & MultiSelectProps;
-export declare const MultiSelectInput: ({ optionsApiEndPoint, required, label, name, getValue, value, onChange, error, helperText, searchDb, handleOpen, handleClose, handleScroll, handleSelectOption, handleClearAll, state, disableClear, fullWidth, }: MultiSelectInputProps) => import("react/jsx-runtime").JSX.Element;
+export declare const MultiSelectInput: ({ optionsApiEndPoint, required, label, name, getValue, value, onChange, error, helperText, searchDb, handleOpen, handleClose, handleScroll, handleSelectOption, handleClearAll, state, disableClear, fullWidth, disabled, loading, }: MultiSelectInputProps) => import("react/jsx-runtime").JSX.Element;

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

@@ -12,5 +12,6 @@ export type SelectProps = {
     className?: string;
     disabled?: boolean;
     fullWidth?: boolean;
+    loading?: boolean;
 };
-export declare const Select: ({ options, onChange, value, placeholder, className, defaultValue, disabled, fullWidth, }: SelectProps) => import("react/jsx-runtime").JSX.Element;
+export declare const Select: ({ options, onChange, value, placeholder, className, defaultValue, disabled, fullWidth, loading, }: SelectProps) => import("react/jsx-runtime").JSX.Element;

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

@@ -35,6 +35,8 @@ export type SingleSelectProps = {
     type?: 'input' | 'filter';
     disableClear?: boolean;
     fullWidth?: boolean;
+    disabled?: boolean;
+    loading?: boolean;
 };
 export declare const SingleSelect: ({ options, optionsApiEndPoint, optionsApiEndpointParams, externalAxios, getValue, value, onChange, dbValueProps, dbLabelProps, onOpen, onClose, type, ...restProps }: SingleSelectProps) => import("react/jsx-runtime").JSX.Element;
 export default SingleSelect;

package/dist/esm/types/src/components/Input/SingleSelect/components/SingleFilter.d.ts

@@ -9,4 +9,4 @@ export type SingleFilterProps = {
     handleScroll: (event: any) => Promise<void>;
     state: SingleSelectState;
 } & SingleSelectProps;
-export declare const SingleFilter: ({ optionsApiEndPoint, label, name, value, onChange, searchDb, handleOpen, handleClose, handleScroll, state, disableClear, fullWidth, }: SingleFilterProps) => import("react/jsx-runtime").JSX.Element;
+export declare const SingleFilter: ({ optionsApiEndPoint, label, name, value, onChange, searchDb, handleOpen, handleClose, handleScroll, state, disableClear, fullWidth, disabled, loading, }: SingleFilterProps) => import("react/jsx-runtime").JSX.Element;

package/dist/esm/types/src/components/Input/SingleSelect/components/SingleInput.d.ts

@@ -9,4 +9,4 @@ export type SingleInputProps = {
     handleScroll: (event: any) => Promise<void>;
     state: SingleSelectState;
 } & SingleSelectProps;
-export declare const SingleInput: ({ optionsApiEndPoint, required, label, name, getValue, value, onChange, error, helperText, searchDb, handleOpen, handleClose, handleScroll, state, fullWidth, }: SingleInputProps) => import("react/jsx-runtime").JSX.Element;
+export declare const SingleInput: ({ optionsApiEndPoint, required, label, name, getValue, value, onChange, error, helperText, searchDb, handleOpen, handleClose, handleScroll, state, fullWidth, disabled, loading, }: SingleInputProps) => import("react/jsx-runtime").JSX.Element;

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

@@ -1,5 +1,5 @@
-import * as React from 'react';
 import * as SelectPrimitive from '@radix-ui/react-select';
+import * as React from 'react';
 declare const Select: React.FC<SelectPrimitive.SelectProps>;
 declare const SelectGroup: React.ForwardRefExoticComponent<SelectPrimitive.SelectGroupProps & React.RefAttributes<HTMLDivElement>>;
 declare const SelectValue: React.ForwardRefExoticComponent<SelectPrimitive.SelectValueProps & React.RefAttributes<HTMLSpanElement>>;
@@ -10,4 +10,4 @@ declare const SelectContent: React.ForwardRefExoticComponent<Omit<SelectPrimitiv
 declare const SelectLabel: React.ForwardRefExoticComponent<Omit<SelectPrimitive.SelectLabelProps & React.RefAttributes<HTMLDivElement>, "ref"> & React.RefAttributes<HTMLDivElement>>;
 declare const SelectItem: React.ForwardRefExoticComponent<Omit<SelectPrimitive.SelectItemProps & React.RefAttributes<HTMLDivElement>, "ref"> & React.RefAttributes<HTMLDivElement>>;
 declare const SelectSeparator: React.ForwardRefExoticComponent<Omit<SelectPrimitive.SelectSeparatorProps & React.RefAttributes<HTMLDivElement>, "ref"> & React.RefAttributes<HTMLDivElement>>;
-export { Select, SelectGroup, SelectValue, SelectTrigger, SelectContent, SelectLabel, SelectItem, SelectSeparator, SelectScrollUpButton, SelectScrollDownButton, };
+export { Select, SelectContent, SelectGroup, SelectItem, SelectLabel, SelectScrollDownButton, SelectScrollUpButton, SelectSeparator, SelectTrigger, SelectValue, };

package/dist/index.d.ts

@@ -437,7 +437,7 @@ interface CardProps extends Omit<React$1.ComponentProps<typeof Card$1>, 'title'
 declare const Card: React$1.ForwardRefExoticComponent<Omit<CardProps, "ref"> & React$1.RefAttributes<HTMLDivElement>>;
 
 declare const badgeVariants: (props?: ({
-    variant?: "default" | "destructive" | "outline" | "secondary" | null | undefined;
+    variant?: "default" | "secondary" | "destructive" | "outline" | null | undefined;
 } & class_variance_authority_dist_types.ClassProp) | undefined) => string;
 declare function Badge({ className, variant, asChild, ...props }: React$1.ComponentProps<'span'> & VariantProps<typeof badgeVariants> & {
     asChild?: boolean;
@@ -513,7 +513,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" | "inlineCode" | "lead" | "large" | "muted" | null | undefined;
+    variant?: "blockquote" | "h1" | "h2" | "h3" | "h4" | "p" | "small" | "list" | "muted" | "inlineCode" | "lead" | "large" | null | undefined;
 } & class_variance_authority_dist_types.ClassProp) | undefined) => string;
 interface TypographyProps extends React$1.HTMLAttributes<HTMLElement>, VariantProps<typeof typographyVariants> {
     as?: React$1.ElementType;
@@ -615,7 +615,7 @@ type TooltipProps = {
 declare const Tooltip: ({ children, title, placement, open, defaultOpen, onOpenChange, delayDuration, }: TooltipProps) => react_jsx_runtime.JSX.Element;
 
 declare const buttonVariants: (props?: ({
-    variant?: "input" | "link" | "default" | "destructive" | "outline" | "secondary" | "ghost" | null | undefined;
+    variant?: "input" | "link" | "default" | "secondary" | "destructive" | "outline" | "ghost" | null | undefined;
     size?: "default" | "sm" | "lg" | "icon" | "icon-sm" | "icon-lg" | null | undefined;
 } & class_variance_authority_dist_types.ClassProp) | undefined) => string;
 
@@ -658,9 +658,10 @@ type DatePickerProps = {
     onClose?: () => void;
     onBlur?: React.FocusEventHandler;
     fullWidth?: boolean;
+    type?: 'input' | 'filter';
     [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, fullWidth, ...rest }: DatePickerProps) => react_jsx_runtime.JSX.Element;
+declare const DatePicker: ({ type, ...props }: 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';
@@ -694,9 +695,10 @@ type DateTimePickerProps = {
     onClose?: () => void;
     onBlur?: React.FocusEventHandler;
     fullWidth?: boolean;
+    type?: 'input' | 'filter';
     [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, fullWidth, ...rest }: DateTimePickerProps) => react_jsx_runtime.JSX.Element;
+declare const DateTimePicker: ({ type, ...props }: DateTimePickerProps) => react_jsx_runtime.JSX.Element;
 
 type FileUploadProps = {
     label: string;
@@ -823,6 +825,8 @@ type MultiSelectProps = {
     type?: 'input' | 'filter';
     disableClear?: boolean;
     fullWidth?: boolean;
+    disabled?: boolean;
+    loading?: boolean;
 };
 declare const MultiSelect: ({ options, optionsApiEndPoint, optionsApiEndpointParams, externalAxios, getValue, value, onChange, dbValueProps, dbLabelProps, onOpen, onClose, type, ...restProps }: MultiSelectProps) => react_jsx_runtime.JSX.Element;
 
@@ -902,8 +906,9 @@ type SelectProps = {
     className?: string;
     disabled?: boolean;
     fullWidth?: boolean;
+    loading?: boolean;
 };
-declare const Select: ({ options, onChange, value, placeholder, className, defaultValue, disabled, fullWidth, }: SelectProps) => react_jsx_runtime.JSX.Element;
+declare const Select: ({ options, onChange, value, placeholder, className, defaultValue, disabled, fullWidth, loading, }: SelectProps) => react_jsx_runtime.JSX.Element;
 
 type CheckboxProps = {
     label: ReactNode;
@@ -953,6 +958,8 @@ type SingleSelectProps = {
     type?: 'input' | 'filter';
     disableClear?: boolean;
     fullWidth?: boolean;
+    disabled?: boolean;
+    loading?: boolean;
 };
 declare const SingleSelect: ({ options, optionsApiEndPoint, optionsApiEndpointParams, externalAxios, getValue, value, onChange, dbValueProps, dbLabelProps, onOpen, onClose, type, ...restProps }: SingleSelectProps) => react_jsx_runtime.JSX.Element;
 

package/dist/styles.css

@@ -1,7 +1,7 @@
 /*! 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;
+@import url('https://fonts.googleapis.com/css2?family=Geist:wght@400;500;600;700&display=swap');
 @layer theme {
   :root, :host {
     --font-sans: ui-sans-serif, system-ui, sans-serif, "Apple Color Emoji",
@@ -94,6 +94,7 @@
     --ease-in: cubic-bezier(0.4, 0, 1, 1);
     --ease-out: cubic-bezier(0, 0, 0.2, 1);
     --ease-in-out: cubic-bezier(0.4, 0, 0.2, 1);
+    --animate-spin: spin 1s linear infinite;
     --animate-pulse: pulse 2s cubic-bezier(0.4, 0, 0.6, 1) infinite;
     --aspect-video: 16 / 9;
     --default-transition-duration: 150ms;
@@ -432,9 +433,6 @@
   .z-\[1500\] {
     z-index: 1500;
   }
-  .z-\[2000\] {
-    z-index: 2000;
-  }
   .z-\[9999\] {
     z-index: 9999;
   }
@@ -1061,6 +1059,9 @@
   .animate-pulse {
     animation: var(--animate-pulse);
   }
+  .animate-spin {
+    animation: var(--animate-spin);
+  }
   .cursor-default {
     cursor: default;
   }
@@ -1649,6 +1650,9 @@
   .py-6 {
     padding-block: calc(var(--spacing) * 6);
   }
+  .py-8 {
+    padding-block: calc(var(--spacing) * 8);
+  }
   .py-\[0\.2rem\] {
     padding-block: 0.2rem;
   }
@@ -1823,6 +1827,9 @@
   .break-all {
     word-break: break-all;
   }
+  .text-ellipsis {
+    text-overflow: ellipsis;
+  }
   .whitespace-nowrap {
     white-space: nowrap;
   }
@@ -3880,6 +3887,7 @@
   --yellow-background: oklch(0.82 0.166 94.2 / 0.2);
   --default-background: oklch(0.978 0.004 233.756);
   --input-background: oklch(0.953 0.002 264);
+  --font-sans: 'Geist', ui-sans-serif, system-ui, sans-serif;
 }
 .dark {
   --background: oklch(0.145 0 0);
@@ -3928,6 +3936,7 @@
   --yellow-background: oklch(0.82 0.166 94.2 / 0.2);
   --default-background: oklch(0.154 0.013 233.756);
   --input-background: oklch(0.215 0.008 264);
+  --font-sans: 'Geist', ui-sans-serif, system-ui, sans-serif;
 }
 @layer base {
   * {
@@ -3944,6 +3953,7 @@
   body {
     height: 100%;
     overflow: auto;
+    -webkit-font-smoothing: antialiased;
     background-color: var(--background);
     font-family: var(--font-sans);
     color: var(--foreground);
@@ -4045,6 +4055,359 @@
     transform: scale(0.95);
   }
 }
+.react-joyride__tooltip {
+  background-color: #ffffff !important;
+  border-radius: 12px !important;
+  box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04) !important;
+  border: 1px solid #f3f4f6 !important;
+  font-family: 'Roboto', -apple-system, BlinkMacSystemFont, sans-serif !important;
+  padding-top: 16px !important;
+}
+.react-joyride__tooltip div {
+  text-align: left !important;
+}
+.react-joyride__tooltip > div:nth-child(1) div:nth-child(2) {
+  padding: 0 !important;
+  font-size: 14px !important;
+  line-height: 1.5 !important;
+  color: #4b5563 !important;
+}
+.react-joyride__tooltip button[data-action="skip"] {
+  top: 16px !important;
+  right: 16px !important;
+}
+.react-joyride__beacon {
+  background-color: #3b82f6 !important;
+  border: 3px solid #3b82f6 !important;
+  border-radius: 50% !important;
+  box-shadow: 0 0 0 6px rgba(59, 130, 246, 0.2) !important;
+}
+.react-joyride__beacon::before {
+  background-color: #3b82f6 !important;
+  animation: joyride-beacon-pulse 1.5s ease-in-out infinite !important;
+}
+.react-joyride__tooltip button[data-action="next"]:hover {
+  background-color: #000000 !important;
+  transform: translateY(-1px) !important;
+}
+.react-joyride__tooltip button[data-action="back"]:hover {
+  background-color: #f9fafb !important;
+  border-color: #d1d5db !important;
+}
+.react-joyride__tooltip button[data-action="skip"]:hover {
+  background-color: #f3f4f6 !important;
+  color: #374151 !important;
+}
+.react-joyride__tooltip .react-joyride__tooltip-footer {
+  margin-top: 16px !important;
+  padding-top: 16px !important;
+  border-top: 1px solid #f3f4f6 !important;
+}
+.react-joyride__tooltip-arrow {
+  filter: drop-shadow(0 1px 3px rgba(0, 0, 0, 0.1)) !important;
+}
+@keyframes joyride-beacon-pulse {
+  0% {
+    transform: scale(1);
+    opacity: 1;
+  }
+  50% {
+    transform: scale(1.2);
+    opacity: 0.7;
+  }
+  100% {
+    transform: scale(1);
+    opacity: 1;
+  }
+}
+.buttonLoader {
+  max-height: 40px;
+  padding: 10px 20px;
+  font-size: '14px';
+  aspect-ratio: 2.5;
+  --_g: no-repeat radial-gradient(circle, currentColor 48%, #0000);
+  background: var(--_g), var(--_g), var(--_g), var(--_g);
+  background-size: 15% 40%;
+  animation: l44 1s infinite linear alternate;
+  scale: 0.5;
+}
+@keyframes l44 {
+  0%,
+  5% {
+    background-position: calc(0 * 100% / 3) 50%, calc(1 * 100% / 3) 50%,
+      calc(2 * 100% / 3) 50%, calc(3 * 100% / 3) 50%;
+  }
+  12.5% {
+    background-position: calc(0 * 100% / 3) 0, calc(1 * 100% / 3) 50%,
+      calc(2 * 100% / 3) 50%, calc(3 * 100% / 3) 50%;
+  }
+  25% {
+    background-position: calc(0 * 100% / 3) 0, calc(1 * 100% / 3) 0,
+      calc(2 * 100% / 3) 50%, calc(3 * 100% / 3) 50%;
+  }
+  37.5% {
+    background-position: calc(0 * 100% / 3) 100%, calc(1 * 100% / 3) 0,
+      calc(2 * 100% / 3) 0, calc(3 * 100% / 3) 50%;
+  }
+  50% {
+    background-position: calc(0 * 100% / 3) 100%, calc(1 * 100% / 3) 100%,
+      calc(2 * 100% / 3) 0, calc(3 * 100% / 3) 0;
+  }
+  62.5% {
+    background-position: calc(0 * 100% / 3) 50%, calc(1 * 100% / 3) 100%,
+      calc(2 * 100% / 3) 100%, calc(3 * 100% / 3) 0;
+  }
+  75% {
+    background-position: calc(0 * 100% / 3) 50%, calc(1 * 100% / 3) 50%,
+      calc(2 * 100% / 3) 100%, calc(3 * 100% / 3) 100%;
+  }
+  87.5% {
+    background-position: calc(0 * 100% / 3) 50%, calc(1 * 100% / 3) 50%,
+      calc(2 * 100% / 3) 50%, calc(3 * 100% / 3) 100%;
+  }
+  95%,
+  100% {
+    background-position: calc(0 * 100% / 3) 50%, calc(1 * 100% / 3) 50%,
+      calc(2 * 100% / 3) 50%, calc(3 * 100% / 3) 50%;
+  }
+}
+.calendar-wrapper .fc {
+  height: 100%;
+  font-family: inherit;
+  font-size: 0.875rem;
+}
+.calendar-wrapper .fc-header-toolbar {
+  background-color: var(--background);
+  padding: 1rem;
+  margin: 0 !important;
+  border-bottom: 1px solid var(--border);
+}
+.calendar-wrapper .fc-toolbar-chunk {
+  display: flex;
+  align-items: center;
+  gap: 0.5rem;
+}
+.calendar-wrapper .fc-button-group {
+  display: inline-flex;
+}
+.calendar-wrapper .fc-button {
+  border: 1px solid var(--border);
+  background-color: transparent;
+  color: var(--foreground);
+  font-size: 0.875rem;
+  font-weight: 500;
+  height: auto;
+  padding: 0.25rem 1rem;
+  border-radius: 0.375rem;
+  cursor: pointer;
+  text-transform: capitalize;
+}
+.calendar-wrapper .fc-button:hover {
+  background-color: var(--muted);
+  color: var(--primary);
+  border: 1px solid var(--border);
+}
+.calendar-wrapper .fc-button:focus {
+  box-shadow: none !important;
+}
+.calendar-wrapper .fc-button:disabled {
+  opacity: 0.5;
+  pointer-events: none;
+}
+.calendar-wrapper .fc-toolbar-title {
+  color: var(--foreground);
+  font-size: 1.25rem;
+  font-weight: 600;
+  margin: 0;
+}
+.calendar-wrapper .fc-col-header {
+  background-color: var(--muted);
+  border-bottom: 1px solid var(--border);
+}
+.calendar-wrapper .fc-col-header-cell {
+  padding: 0.5rem;
+}
+.calendar-wrapper .fc-col-header-cell-cushion {
+  color: var(--muted-foreground);
+  font-weight: 600;
+  text-decoration: none;
+  font-size: 0.75rem;
+  text-transform: uppercase;
+  letter-spacing: 0.025em;
+}
+.calendar-wrapper .fc-daygrid-day {
+  background-color: var(--background);
+  border-color: var(--border);
+}
+.calendar-wrapper .fc-day-today {
+  background-color: var(--primary) !important;
+  @supports (color: color-mix(in lab, red, red)) {
+    background-color: color-mix(
+    in oklch,
+    var(--primary) 5%,
+    transparent
+  ) !important;
+  }
+}
+.calendar-wrapper .fc-daygrid-day-number {
+  color: var(--foreground);
+  text-decoration: none;
+  padding: 0.25rem 0.5rem;
+  font-size: 0.875rem;
+  transition: all 0.2s;
+}
+.calendar-wrapper .fc-daygrid-day-number:hover {
+  background-color: var(--muted);
+  border-radius: 0.25rem;
+}
+.calendar-wrapper .fc-daygrid-day-top {
+  display: flex;
+  justify-content: flex-end;
+  padding: 0.25rem;
+}
+.calendar-wrapper .fc-event {
+  background-color: var(--primary);
+  border-color: var(--primary);
+  color: var(--primary-foreground);
+  border-radius: 0.25rem;
+  border: none;
+  transition: all 0.2s;
+  cursor: pointer;
+}
+.calendar-wrapper .fc-event:hover {
+  background-color: var(--primary);
+  @supports (color: color-mix(in lab, red, red)) {
+    background-color: color-mix(in oklch, var(--primary) 90%, transparent);
+  }
+}
+.calendar-wrapper .fc-event-title,
+.calendar-wrapper .fc-event-time {
+  padding: 0.125rem 0.25rem;
+}
+.calendar-wrapper .fc-timegrid-slot {
+  border-color: var(--border);
+}
+.calendar-wrapper .fc-timegrid-col.fc-day-today {
+  background-color: var(--primary);
+  @supports (color: color-mix(in lab, red, red)) {
+    background-color: color-mix(in oklch, var(--primary) 3%, transparent);
+  }
+}
+.calendar-wrapper .fc-timegrid-axis {
+  color: var(--muted-foreground);
+}
+.calendar-wrapper .fc-timegrid-slot-label {
+  color: var(--muted-foreground);
+  font-size: 0.75rem;
+}
+.calendar-wrapper .fc-list {
+  border-color: var(--border);
+}
+.calendar-wrapper .fc-list-day {
+  background-color: var(--muted);
+}
+.calendar-wrapper .fc-list-day-cushion {
+  color: var(--foreground);
+  font-weight: 600;
+}
+.calendar-wrapper .fc-list-event {
+  border-color: var(--border);
+  transition: all 0.2s;
+}
+.calendar-wrapper .fc-list-event:hover {
+  background-color: var(--muted);
+  @supports (color: color-mix(in lab, red, red)) {
+    background-color: color-mix(in oklch, var(--muted) 50%, transparent);
+  }
+}
+.calendar-wrapper .fc-list-event-title {
+  color: var(--foreground);
+}
+.calendar-wrapper .fc-list-event-time {
+  color: var(--muted-foreground);
+}
+.calendar-wrapper .fc-more-link {
+  color: var(--primary);
+  font-weight: 500;
+}
+.calendar-wrapper .fc-more-link:hover {
+  color: var(--primary);
+  @supports (color: color-mix(in lab, red, red)) {
+    color: color-mix(in oklch, var(--primary) 90%, transparent);
+  }
+}
+.calendar-wrapper .fc-popover {
+  background-color: var(--background);
+  border: 1px solid var(--border);
+  border-radius: 0.5rem;
+  box-shadow: 0 10px 15px -3px rgb(0 0 0 / 0.1), 0 4px 6px -4px rgb(0 0 0 / 0.1);
+}
+.calendar-wrapper .fc-popover-header {
+  background-color: var(--muted);
+  border-bottom: 1px solid var(--border);
+  padding: 0.5rem 0.75rem;
+}
+.calendar-wrapper .fc-popover-title {
+  color: var(--foreground);
+  font-weight: 600;
+}
+.calendar-wrapper .fc-popover-close {
+  color: var(--muted-foreground);
+  cursor: pointer;
+}
+.calendar-wrapper .fc-popover-close:hover {
+  color: var(--foreground);
+}
+.calendar-wrapper .fc-scroller::-webkit-scrollbar {
+  width: 6px;
+  height: 6px;
+}
+.calendar-wrapper .fc-scroller::-webkit-scrollbar-track {
+  background-color: var(--muted);
+  border-radius: 3px;
+}
+.calendar-wrapper .fc-scroller::-webkit-scrollbar-thumb {
+  background-color: var(--border);
+  border-radius: 3px;
+}
+.calendar-wrapper .fc-scroller::-webkit-scrollbar-thumb:hover {
+  background-color: var(--muted-foreground);
+}
+.calendar-wrapper .fc-theme-standard td,
+.calendar-wrapper .fc-theme-standard th {
+  border-color: var(--border);
+}
+.calendar-wrapper .fc-theme-standard .fc-scrollgrid {
+  border-color: var(--border);
+}
+.calendar-wrapper .fc-timegrid-now-indicator-line {
+  border-color: var(--destructive);
+}
+.calendar-wrapper .fc-timegrid-now-indicator-arrow {
+  border-color: var(--destructive);
+}
+@media (max-width: 768px) {
+  .calendar-wrapper .fc-header-toolbar {
+    flex-direction: column;
+    gap: 0.5rem;
+  }
+  .calendar-wrapper .fc-toolbar-chunk {
+    width: 100%;
+    justify-content: center;
+  }
+  .calendar-wrapper .fc-button {
+    padding: 0.25rem 0.5rem;
+    font-size: 0.75rem;
+  }
+}
+@media (max-width: 640px) {
+  .calendar-wrapper .fc-event {
+    font-size: 0.7rem;
+  }
+  .calendar-wrapper .fc-daygrid-day-number {
+    font-size: 0.75rem;
+  }
+}
 @property --tw-translate-x {
   syntax: "*";
   inherits: false;
@@ -4305,6 +4668,11 @@
   initial-value: "";
   inherits: false;
 }
+@keyframes spin {
+  to {
+    transform: rotate(360deg);
+  }
+}
 @keyframes pulse {
   50% {
     opacity: 0.5;

package/package.json

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