@zaide6137/m3-components-web 0.1.9 → 0.1.10
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/dist/index.css +1 -0
- package/dist/index.d.mts +79 -3
- package/dist/index.d.ts +79 -3
- package/dist/index.js +67 -2
- package/dist/index.mjs +67 -2
- package/package.json +1 -1
package/dist/index.css
ADDED
|
@@ -0,0 +1 @@
|
|
|
1
|
+
.m3-components-bigcalendar-root{display:flex;flex-direction:column;flex:1 1 0%;min-width:0;padding-top:16px;position:relative;overflow:hidden}@media(min-width:1024px){.m3-components-bigcalendar-root{padding-top:24px;margin:24px;border-radius:24px;border:1px solid}}.m3-components-bigcalendar-header-area{padding-left:16px;padding-right:16px}@media(min-width:1024px){.m3-components-bigcalendar-header-area{padding-left:24px;padding-right:24px}}.m3-components-bigcalendar-filter-row{display:flex;align-items:center;gap:8px;margin-bottom:16px;flex-shrink:0;overflow-x:auto;padding-bottom:4px}.m3-components-bigcalendar-filter-row::-webkit-scrollbar{display:none}.m3-components-bigcalendar-filter-chip{padding:6px 12px;border-radius:6px;font-size:10px;font-weight:700;text-transform:uppercase;letter-spacing:.05em;transition:all .2s ease;border:1px solid;cursor:pointer;background:transparent}.m3-components-bigcalendar-divider{width:100%;height:2px}.m3-components-bigcalendar-view-host{flex:1 1 0%;position:relative;overflow:hidden}.m3-components-bigcalendar-viewport{position:absolute;inset:0}.m3-components-bigcalendar-toolbar-wrapper{display:flex;flex-direction:column;justify-content:space-between;align-items:flex-start;margin-bottom:24px;gap:16px;flex-shrink:0}@media(min-width:1280px){.m3-components-bigcalendar-toolbar-wrapper{flex-direction:row;align-items:center}}.m3-components-bigcalendar-toolbar-left-content{display:flex;align-items:center;gap:16px}.m3-components-bigcalendar-toolbar-date-badge{display:flex;flex-direction:column;align-items:center;width:48px;height:fit-content;border-radius:12px;border:1px solid;flex-shrink:0;overflow:hidden}.m3-components-bigcalendar-toolbar-badge-header{width:100%;display:flex;justify-content:center;align-items:center;padding:4px 0}.m3-components-bigcalendar-toolbar-badge-month-text{font-size:8px;font-weight:800;text-transform:uppercase;letter-spacing:.1em;opacity:.7}.m3-components-bigcalendar-toolbar-badge-day-text{font-size:18px;font-weight:900;line-height:1;margin:4px 0}.m3-components-bigcalendar-toolbar-week-chip{width:fit-content;margin-top:4px;padding:2px 8px;border-radius:6px;font-size:9px;font-weight:700;border:1px solid}.m3-components-bigcalendar-toolbar-right-content{display:flex;align-items:center;gap:12px;width:100%;justify-content:space-between;position:relative}@media(min-width:1280px){.m3-components-bigcalendar-toolbar-right-content{width:auto;justify-content:flex-end}}.m3-components-bigcalendar-toolbar-nav-segmented{display:flex;align-items:center;border-radius:8px;border:1px solid;overflow:hidden}.m3-components-bigcalendar-toolbar-nav-btn{padding:8px 12px;transition:background-color .2s;background:transparent;border:none;cursor:pointer;display:flex;align-items:center}.m3-components-bigcalendar-toolbar-today-btn{padding:0 16px;font-size:14px;font-weight:700}.m3-components-bigcalendar-toolbar-border-separator-right{border-right:1px solid}.m3-components-bigcalendar-toolbar-border-separator-left{border-left:1px solid}.m3-components-bigcalendar-toolbar-dropdown-host{position:relative}.m3-components-bigcalendar-toolbar-dropdown-toggle{padding:8px 16px;border-radius:8px;border:1px solid;font-size:14px;font-weight:700;display:flex;align-items:center;gap:8px;transition:background-color .2s;background:transparent;cursor:pointer}.m3-components-bigcalendar-toolbar-dropdown-panel{position:absolute;right:0;top:100%;margin-top:8px;width:128px;border-radius:12px;border:1px solid;overflow:hidden;z-index:50;box-shadow:0 10px 15px -3px #0000001a}.m3-components-bigcalendar-toolbar-dropdown-option{width:100%;text-align:left;padding:12px 16px;font-size:14px;font-weight:600;transition:background-color .2s;background:transparent;border:none;cursor:pointer}.m3-components-bigcalendar-toolbar-icon-rotate{transition:transform .2s}.m3-components-bigcalendar-toolbar-icon-rotate-active{transform:rotate(180deg)}.m3-components-bigcalendar-toolbar-create-btn{width:fit-content;padding-top:8px;padding-bottom:8px;font-size:14px;line-height:1.25rem}.m3-components-bigcalendar-event-root{width:100%;height:100%}.m3-components-bigcalendar-event-dot{width:10px;height:10px;border-radius:9999px;margin-bottom:4px;border:1px solid}.m3-components-bigcalendar-event-chip{display:flex;align-items:center;width:100%;height:100%;padding:4px 8px;border-radius:9999px;transition:background-color .2s ease}.m3-components-bigcalendar-event-content{display:flex;align-items:center;width:100%;font-size:10px;gap:8px;overflow:hidden}.m3-components-bigcalendar-event-title{font-weight:700;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;flex-shrink:1;min-width:0}.m3-components-bigcalendar-event-trailing{display:flex;align-items:center;justify-content:center;margin-left:auto;flex-shrink:0}.m3-components-button-root{display:inline-flex;align-items:center;justify-content:center;padding:8px 24px;font-weight:600;font-size:14px;border:none;cursor:pointer;outline:none;user-select:none;position:relative;overflow:hidden;transition:background-color .2s ease,color .2s ease}.m3-components-button-root:disabled{cursor:not-allowed}.m3-components-button-content{display:flex;flex-direction:row;align-items:center;justify-content:center;gap:8px}.m3-components-button-icon{display:flex;align-items:center;justify-content:center}.m3-components-button-rounded-full{border-radius:9999px}.m3-components-button-rounded-lg{border-radius:12px}.m3-components-button-rounded-sm{border-radius:4px}
|
package/dist/index.d.mts
CHANGED
|
@@ -1,4 +1,6 @@
|
|
|
1
|
-
import * as
|
|
1
|
+
import * as React$1 from 'react';
|
|
2
|
+
import React__default from 'react';
|
|
3
|
+
import { Variants, Transition } from 'framer-motion';
|
|
2
4
|
|
|
3
5
|
interface MaterialTheme {
|
|
4
6
|
primary: string;
|
|
@@ -52,7 +54,7 @@ interface ThemeProviderProps {
|
|
|
52
54
|
defaultColorScheme?: DefaultColorScheme;
|
|
53
55
|
}
|
|
54
56
|
|
|
55
|
-
declare const ThemeContext:
|
|
57
|
+
declare const ThemeContext: React$1.Context<ThemeContextType | null>;
|
|
56
58
|
declare const ThemeProvider: React.FC<ThemeProviderProps>;
|
|
57
59
|
declare const useGlobalTheme: () => ThemeContextType;
|
|
58
60
|
|
|
@@ -61,4 +63,78 @@ declare function hexToArgba(hex: string, alpha: number): string;
|
|
|
61
63
|
declare function hexToRgba(hex: string, alpha: number): string;
|
|
62
64
|
declare function isDarkBackground(hex: string): boolean;
|
|
63
65
|
|
|
64
|
-
|
|
66
|
+
declare namespace BigCalendar {
|
|
67
|
+
type Props = {
|
|
68
|
+
currentDate?: string;
|
|
69
|
+
filterOptions: Types.FilterOptions;
|
|
70
|
+
events: Types.EventItem[];
|
|
71
|
+
toolBar?: (currentSelectedDate: Date) => React__default.ReactNode;
|
|
72
|
+
eventLayout?: (event: Types.EventItem) => React__default.ReactNode;
|
|
73
|
+
filterBar?: (filterOptions: Types.FilterOptions) => React__default.ReactNode;
|
|
74
|
+
filterBy?: Types.FilterOptions;
|
|
75
|
+
backgroundMode: Types.Mode;
|
|
76
|
+
defaultView?: Types.ViewMode;
|
|
77
|
+
enableAnimations?: boolean;
|
|
78
|
+
slideVariants: Variants;
|
|
79
|
+
transition?: Transition<any>;
|
|
80
|
+
onEventClicked?: (event: any) => void;
|
|
81
|
+
};
|
|
82
|
+
namespace Toolbar {
|
|
83
|
+
interface Props {
|
|
84
|
+
date: Date;
|
|
85
|
+
onPrev: () => void;
|
|
86
|
+
onNext: () => void;
|
|
87
|
+
onToday: () => void;
|
|
88
|
+
view: Types.ViewMode;
|
|
89
|
+
onViewChange: (view: Types.ViewMode) => void;
|
|
90
|
+
}
|
|
91
|
+
}
|
|
92
|
+
namespace Types {
|
|
93
|
+
type FilterOptions = string[];
|
|
94
|
+
type Mode = 'card' | 'transparent';
|
|
95
|
+
type ViewMode = 'month' | 'week' | 'day';
|
|
96
|
+
type EventItem = {
|
|
97
|
+
eventStart: Date;
|
|
98
|
+
eventEnd: Date;
|
|
99
|
+
eventTitle: string;
|
|
100
|
+
eventCategory: string[];
|
|
101
|
+
eventSeedColor?: string;
|
|
102
|
+
eventStyle?: EventStyle;
|
|
103
|
+
eventStyleFilled?: boolean;
|
|
104
|
+
eventTrailingIcon?: React__default.ReactNode;
|
|
105
|
+
};
|
|
106
|
+
type EventStyle = {
|
|
107
|
+
contentColor: string;
|
|
108
|
+
backgroundColor: string;
|
|
109
|
+
};
|
|
110
|
+
}
|
|
111
|
+
interface Methods {
|
|
112
|
+
previousMonth: () => void;
|
|
113
|
+
nextMonth: () => void;
|
|
114
|
+
jumpToNow: () => void;
|
|
115
|
+
}
|
|
116
|
+
}
|
|
117
|
+
declare const BigCalendar: React__default.ForwardRefExoticComponent<BigCalendar.Props & React__default.RefAttributes<BigCalendar.Methods>>;
|
|
118
|
+
|
|
119
|
+
declare namespace Button {
|
|
120
|
+
interface Props {
|
|
121
|
+
className?: string;
|
|
122
|
+
shape: Types.Shape;
|
|
123
|
+
type: Types.Type;
|
|
124
|
+
hoverEffect?: boolean;
|
|
125
|
+
text: string;
|
|
126
|
+
icon?: React.ReactNode;
|
|
127
|
+
onClick?: React.MouseEventHandler<HTMLButtonElement>;
|
|
128
|
+
disabled?: boolean;
|
|
129
|
+
loading?: boolean;
|
|
130
|
+
}
|
|
131
|
+
namespace Types {
|
|
132
|
+
type Shape = "rounded-full" | "rounded-sm" | "rounded-lg";
|
|
133
|
+
type Type = "outlined" | "filled";
|
|
134
|
+
}
|
|
135
|
+
interface Methods {
|
|
136
|
+
}
|
|
137
|
+
}
|
|
138
|
+
declare const Button: React$1.ForwardRefExoticComponent<Button.Props & React$1.RefAttributes<Button.Methods>>;
|
|
139
|
+
|
|
140
|
+
export { BigCalendar, Button, type DefaultColorScheme, type MaterialTheme, type MaterialTokenKey, ThemeContext, type ThemeContextType, ThemeProvider, type ThemeProviderProps, createModernTheme, hexToArgba, hexToRgba, isDarkBackground, useGlobalTheme };
|
package/dist/index.d.ts
CHANGED
|
@@ -1,4 +1,6 @@
|
|
|
1
|
-
import * as
|
|
1
|
+
import * as React$1 from 'react';
|
|
2
|
+
import React__default from 'react';
|
|
3
|
+
import { Variants, Transition } from 'framer-motion';
|
|
2
4
|
|
|
3
5
|
interface MaterialTheme {
|
|
4
6
|
primary: string;
|
|
@@ -52,7 +54,7 @@ interface ThemeProviderProps {
|
|
|
52
54
|
defaultColorScheme?: DefaultColorScheme;
|
|
53
55
|
}
|
|
54
56
|
|
|
55
|
-
declare const ThemeContext:
|
|
57
|
+
declare const ThemeContext: React$1.Context<ThemeContextType | null>;
|
|
56
58
|
declare const ThemeProvider: React.FC<ThemeProviderProps>;
|
|
57
59
|
declare const useGlobalTheme: () => ThemeContextType;
|
|
58
60
|
|
|
@@ -61,4 +63,78 @@ declare function hexToArgba(hex: string, alpha: number): string;
|
|
|
61
63
|
declare function hexToRgba(hex: string, alpha: number): string;
|
|
62
64
|
declare function isDarkBackground(hex: string): boolean;
|
|
63
65
|
|
|
64
|
-
|
|
66
|
+
declare namespace BigCalendar {
|
|
67
|
+
type Props = {
|
|
68
|
+
currentDate?: string;
|
|
69
|
+
filterOptions: Types.FilterOptions;
|
|
70
|
+
events: Types.EventItem[];
|
|
71
|
+
toolBar?: (currentSelectedDate: Date) => React__default.ReactNode;
|
|
72
|
+
eventLayout?: (event: Types.EventItem) => React__default.ReactNode;
|
|
73
|
+
filterBar?: (filterOptions: Types.FilterOptions) => React__default.ReactNode;
|
|
74
|
+
filterBy?: Types.FilterOptions;
|
|
75
|
+
backgroundMode: Types.Mode;
|
|
76
|
+
defaultView?: Types.ViewMode;
|
|
77
|
+
enableAnimations?: boolean;
|
|
78
|
+
slideVariants: Variants;
|
|
79
|
+
transition?: Transition<any>;
|
|
80
|
+
onEventClicked?: (event: any) => void;
|
|
81
|
+
};
|
|
82
|
+
namespace Toolbar {
|
|
83
|
+
interface Props {
|
|
84
|
+
date: Date;
|
|
85
|
+
onPrev: () => void;
|
|
86
|
+
onNext: () => void;
|
|
87
|
+
onToday: () => void;
|
|
88
|
+
view: Types.ViewMode;
|
|
89
|
+
onViewChange: (view: Types.ViewMode) => void;
|
|
90
|
+
}
|
|
91
|
+
}
|
|
92
|
+
namespace Types {
|
|
93
|
+
type FilterOptions = string[];
|
|
94
|
+
type Mode = 'card' | 'transparent';
|
|
95
|
+
type ViewMode = 'month' | 'week' | 'day';
|
|
96
|
+
type EventItem = {
|
|
97
|
+
eventStart: Date;
|
|
98
|
+
eventEnd: Date;
|
|
99
|
+
eventTitle: string;
|
|
100
|
+
eventCategory: string[];
|
|
101
|
+
eventSeedColor?: string;
|
|
102
|
+
eventStyle?: EventStyle;
|
|
103
|
+
eventStyleFilled?: boolean;
|
|
104
|
+
eventTrailingIcon?: React__default.ReactNode;
|
|
105
|
+
};
|
|
106
|
+
type EventStyle = {
|
|
107
|
+
contentColor: string;
|
|
108
|
+
backgroundColor: string;
|
|
109
|
+
};
|
|
110
|
+
}
|
|
111
|
+
interface Methods {
|
|
112
|
+
previousMonth: () => void;
|
|
113
|
+
nextMonth: () => void;
|
|
114
|
+
jumpToNow: () => void;
|
|
115
|
+
}
|
|
116
|
+
}
|
|
117
|
+
declare const BigCalendar: React__default.ForwardRefExoticComponent<BigCalendar.Props & React__default.RefAttributes<BigCalendar.Methods>>;
|
|
118
|
+
|
|
119
|
+
declare namespace Button {
|
|
120
|
+
interface Props {
|
|
121
|
+
className?: string;
|
|
122
|
+
shape: Types.Shape;
|
|
123
|
+
type: Types.Type;
|
|
124
|
+
hoverEffect?: boolean;
|
|
125
|
+
text: string;
|
|
126
|
+
icon?: React.ReactNode;
|
|
127
|
+
onClick?: React.MouseEventHandler<HTMLButtonElement>;
|
|
128
|
+
disabled?: boolean;
|
|
129
|
+
loading?: boolean;
|
|
130
|
+
}
|
|
131
|
+
namespace Types {
|
|
132
|
+
type Shape = "rounded-full" | "rounded-sm" | "rounded-lg";
|
|
133
|
+
type Type = "outlined" | "filled";
|
|
134
|
+
}
|
|
135
|
+
interface Methods {
|
|
136
|
+
}
|
|
137
|
+
}
|
|
138
|
+
declare const Button: React$1.ForwardRefExoticComponent<Button.Props & React$1.RefAttributes<Button.Methods>>;
|
|
139
|
+
|
|
140
|
+
export { BigCalendar, Button, type DefaultColorScheme, type MaterialTheme, type MaterialTokenKey, ThemeContext, type ThemeContextType, ThemeProvider, type ThemeProviderProps, createModernTheme, hexToArgba, hexToRgba, isDarkBackground, useGlobalTheme };
|