@orbit_ui_toolkit/orbitui-kit 0.1.24 → 0.1.25

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.
@@ -1,12 +1,19 @@
1
1
  import { default as React } from 'react';
2
+ type ResponsiveValue<T> = T | {
3
+ sm?: T;
4
+ md?: T;
5
+ lg?: T;
6
+ xl?: T;
7
+ '2xl'?: T;
8
+ };
2
9
  export interface GridItemProps {
3
10
  children?: React.ReactNode;
4
11
  /** How many columns to span across. 1-12 or 'full' */
5
- colSpan?: 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12 | 'full';
12
+ colSpan?: ResponsiveValue<1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12 | 'full'>;
6
13
  /** How many rows to span across. */
7
- rowSpan?: 1 | 2 | 3 | 4 | 5 | 6;
14
+ rowSpan?: ResponsiveValue<1 | 2 | 3 | 4 | 5 | 6>;
8
15
  /** Start position in grid */
9
- colStart?: number | string;
16
+ colStart?: ResponsiveValue<number | string>;
10
17
  /** Additional classes */
11
18
  className?: string;
12
19
  }
@@ -14,13 +21,13 @@ declare const GridItem: React.FC<GridItemProps>;
14
21
  export interface GridProps {
15
22
  children: React.ReactNode;
16
23
  /** Number of columns. 1-12 */
17
- cols?: 1 | 2 | 3 | 4 | 5 | 6 | 8 | 10 | 12;
24
+ cols?: ResponsiveValue<1 | 2 | 3 | 4 | 5 | 6 | 8 | 10 | 12>;
18
25
  /** Gap size (tailwind spacing scale) */
19
- gap?: 0 | 1 | 2 | 3 | 4 | 5 | 6 | 8 | 10 | 12;
26
+ gap?: ResponsiveValue<0 | 1 | 2 | 3 | 4 | 5 | 6 | 8 | 10 | 12>;
20
27
  /** Vertical Gap */
21
- gapY?: number;
28
+ gapY?: ResponsiveValue<number>;
22
29
  /** Horizontal Gap */
23
- gapX?: number;
30
+ gapX?: ResponsiveValue<number>;
24
31
  /** CSS Grid flow direction */
25
32
  flow?: 'row' | 'col' | 'row-dense' | 'col-dense';
26
33
  /** Align items */
@@ -0,0 +1,7 @@
1
+ import { default as React } from 'react';
2
+ import { CalendarProps } from './types';
3
+ /**
4
+ * Reusable Calendar component mimicking Microsoft Teams UI.
5
+ * Supports Month and Week views, event management (CRUD), and accessibility.
6
+ */
7
+ export declare const Calendar: React.FC<CalendarProps>;
@@ -0,0 +1,8 @@
1
+ import { Meta, StoryObj } from '@storybook/react';
2
+ import { Calendar } from './Calendar';
3
+ declare const meta: Meta<typeof Calendar>;
4
+ export default meta;
5
+ type Story = StoryObj<typeof Calendar>;
6
+ export declare const Default: Story;
7
+ export declare const Empty: Story;
8
+ export declare const LargeModal: Story;
@@ -0,0 +1,10 @@
1
+ import { default as React } from 'react';
2
+ import { CalendarView, DayInfo, CalendarEvent } from './types';
3
+ interface CalendarGridProps {
4
+ view: CalendarView;
5
+ days: DayInfo[];
6
+ onDateClick: (date: Date) => void;
7
+ onEventClick: (event: CalendarEvent) => void;
8
+ }
9
+ export declare const CalendarGrid: React.FC<CalendarGridProps>;
10
+ export {};
@@ -0,0 +1,13 @@
1
+ import { CalendarView } from './types';
2
+ interface CalendarHeaderProps {
3
+ currentDate: Date;
4
+ view: CalendarView;
5
+ onPrev: () => void;
6
+ onNext: () => void;
7
+ onToday: () => void;
8
+ onViewChange: (view: CalendarView) => void;
9
+ searchQuery: string;
10
+ onSearchChange: (query: string) => void;
11
+ }
12
+ export declare const CalendarHeader: React.FC<CalendarHeaderProps>;
13
+ export {};
@@ -0,0 +1,15 @@
1
+ import { default as React } from 'react';
2
+ import { CalendarEvent } from './types';
3
+ interface EventModalProps {
4
+ isOpen: boolean;
5
+ onClose: () => void;
6
+ event?: CalendarEvent | null;
7
+ selectedDate: Date;
8
+ onSave: (event: Omit<CalendarEvent, 'id'> & {
9
+ id?: string;
10
+ }) => void;
11
+ onDelete?: (id: string) => void;
12
+ defaultSize?: 'sm' | 'md' | 'lg' | 'xl';
13
+ }
14
+ export declare const EventModal: React.FC<EventModalProps>;
15
+ export {};
@@ -0,0 +1,28 @@
1
+ export type CalendarView = 'month' | 'week' | 'day';
2
+ export interface CalendarEvent {
3
+ id: string;
4
+ title: string;
5
+ start: Date;
6
+ end: Date;
7
+ description?: string;
8
+ color?: string;
9
+ }
10
+ export interface CalendarProps {
11
+ events?: CalendarEvent[];
12
+ onAddEvent?: (event: Omit<CalendarEvent, 'id'>) => void;
13
+ onUpdateEvent?: (event: CalendarEvent) => void;
14
+ onDeleteEvent?: (id: string) => void;
15
+ modalSize?: 'sm' | 'md' | 'lg' | 'xl';
16
+ className?: string;
17
+ }
18
+ export interface DayInfo {
19
+ date: Date;
20
+ isCurrentMonth: boolean;
21
+ isToday: boolean;
22
+ isCurrentDay: boolean;
23
+ events: CalendarEvent[];
24
+ }
25
+ export interface TimeSlot {
26
+ time: Date;
27
+ events: CalendarEvent[];
28
+ }
@@ -0,0 +1,17 @@
1
+ import { CalendarEvent, DayInfo } from './types';
2
+ /**
3
+ * Generates an array of dates for a 6-week month grid (7 columns x 6 rows)
4
+ */
5
+ export declare const getMonthDays: (currentDate: Date, events: CalendarEvent[]) => DayInfo[];
6
+ /**
7
+ * Generates an array of days for a week view
8
+ */
9
+ export declare const getWeekDays: (currentDate: Date, events: CalendarEvent[]) => DayInfo[];
10
+ /**
11
+ * Formats a time range for display
12
+ */
13
+ export declare const formatTimeRange: (start: Date, end: Date) => string;
14
+ /**
15
+ * Helper to get status color based on event
16
+ */
17
+ export declare const getEventColorClasses: (color?: string) => string;
package/dist/index.d.ts CHANGED
@@ -19,4 +19,7 @@ export * from './components/Stack';
19
19
  export * from './components/Dialog/BaseDialog';
20
20
  export * from './components/DataTable/DataTable';
21
21
  export * from './components/MovieTicket/MovieTicket';
22
- export * from './components/Badge/Badge';
22
+ export { Badge } from './components/Badge/Badge';
23
+ export type { BadgeProps } from './components/Badge/Badge';
24
+ export * from './components/calendar/Calendar';
25
+ export * from './components/calendar/types';