@app-studio/web 0.9.33 → 0.9.34

package/dist/components/Accordion/Accordion/Accordion.style.d.ts

@@ -2,3 +2,11 @@ import { ViewProps } from 'app-studio';
 import { Shape, Variant } from './Accordion.type';
 export declare const AccordionShapes: Record<Shape, ViewProps>;
 export declare const AccordionVariants: Record<Variant, ViewProps>;
+/**
+ * Accordion trigger styles matching shadcn/ui patterns
+ */
+export declare const AccordionTriggerStyles: ViewProps;
+/**
+ * Accordion content styles with smooth animation
+ */
+export declare const AccordionContentStyles: ViewProps;

package/dist/components/Calendar/Calendar/Calendar.props.d.ts

@@ -1,70 +1,74 @@
-import React from 'react';
 import { ViewProps } from 'app-studio';
-import { ButtonProps } from '../../Button/Button/Button.props';
-import { TextProps } from '../../Text/Text/Text.props';
-export declare type CalendarView = 'day' | 'week' | 'month';
+export declare type CalendarView = 'month' | 'week' | 'day';
 export interface CalendarEvent {
-    /** Unique identifier for the event. */
-    id?: string | number;
-    /** Event title shown in the calendar cell. */
+    /** Unique identifier for the event */
+    id: string;
+    /** Event title/label */
     title: string;
-    /** Start date/time of the event. */
-    start: Date | string;
-    /** Optional end date/time of the event. */
-    end?: Date | string;
-    /** Optional description or supporting information. */
-    description?: string;
-    /** Additional metadata the consumer wants to keep with the event. */
-    metadata?: Record<string, unknown>;
-}
-export interface CalendarRenderEventContext {
-    /** Date of the cell currently being rendered. */
-    day: Date;
-    /** Active calendar view. */
-    view: CalendarView;
-    /** Whether the given day is today. */
-    isToday: boolean;
+    /** Start date in ISO format (YYYY-MM-DD) or datetime (YYYY-MM-DDTHH:MM) */
+    start: string;
+    /** End date in ISO format (YYYY-MM-DD) or datetime (YYYY-MM-DDTHH:MM) */
+    end: string;
+    /** Color variant for the event */
+    color?: 'blue' | 'red' | 'green' | 'purple' | 'orange';
 }
 export interface CalendarViews {
+    /** Style overrides for the main container */
     container?: ViewProps;
+    /** Style overrides for the header (navigation) */
     header?: ViewProps;
-    headerTitle?: TextProps;
-    navigation?: ViewProps;
+    /** Style overrides for the month/year title */
+    monthTitle?: ViewProps;
+    /** Style overrides for navigation buttons */
+    navButton?: ViewProps;
+    /** Style overrides for view switcher buttons */
     viewSwitcher?: ViewProps;
-    grid?: ViewProps;
-    weekdayRow?: ViewProps;
+    /** Style overrides for the month grid */
+    monthGrid?: ViewProps;
+    /** Style overrides for weekday header row */
     weekdayHeader?: ViewProps;
-    weekdayLabel?: TextProps;
-    weekRow?: ViewProps;
-    dayColumn?: ViewProps;
-    dayHeader?: ViewProps;
-    dayNumber?: TextProps;
-    dayMeta?: TextProps;
-    events?: ViewProps;
+    /** Style overrides for individual weekday labels */
+    weekdayLabel?: ViewProps;
+    /** Style overrides for individual day cells */
+    dayCell?: ViewProps;
+    /** Style overrides for day numbers */
+    dayNumber?: ViewProps;
+    /** Style overrides for the events area */
+    eventsArea?: ViewProps;
+    /** Style overrides for individual events */
     event?: ViewProps;
-    eventTitle?: TextProps;
-    eventTime?: TextProps;
-    emptyState?: TextProps;
-    navigationButton?: Partial<ButtonProps>;
-    viewButton?: Partial<ButtonProps>;
+    /** Style overrides for time column (day view) */
+    timeColumn?: ViewProps;
+    /** Style overrides for time slot */
+    timeSlot?: ViewProps;
 }
 export interface CalendarProps {
-    /** Calendar events to render. */
-    events?: CalendarEvent[];
-    /** Starting date displayed in the calendar. */
-    initialDate?: Date | string;
-    /** Initial visible view. */
+    /** Initial date to display in ISO format (YYYY-MM-DD) or Date object */
+    initialDate?: string | Date;
+    /** Initial view to display */
     initialView?: CalendarView;
-    /** First day of the week, defaults to Sunday. */
-    weekStartsOn?: 0 | 1 | 2 | 3 | 4 | 5 | 6;
-    /** Height of the calendar container. */
-    height?: string | number;
-    /** Optional custom render method for events. */
-    renderEvent?: (event: CalendarEvent, context: CalendarRenderEventContext) => React.ReactNode;
-    /** Called when the visible anchor date changes. */
+    /** Array of events to display */
+    events?: CalendarEvent[];
+    /** Today's date in ISO format (defaults to current date) */
+    today?: string;
+    /** Callback when an event is dragged to a new position */
+    onEventDrop?: (event: CalendarEvent) => void;
+    /** Callback when an event is resized */
+    onEventResize?: (event: CalendarEvent) => void;
+    /** Callback when a date is clicked */
+    onDateClick?: (date: string) => void;
+    /** Callback when date/time changes */
     onDateChange?: (date: Date) => void;
-    /** Called when the active view changes. */
+    /** Callback when view changes */
     onViewChange?: (view: CalendarView) => void;
-    /** Customise styling of calendar areas. */
+    /** Callback when double-clicking to add new event */
+    onEventAdd?: (start: string, end: string) => void;
+    /** Style overrides for various parts of the component */
     views?: CalendarViews;
+    /** Width of the calendar (default: '100%') */
+    width?: number | string;
+    /** Maximum width of the calendar (default: 1200) */
+    maxWidth?: number | string;
+    /** First day of the week (0 = Sunday, 1 = Monday, etc.) */
+    weekStartsOn?: 0 | 1 | 2 | 3 | 4 | 5 | 6;
 }

package/dist/components/Calendar/Calendar/Calendar.style.d.ts

@@ -0,0 +1,103 @@
+import { ViewProps } from 'app-studio';
+/**
+ * Event color configurations
+ */
+export declare const EVENT_COLORS: {
+    readonly blue: {
+        readonly background: "color.blue.50";
+        readonly border: "color.blue.500";
+        readonly text: "color.blue.700";
+    };
+    readonly red: {
+        readonly background: "color.red.50";
+        readonly border: "color.red.500";
+        readonly text: "color.red.700";
+    };
+    readonly green: {
+        readonly background: "color.green.50";
+        readonly border: "color.green.500";
+        readonly text: "color.green.700";
+    };
+    readonly purple: {
+        readonly background: "color.purple.50";
+        readonly border: "color.purple.500";
+        readonly text: "color.purple.700";
+    };
+    readonly orange: {
+        readonly background: "color.orange.50";
+        readonly border: "color.orange.500";
+        readonly text: "color.orange.700";
+    };
+};
+/**
+ * Base styles for the calendar container
+ */
+export declare const containerStyles: ViewProps;
+/**
+ * Header styles (navigation bar)
+ */
+export declare const headerStyles: ViewProps;
+/**
+ * Month title styles
+ */
+export declare const monthTitleStyles: ViewProps;
+/**
+ * Navigation button styles
+ */
+export declare const navButtonStyles: ViewProps;
+/**
+ * Month grid styles (7 columns for days)
+ */
+export declare const monthGridStyles: ViewProps;
+/**
+ * Weekday header row styles
+ */
+export declare const weekdayHeaderStyles: ViewProps;
+/**
+ * Individual weekday label styles
+ */
+export declare const weekdayLabelStyles: ViewProps;
+/**
+ * Individual day cell styles
+ */
+export declare const dayCellStyles: ViewProps;
+/**
+ * Day cell from different month
+ */
+export declare const otherMonthDayCellStyles: ViewProps;
+/**
+ * Day number styles
+ */
+export declare const dayNumberStyles: ViewProps;
+/**
+ * Today day number styles
+ */
+export declare const todayDayNumberStyles: ViewProps;
+/**
+ * Selected day number styles
+ */
+export declare const selectedDayNumberStyles: ViewProps;
+/**
+ * Events area styles (container for events in a day)
+ */
+export declare const eventsAreaStyles: ViewProps;
+/**
+ * Base event styles
+ */
+export declare const eventStyles: ViewProps;
+/**
+ * Drop target indicator styles
+ */
+export declare const dropTargetStyles: ViewProps;
+/**
+ * Calculate event position styles for multi-day events
+ */
+export declare const getEventPositionStyles: (startDay: number, endDay: number, weekIndex: number, dayOfWeek: number) => React.CSSProperties;
+/**
+ * Button base styles
+ */
+export declare const buttonStyles: ViewProps;
+/**
+ * Icon button styles
+ */
+export declare const iconButtonStyles: ViewProps;

package/dist/components/Calendar/Calendar/Calendar.utils.d.ts

@@ -1,10 +1,91 @@
 import { CalendarEvent } from './Calendar.props';
-export interface CalendarEventInternal extends CalendarEvent {
-    startDate: Date;
-    endDate: Date;
+export interface PositionedEvent extends CalendarEvent {
+    /** Starting day index (0-41, representing 6 weeks * 7 days) */
+    startDay: number;
+    /** Ending day index (0-41) */
+    endDay: number;
+    /** Number of days the event spans */
+    duration: number;
+    /** Row index for vertical positioning (to avoid overlaps) */
+    row: number;
+    /** Week index (0-5) */
+    weekIndex: number;
+    /** Day of week (0-6) */
+    dayOfWeek: number;
 }
-export declare const toDate: (value: Date | string) => Date;
-export declare const normalizeEvent: (event: CalendarEvent) => CalendarEventInternal;
-export declare const formatDayKey: (date: Date) => string;
-export declare const getEventsForDay: (events: CalendarEventInternal[], day: Date) => CalendarEventInternal[];
-export declare const chunk: <T>(items: T[], size: number) => T[][];
+/**
+ * Convert an ISO date string to a UTC Date object
+ */
+export declare const dateUTC: (iso: string) => Date;
+/**
+ * Calculate the number of days between two ISO date strings
+ */
+export declare const daysBetweenUTC: (a: string, b: string) => number;
+/**
+ * Add a number of days to an ISO date string
+ */
+export declare const addDateDays: (dateISO: string, days: number) => string;
+/**
+ * Get the day of the week (0-6) from an ISO date string
+ */
+export declare const getDayOfWeek: (dateISO: string) => number;
+/**
+ * Get the date number (1-31) from an ISO date string
+ */
+export declare const getDateNumber: (dateISO: string) => number;
+/**
+ * Get the month (0-11) from an ISO date string
+ */
+export declare const getMonth: (dateISO: string) => number;
+/**
+ * Get the year from an ISO date string
+ */
+export declare const getYear: (dateISO: string) => number;
+/**
+ * Get the first day of the month for a given date
+ */
+export declare const getFirstDayOfMonth: (dateISO: string) => string;
+/**
+ * Get the last day of the month for a given date
+ */
+export declare const getLastDayOfMonth: (dateISO: string) => string;
+/**
+ * Get the start date of the calendar grid (may be in previous month)
+ */
+export declare const getCalendarStartDate: (monthDateISO: string, weekStartsOn?: number) => string;
+/**
+ * Generate array of dates for the calendar grid (42 days = 6 weeks)
+ */
+export declare const getCalendarDates: (monthDateISO: string, weekStartsOn?: number) => string[];
+/**
+ * Get month name from date
+ */
+export declare const getMonthName: (dateISO: string) => string;
+/**
+ * Get the previous month date
+ */
+export declare const getPreviousMonth: (dateISO: string) => string;
+/**
+ * Get the next month date
+ */
+export declare const getNextMonth: (dateISO: string) => string;
+/**
+ * Day names array (Sunday to Saturday)
+ */
+export declare const DAY_NAMES: string[];
+/**
+ * Get day names starting from specified day
+ */
+export declare const getDayNames: (weekStartsOn?: number) => string[];
+/**
+ * Layout events with proper positioning to avoid overlaps
+ * Returns positioned events for each week
+ */
+export declare const layoutEvents: (events: CalendarEvent[], calendarDates: string[]) => {
+    items: PositionedEvent[];
+    rowCountByWeek: number[];
+};
+/**
+ * Check if a date is in the current month
+ */
+export declare const isInMonth: (dateISO: string, monthDateISO: string) => boolean;

package/dist/components/Calendar/Calendar/Calendar.view.d.ts

@@ -1,20 +1,3 @@
 import React from 'react';
-import { CalendarEvent, CalendarRenderEventContext, CalendarView, CalendarViews } from './Calendar.props';
-import { CalendarEventInternal } from './Calendar.utils';
-interface CalendarViewProps {
-    currentDate: Date;
-    view: CalendarView;
-    label: string;
-    weeks: Date[][];
-    weekdayLabels: Date[];
-    eventsByDay: Map<string, CalendarEventInternal[]>;
-    onPrevious: () => void;
-    onNext: () => void;
-    onToday: () => void;
-    onViewChange: (view: CalendarView) => void;
-    renderEvent?: (event: CalendarEvent, context: CalendarRenderEventContext) => React.ReactNode;
-    views?: CalendarViews;
-    height?: string | number;
-}
-declare const CalendarViewComponent: React.FC<CalendarViewProps>;
-export default CalendarViewComponent;
+import { CalendarProps } from './Calendar.props';
+export declare const Calendar: React.FC<CalendarProps>;

package/dist/components/Calendar/Calendar.d.ts

@@ -1,3 +1 @@
-import React from 'react';
-import { CalendarProps } from './Calendar/Calendar.props';
-export declare const Calendar: React.FC<CalendarProps>;
+export { Calendar } from './Calendar/Calendar.view';

package/dist/components/CalendarWeek/CalendarWeek/CalendarWeek.props.d.ts

@@ -0,0 +1,51 @@
+import { ViewProps } from 'app-studio';
+export interface CalendarWeekEvent {
+    /** Unique identifier for the event */
+    id: string;
+    /** Event title/label */
+    title: string;
+    /** Start date in ISO format (YYYY-MM-DD) */
+    start: string;
+    /** End date in ISO format (YYYY-MM-DD) */
+    end: string;
+    /** Color variant for the event */
+    color?: 'blue' | 'red' | 'green' | 'purple' | 'orange';
+}
+export interface CalendarWeekViews {
+    /** Style overrides for the main container */
+    container?: ViewProps;
+    /** Style overrides for the week grid */
+    weekGrid?: ViewProps;
+    /** Style overrides for individual day columns */
+    dayColumn?: ViewProps;
+    /** Style overrides for day column headers */
+    dayHeader?: ViewProps;
+    /** Style overrides for day names (e.g., "Mon", "Tue") */
+    dayName?: ViewProps;
+    /** Style overrides for day dates (the circular number) */
+    dayDate?: ViewProps;
+    /** Style overrides for the events area */
+    eventsArea?: ViewProps;
+    /** Style overrides for individual events */
+    event?: ViewProps;
+}
+export interface CalendarWeekProps {
+    /** Start date of the week in ISO format (YYYY-MM-DD) */
+    startDate: string;
+    /** Array of events to display */
+    events?: CalendarWeekEvent[];
+    /** Today's date in ISO format (defaults to current date) */
+    today?: string;
+    /** Callback when an event is dragged to a new position */
+    onEventDrop?: (event: CalendarWeekEvent) => void;
+    /** Callback when an event is resized */
+    onEventResize?: (event: CalendarWeekEvent) => void;
+    /** Callback when a date is clicked */
+    onDateClick?: (date: string) => void;
+    /** Style overrides for various parts of the component */
+    views?: CalendarWeekViews;
+    /** Width of the calendar (default: '100%') */
+    width?: number | string;
+    /** Maximum width of the calendar (default: 1200) */
+    maxWidth?: number | string;
+}

package/dist/components/CalendarWeek/CalendarWeek/CalendarWeek.style.d.ts

@@ -0,0 +1,90 @@
+/// <reference types="react" />
+import { ViewProps } from 'app-studio';
+/**
+ * Event color configurations
+ */
+export declare const EVENT_COLORS: {
+    readonly blue: {
+        readonly background: "color.blue.50";
+        readonly border: "color.blue.500";
+        readonly text: "color.blue.700";
+    };
+    readonly red: {
+        readonly background: "color.red.50";
+        readonly border: "color.red.500";
+        readonly text: "color.red.700";
+    };
+    readonly green: {
+        readonly background: "color.green.50";
+        readonly border: "color.green.500";
+        readonly text: "color.green.700";
+    };
+    readonly purple: {
+        readonly background: "color.purple.50";
+        readonly border: "color.purple.500";
+        readonly text: "color.purple.700";
+    };
+    readonly orange: {
+        readonly background: "color.orange.50";
+        readonly border: "color.orange.500";
+        readonly text: "color.orange.700";
+    };
+};
+/**
+ * Base styles for the calendar container
+ */
+export declare const containerStyles: ViewProps;
+/**
+ * Week grid styles (7 columns)
+ */
+export declare const weekGridStyles: ViewProps;
+/**
+ * Individual day column styles
+ */
+export declare const dayColumnStyles: ViewProps;
+/**
+ * Day header styles
+ */
+export declare const dayHeaderStyles: ViewProps;
+/**
+ * Day name styles (e.g., "Mon", "Tue")
+ */
+export declare const dayNameStyles: ViewProps;
+/**
+ * Day date styles (the circular number)
+ */
+export declare const dayDateStyles: ViewProps;
+/**
+ * Today date styles
+ */
+export declare const todayDateStyles: ViewProps;
+/**
+ * Selected date styles
+ */
+export declare const selectedDateStyles: ViewProps;
+/**
+ * Events area styles
+ */
+export declare const eventsAreaStyles: ViewProps;
+/**
+ * Events layer styles (absolute positioned over the grid)
+ */
+export declare const eventsLayerStyles: ViewProps;
+/**
+ * Base event styles
+ */
+export declare const eventStyles: ViewProps;
+/**
+ * Drop target indicator styles
+ */
+export declare const dropTargetStyles: ViewProps;
+/**
+ * Calculate event position styles
+ */
+export declare const getEventPositionStyles: (startDay: number, duration: number, row: number) => React.CSSProperties;
+/**
+ * Resize handle styles
+ */
+export declare const resizeHandleStyles: React.CSSProperties;
+export declare const leftResizeHandleStyles: React.CSSProperties;
+export declare const rightResizeHandleStyles: React.CSSProperties;

package/dist/components/CalendarWeek/CalendarWeek/CalendarWeek.utils.d.ts

@@ -0,0 +1,51 @@
+import { CalendarWeekEvent } from './CalendarWeek.props';
+export interface PositionedEvent extends CalendarWeekEvent {
+    /** Starting day index (0-6) within the week */
+    startDay: number;
+    /** Ending day index (0-6) within the week */
+    endDay: number;
+    /** Number of days the event spans */
+    duration: number;
+    /** Row index for vertical positioning (to avoid overlaps) */
+    row: number;
+}
+/**
+ * Convert an ISO date string to a UTC Date object
+ */
+export declare const dateUTC: (iso: string) => Date;
+/**
+ * Calculate the number of days between two ISO date strings
+ */
+export declare const daysBetweenUTC: (a: string, b: string) => number;
+/**
+ * Add a number of days to an ISO date string
+ */
+export declare const addDateDays: (dateISO: string, days: number) => string;
+/**
+ * Get the day of the week (0-6) from an ISO date string
+ */
+export declare const getDayOfWeek: (dateISO: string) => number;
+/**
+ * Get the date number (1-31) from an ISO date string
+ */
+export declare const getDateNumber: (dateISO: string) => number;
+/**
+ * Layout events with proper positioning to avoid overlaps
+ * Returns positioned events and the total number of rows needed
+ */
+export declare const layoutEvents: (events: CalendarWeekEvent[], weekStart: string) => {
+    items: PositionedEvent[];
+    rowCount: number;
+};
+/**
+ * Day names array (Sunday to Saturday)
+ */
+export declare const DAY_NAMES: string[];
+/**
+ * Get the date ISO string for a specific day in the week
+ */
+export declare const getDateForDay: (weekStart: string, dayIndex: number) => string;
+/**
+ * Get the day index (0-6) from a clientX position within a week grid element
+ */
+export declare const getDayFromX: (x: number, weekGridRect: DOMRect) => number;

package/dist/components/CalendarWeek/CalendarWeek/CalendarWeek.view.d.ts

@@ -0,0 +1,3 @@
+import React from 'react';
+import { CalendarWeekProps } from './CalendarWeek.props';
+export declare const CalendarWeek: React.FC<CalendarWeekProps>;

package/dist/components/CalendarWeek/CalendarWeek.d.ts

@@ -0,0 +1 @@
+export { CalendarWeek } from './CalendarWeek/CalendarWeek.view';

package/dist/components/Chart/Chart/BarChart.d.ts

@@ -7,7 +7,7 @@ interface BarChartProps {
     animationProgress: number;
     showGrid?: boolean;
     onBarClick?: (seriesName: string, index: number) => void;
-    showTooltip: (x: number, y: number, content: string) => void;
+    showTooltip: (x: number, y: number, content: React.ReactNode) => void;
     hideTooltip: () => void;
     views?: any;
 }

package/dist/components/Chart/Chart/Chart.state.d.ts

@@ -1,4 +1,4 @@
-/// <reference types="react" />
+import { ReactNode } from 'react';
 import { ChartData, ChartDataPoint } from './Chart.type';
 export interface ChartStateProps {
     data?: ChartData;
@@ -13,7 +13,7 @@ export declare const useChartState: ({ data, dataPoints, animated, animationDura
         visible: boolean;
         x: number;
         y: number;
-        content: string;
+        content: ReactNode;
     };
     containerRef: import("react").RefObject<HTMLDivElement>;
     processedData: () => {
@@ -28,7 +28,7 @@ export declare const useChartState: ({ data, dataPoints, animated, animationDura
         }[];
         labels: string[];
     } | null;
-    showTooltip: (x: number, y: number, content: string) => void;
+    showTooltip: (x: number, y: number, content: ReactNode) => void;
     hideTooltip: () => void;
     getChartDimensions: () => {
         width: number;

package/dist/components/Chart/Chart/ChartTooltip.d.ts

@@ -0,0 +1,14 @@
+import React from 'react';
+import { ViewProps } from 'app-studio';
+interface ChartTooltipProps {
+    visible: boolean;
+    x: number;
+    y: number;
+    content: React.ReactNode;
+    maxDistance?: number;
+    views?: {
+        tooltip?: ViewProps;
+    };
+}
+export declare const ChartTooltip: React.FC<ChartTooltipProps>;
+export {};

package/dist/components/Chart/Chart/LineChart.d.ts

@@ -7,7 +7,7 @@ interface LineChartProps {
     animationProgress: number;
     showGrid?: boolean;
     onPointClick?: (seriesName: string, index: number) => void;
-    showTooltip: (x: number, y: number, content: string) => void;
+    showTooltip: (x: number, y: number, content: React.ReactNode) => void;
     hideTooltip: () => void;
     views?: any;
 }

package/dist/components/Chart/Chart/PieChart.d.ts

@@ -7,7 +7,7 @@ interface PieChartProps {
     animationProgress: number;
     isDonut?: boolean;
     onSliceClick?: (dataPoint: ChartDataPoint, index: number) => void;
-    showTooltip: (x: number, y: number, content: string) => void;
+    showTooltip: (x: number, y: number, content: React.ReactNode) => void;
     hideTooltip: () => void;
     views?: any;
 }