@app-studio/web 0.9.33 → 0.9.35

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,107 @@
+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 date styles (the circular number)
+ */
+export declare const dayDateStyles: 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/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;
 }

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

@@ -10,6 +10,11 @@ export declare const DefaultChatInputStyles: {
         borderRadius: string;
         backgroundColor: string;
         transition: string;
+        media: {
+            mobile: {
+                borderRadius: string;
+            };
+        };
     };
     content: {
         width: string;
@@ -19,6 +24,12 @@ export declare const DefaultChatInputStyles: {
         borderWidth: string;
         borderStyle: string;
         borderColor: string;
+        media: {
+            mobile: {
+                padding: string;
+                borderRadius: string;
+            };
+        };
     };
     textarea: {
         width: string;
@@ -33,6 +44,13 @@ export declare const DefaultChatInputStyles: {
         outline: string;
         resize: string;
         overflow: string;
+        media: {
+            mobile: {
+                padding: string;
+                fontSize: string;
+                minHeight: string;
+            };
+        };
     };
     attachments: {
         display: string;
@@ -73,6 +91,13 @@ export declare const DefaultChatInputStyles: {
         backgroundColor: string;
         color: string;
         transition: string;
+        media: {
+            mobile: {
+                height: string;
+                minWidth: string;
+                padding: string;
+            };
+        };
     };
     fileButton: {
         height: string;
@@ -81,6 +106,12 @@ export declare const DefaultChatInputStyles: {
         backgroundColor: string;
         color: string;
         transition: string;
+        media: {
+            mobile: {
+                height: string;
+                padding: string;
+            };
+        };
     };
     modelSelector: {
         height: string;

package/dist/components/Form/Checkbox/Checkbox/Checkbox.style.d.ts

@@ -30,15 +30,28 @@ export declare const VariantStyles: Record<Variant, ViewProps>;
 export declare const StateStyles: {
     hover: {
         selected: {
-            backgroundColor: string;
-            borderColor: string;
+            opacity: number;
         };
         unselected: {
             borderColor: string;
+            backgroundColor: string;
         };
         indeterminate: {
-            backgroundColor: string;
-            borderColor: string;
+            opacity: number;
+        };
+    };
+    focus: {
+        selected: {
+            outline: string;
+            boxShadow: string;
+        };
+        unselected: {
+            outline: string;
+            boxShadow: string;
+        };
+        indeterminate: {
+            outline: string;
+            boxShadow: string;
         };
     };
     disabled: {
@@ -46,15 +59,18 @@ export declare const StateStyles: {
             backgroundColor: string;
             borderColor: string;
             opacity: number;
+            cursor: string;
         };
         unselected: {
             borderColor: string;
             opacity: number;
+            cursor: string;
         };
         indeterminate: {
             backgroundColor: string;
             borderColor: string;
             opacity: number;
+            cursor: string;
         };
     };
     error: {

package/dist/components/Form/Select/Select/Select.style.d.ts

@@ -24,3 +24,7 @@ export declare const IconSizes: Record<Size, number>;
  * Dropdown styles for the Select component
  */
 export declare const dropdownStyles: ViewProps;
+/**
+ * Option item styles for the Select component
+ */
+export declare const optionStyles: ViewProps;

package/dist/components/Form/Switch/Switch/Switch.style.d.ts

@@ -37,13 +37,33 @@ export declare const ColorSchemes: {
     };
     states: {
         hover: {
-            active: string;
-            inactive: string;
+            active: {
+                opacity: number;
+            };
+            inactive: {
+                backgroundColor: string;
+            };
         };
         focus: {
-            active: string;
-            inactive: string;
-            outline: string;
+            active: {
+                outline: string;
+                boxShadow: string;
+            };
+            inactive: {
+                outline: string;
+                boxShadow: string;
+            };
         };
     };
 };
+/**
+ * Transition styles for the Switch component
+ */
+export declare const TransitionStyles: {
+    slider: {
+        transition: string;
+    };
+    knob: {
+        transition: string;
+    };
+};

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

@@ -30,6 +30,14 @@ export declare const PadddingWithLabel: {
     paddingBottom: string;
     paddingLeft: string;
     paddingRight: string;
+    media: {
+        mobile: {
+            paddingTop: string;
+            paddingBottom: string;
+            paddingLeft: string;
+            paddingRight: string;
+        };
+    };
 };
 /**
  * Padding for input without label following the 4px grid system
@@ -39,4 +47,12 @@ export declare const PaddingWithoutLabel: {
     paddingBottom: string;
     paddingLeft: string;
     paddingRight: string;
+    media: {
+        mobile: {
+            paddingTop: string;
+            paddingBottom: string;
+            paddingLeft: string;
+            paddingRight: string;
+        };
+    };
 };

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

@@ -37,6 +37,7 @@ export interface KanbanBoardProps {
 export interface KanbanBoardViewProps extends KanbanBoardProps {
     columns: KanbanBoardColumn[];
     draggedCardId: string | null;
+    hoveredColumnId: string | null;
     onCardDragStart: (columnId: string, cardId: string, event: React.DragEvent<HTMLDivElement>) => void;
     onCardDragEnd: () => void;
     onCardDrop: (columnId: string, cardId: string | null, event: React.DragEvent<HTMLDivElement>) => void;

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

@@ -3,10 +3,11 @@ import { KanbanBoardProps } from './KanbanBoard.props';
 export declare const useKanbanBoardState: ({ columns: initialColumns, onChange, }: KanbanBoardProps) => {
     columns: import("./KanbanBoard.props").KanbanBoardColumn[];
     draggedCardId: string | null;
+    hoveredColumnId: string | null;
     onCardDragStart: (columnId: string, cardId: string, event: React.DragEvent<HTMLDivElement>) => void;
     onCardDragEnd: () => void;
-    onColumnDragOver: (_columnId: string, event: React.DragEvent<HTMLDivElement>) => void;
-    onCardDragOver: (_columnId: string, _cardId: string | null, event: React.DragEvent<HTMLDivElement>) => void;
+    onColumnDragOver: (columnId: string, event: React.DragEvent<HTMLDivElement>) => void;
+    onCardDragOver: (columnId: string, cardId: string | null, event: React.DragEvent<HTMLDivElement>) => void;
     onColumnDrop: (columnId: string, event: React.DragEvent<HTMLDivElement>) => void;
     onCardDrop: (columnId: string, cardId: string | null, event: React.DragEvent<HTMLDivElement>) => void;
 };