@app-studio/web 0.9.36 → 0.9.38

package/docs/components/Link.mdx

@@ -22,7 +22,7 @@ Optional prop to define the text decoration style of the link as underline views
 
 ```tsx
 import React from 'react';
-import { Text } from '../../Text/Text';
+import { Text } from 'app-studio';
 import { Vertical } from 'app-studio';
 
 import { Link } from '../Link';
@@ -53,7 +53,7 @@ Optional boolean indicating whether the link points to an external resource. Def
 
 ```tsx
 import React from 'react';
-import { Text } from '../../Text/Text';
+import { Text } from 'app-studio';
 
 import { Link } from '../Link';
 

package/docs/components/Menubar.mdx

@@ -12,7 +12,7 @@ A flexible menubar component for creating application menus with dropdown submen
 import React from 'react';
 import { Menubar } from '../Menubar';
 import { View } from 'app-studio';
-import { Text } from '../../Text/Text';
+import { Text } from 'app-studio';
 
 export const DefaultMenubar = () => {
   const items = [

package/docs/components/Message.mdx

@@ -258,7 +258,7 @@ It represents the main container or wrapper that holds all the content and compo
 ```tsx
 import { useState } from 'react';
 import { Button } from '../Button/Button';
-import { Text } from '../Text/Text';
+import { Text } from 'app-studio';
 import { Horizontal } from '../Layout/Horizontal/Horizontal';
 
 const [showSharp, setShowSharp] = useState(false);
@@ -306,7 +306,7 @@ const [showRounded, setShowRounded] = useState(false);
 ```tsx
 import { useState } from 'react';
 import { Button } from '../Button/Button';
-import { Text } from '../Text/Text';
+import { Text } from 'app-studio';
 
 const [show, setShow] = useState(false);
 
@@ -398,7 +398,7 @@ A vertical scroll is displayed, if the content height exceed the body height.
 ```tsx
 import { useState } from 'react';
 import { Button } from '../Button/Button';
-import { Text } from '../Text/Text';
+import { Text } from 'app-studio';
 
 const [show, setShow] = useState(false);
 
@@ -439,7 +439,7 @@ It represents the footer section of a message, where the primary information or
 ```tsx
 import { useState } from 'react';
 import { Button } from '../Button/Button';
-import { Text } from '../Text/Text';
+import { Text } from 'app-studio';
 
 const [show, setShow] = useState(false);
 

package/docs/components/Modal.mdx

@@ -263,7 +263,7 @@ It represents the main container or wrapper that holds all the content and compo
 ```tsx
 import { useState } from 'react';
 import { Button } from '../Button/Button';
-import { Text } from '../Text/Text';
+import { Text } from 'app-studio';
 import { Horizontal } from '../Layout/Horizontal/Horizontal';
 
 const [showSharp, setShowSharp] = useState(false);
@@ -311,7 +311,7 @@ const [showRounded, setShowRounded] = useState(false);
 ```tsx
 import { useState } from 'react';
 import { Button } from '../Button/Button';
-import { Text } from '../Text/Text';
+import { Text } from 'app-studio';
 
 const [show, setShow] = useState(false);
 
@@ -410,7 +410,7 @@ A vertical scroll is displayed, if the content height exceed the body height.
 ```tsx
 import { useState } from 'react';
 import { Button } from '../Button/Button';
-import { Text } from '../Text/Text';
+import { Text } from 'app-studio';
 
 const [show, setShow] = useState(false);
 
@@ -451,7 +451,7 @@ It represents the footer section of a modal, which typically contains buttons or
 ```tsx
 import { useState } from 'react';
 import { Button } from '../Button/Button';
-import { Text } from '../Text/Text';
+import { Text } from 'app-studio';
 
 const [show, setShow] = useState(false);
 

package/docs/components/OKR.mdx

@@ -1,9 +1,16 @@
 
-
 # OKR
 
 The OKR (Objectives and Key Results) component is used for displaying and tracking organizational objectives and their associated key results. It provides a comprehensive view of progress, status, and ownership for strategic goals.
 
+## When to use
+
+Use the OKR component when you need to:
+- Display strategic goals and their progress in a clear, hierarchical manner.
+- Track the status and ownership of objectives and key results.
+- Provide a centralized view of team or company-wide goals.
+- Visualize progress towards specific targets.
+
 ## Import
 
 ```jsx
@@ -16,7 +23,8 @@ import { OKR } from '@app-studio/web';
 | ---- | ---- | ------- | ----------- |
 | objectives | OKRObjective[] | **required** | Array of objectives to display |
 | themeMode | 'light' \| 'dark' | 'light' | Theme mode for the component |
-| views | OKRViews | undefined | Custom styling for different parts of the component |
+| views | OKRViews | undefined | Custom styling for different parts of the component. See the `OKRViews` type definition for all available options. |
+| onObjectiveClick | (objective: OKRObjective) => void | undefined | Callback when an objective is clicked |
 | onKeyResultClick | (keyResult: OKRKeyResult, objective: OKRObjective) => void | undefined | Callback when a key result is clicked |
 | renderObjectiveFooter | (objective: OKRObjective) => ReactNode | undefined | Custom footer renderer for objectives |
 | renderKeyResultFooter | (keyResult: OKRKeyResult, objective: OKRObjective) => ReactNode | undefined | Custom footer renderer for key results |
@@ -73,6 +81,10 @@ interface OKRKeyResult {
 
 ### Basic Usage
 
+This example shows a basic OKR with one objective and three key results with different statuses.
+
+![Basic OKR](https://placehold.co/800x400)
+
 ```jsx
 import React from 'react';
 import { OKR } from '@app-studio/web';
@@ -117,6 +129,10 @@ export const BasicOKR = () => {
 
 ### With Detailed Key Results
 
+This example shows a more detailed view of key results, including metrics, targets, and confidence levels. It also demonstrates the dark theme.
+
+![Detailed OKR](https://placehold.co/800x450)
+
 ```jsx
 import React from 'react';
 import { OKR } from '@app-studio/web';
@@ -169,6 +185,10 @@ export const DetailedOKR = () => {
 
 ### With Click Handlers
 
+You can use the `onObjectiveClick` and `onKeyResultClick` props to handle user interactions, for example to navigate to a detailed view.
+
+![Interactive OKR](https://placehold.co/800x250)
+
 ```jsx
 import React from 'react';
 import { OKR } from '@app-studio/web';
@@ -192,6 +212,10 @@ export const InteractiveOKR = () => {
     },
   ];
 
+  const handleObjectiveClick = (objective) => {
+    console.log('Clicked objective:', objective.title);
+  };
+
   const handleKeyResultClick = (keyResult, objective) => {
     console.log('Clicked key result:', keyResult.title);
     console.log('From objective:', objective.title);
@@ -201,6 +225,7 @@ export const InteractiveOKR = () => {
   return (
     <OKR
       objectives={objectives}
+      onObjectiveClick={handleObjectiveClick}
       onKeyResultClick={handleKeyResultClick}
     />
   );
@@ -209,6 +234,10 @@ export const InteractiveOKR = () => {
 
 ### With Custom Footers
 
+The `renderObjectiveFooter` and `renderKeyResultFooter` props allow you to add custom actions or information to each objective and key result.
+
+![OKR with footers](https://placehold.co/800x300)
+
 ```jsx
 import React from 'react';
 import { OKR, Button, Horizontal } from '@app-studio/web';
@@ -252,7 +281,9 @@ export const OKRWithFooters = () => {
 
 ### Auto-calculated Progress
 
-If you don't specify an objective's progress, it will be automatically calculated as the average of its key results:
+If an objective's `progress` is not provided, it is automatically calculated as the average progress of its key results.
+
+![Auto-progress OKR](https://placehold.co/800x350)
 
 ```jsx
 import React from 'react';
@@ -279,57 +310,9 @@ export const AutoProgressOKR = () => {
 
 ## Customization
 
-The OKR component can be extensively customized using the `views` prop:
-
-```jsx
-<OKR
-  objectives={objectives}
-  views={{
-    // Main container
-    container: { /* ViewProps */ },
-
-    // Objective card styling
-    objectiveCard: { /* ViewProps */ },
-    objectiveHeader: { /* ViewProps */ },
-    objectiveTitle: { /* TextProps */ },
-    objectiveDescription: { /* TextProps */ },
-    objectiveMeta: { /* ViewProps */ },
-    objectiveOwner: { /* TextProps */ },
-    objectiveTimeframe: { /* TextProps */ },
-    objectiveTags: { /* ViewProps */ },
-    objectiveProgressSection: { /* ViewProps */ },
-    objectiveProgressLabel: { /* TextProps */ },
-    objectiveProgressValue: { /* TextProps */ },
-    objectiveProgressBar: { /* ProgressBarStyles */ },
-    objectiveStatus: { /* StatusIndicatorStyles */ },
-
-    // Tag styling
-    tag: { /* ViewProps */ },
-    tagText: { /* TextProps */ },
-
-    // Key result styling
-    keyResultList: { /* ViewProps */ },
-    keyResultItem: { /* ViewProps */ },
-    keyResultHeader: { /* ViewProps */ },
-    keyResultTitle: { /* TextProps */ },
-    keyResultDescription: { /* TextProps */ },
-    keyResultMeta: { /* ViewProps */ },
-    keyResultOwner: { /* TextProps */ },
-    keyResultStatus: { /* StatusIndicatorStyles */ },
-    keyResultTags: { /* ViewProps */ },
-    keyResultTag: { /* ViewProps */ },
-    keyResultTagText: { /* TextProps */ },
-    keyResultProgressSection: { /* ViewProps */ },
-    keyResultProgressValue: { /* TextProps */ },
-    keyResultProgressBar: { /* ProgressBarStyles */ },
-
-    // Footer styling
-    footer: { /* ViewProps */ },
-  }}
-/>
-```
+The OKR component can be extensively customized using the `views` prop. See the `OKRViews` type definition for all available options.
 
-### Custom Styling Example
+![Custom styled OKR](https://placehold.co/800x250)
 
 ```jsx
 import React from 'react';
@@ -369,6 +352,9 @@ export const CustomStyledOKR = () => {
 };
 ```
 
+## Live Demo
+A live demo of the OKR component with all its features is available [here](https://app-studio-web.vercel.app/components/okr).
+
 ## Status Derivation
 
 If a status is not explicitly provided, it will be automatically derived from the progress value:
@@ -395,7 +381,7 @@ Each status is displayed with a corresponding visual indicator:
 
 ## Theme Support
 
-The OKR component fully supports both light and dark themes:
+The OKR component fully supports both light and dark themes.
 
 ```jsx
 // Light theme (default)
@@ -464,12 +450,3 @@ The OKR component implements the following accessibility features:
 - [StatusIndicator](../feedback/status-indicator.md) - Used internally for status display
 - [Card](./card.md) - Similar container component for content display
 - [Badge](./badge.md) - Can be used in custom footers for additional metadata
-
-## Common Use Cases
-
-- Strategic planning and goal tracking
-- Team performance dashboards
-- Product roadmap visualization
-- Project milestone tracking
-- KPI monitoring and reporting
-- Quarterly business reviews (QBRs)

package/docs/components/Tabs.mdx

@@ -125,7 +125,7 @@ Allows for optional styling to be applied to the tabs via a TabsStyles object.
 
 ```tsx
 import React from 'react';
-import { Text } from '../../Text/Text';
+import { Text } from 'app-studio';
 import { Tabs } from '../../Tabs/Tabs';
 
 export const StylesTabs = () => {

package/docs/components/ToggleGroup.mdx

@@ -61,7 +61,7 @@ Mandatory array of items defining each toggle in the group.
 ```tsx
 import React from 'react';
 import { ToggleGroup } from '../ToggleGroup';
-import { Text } from '../../Text/Text';
+import { Text } from 'app-studio';
 
 export const ItemsDemo = () => {
   const items = [
@@ -79,7 +79,7 @@ Optional variant prop to specify the visual style of the toggle group.
 
 ```tsx
 import React from 'react';
-import { Text } from '../../Text/Text';
+import { Text } from 'app-studio';
 import { ToggleGroup } from '../ToggleGroup';
 import { Variant } from '../ToggleGroup/ToggleGroup.type';
 import { Vertical } from 'app-studio';
@@ -108,7 +108,7 @@ Optional colorScheme prop for theming the toggle group.
 import React from 'react';
 import { ToggleGroup } from '../ToggleGroup';
 import { Vertical } from 'app-studio';
-import { Text } from '../../Text/Text';
+import { Text } from 'app-studio';
 
 export const ColorSchemeDemo = () => {
   const items = [
@@ -139,7 +139,7 @@ Optional callback function that fires when the active toggle changes, providing
 ```tsx
 import React, { useState } from 'react';
 import { ToggleGroup } from '../ToggleGroup';
-import { Text } from '../../Text/Text';
+import { Text } from 'app-studio';
 import { Vertical } from 'app-studio';
 
 export const OnToggleChangeDemo = () => {

package/docs/components/Tooltip.mdx

@@ -117,7 +117,7 @@ Tooltips can contain rich content, not just text.
 import React from 'react';
 import { Tooltip } from '../Tooltip';
 import { Button } from '../../Button/Button';
-import { Text } from '../../Text/Text';
+import { Text } from 'app-studio';
 import { Vertical } from 'app-studio';
 
 export const CustomContentTooltip = () => {
@@ -153,7 +153,7 @@ For more control, you can use the compound component pattern.
 import React from 'react';
 import { Tooltip } from '../Tooltip';
 import { Button } from '../../Button/Button';
-import { Text } from '../../Text/Text';
+import { Text } from 'app-studio';
 
 export const CompoundTooltip = () => {
   return (

package/docs/conventions.md

@@ -61,7 +61,7 @@ import * as Yup from 'yup';
 import { View, Horizontal, Vertical, useTheme } from 'app-studio';
 
 // Internal component imports
-import { Text } from '../../Text/Text';
+import { Text } from 'app-studio';
 import { Button } from '../../Button/Button';
 
 // Type imports

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@app-studio/web",
-  "version": "0.9.36",
+  "version": "0.9.38",
   "main": "dist/index.js",
   "typings": "dist/components/index.d.ts",
   "files": [
@@ -112,7 +112,7 @@
     "@types/react-test-renderer": "^18.0.0",
     "@typescript-eslint/eslint-plugin": "^5.59.7",
     "@typescript-eslint/parser": "^5.59.7",
-    "app-studio": "^0.6.21",
+    "app-studio": "^0.6.28",
     "async-mutex": "^0.5.0",
     "babel-jest": "^29.5.0",
     "babel-loader": "^9.1.2",

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

@@ -1,74 +0,0 @@
-import { ViewProps } from 'app-studio';
-export declare type CalendarView = 'month' | 'week' | 'day';
-export interface CalendarEvent {
-    /** Unique identifier for the event */
-    id: string;
-    /** Event title/label */
-    title: string;
-    /** 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;
-    /** Style overrides for the month/year title */
-    monthTitle?: ViewProps;
-    /** Style overrides for navigation buttons */
-    navButton?: ViewProps;
-    /** Style overrides for view switcher buttons */
-    viewSwitcher?: ViewProps;
-    /** Style overrides for the month grid */
-    monthGrid?: ViewProps;
-    /** Style overrides for weekday header row */
-    weekdayHeader?: 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;
-    /** Style overrides for time column (day view) */
-    timeColumn?: ViewProps;
-    /** Style overrides for time slot */
-    timeSlot?: ViewProps;
-}
-export interface CalendarProps {
-    /** Initial date to display in ISO format (YYYY-MM-DD) or Date object */
-    initialDate?: string | Date;
-    /** Initial view to display */
-    initialView?: CalendarView;
-    /** 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;
-    /** Callback when view changes */
-    onViewChange?: (view: CalendarView) => void;
-    /** 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

@@ -1,107 +0,0 @@
-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,91 +0,0 @@
-import { CalendarEvent } from './Calendar.props';
-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;
-}
-/**
- * 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,3 +0,0 @@
-import React from 'react';
-import { CalendarProps } from './Calendar.props';
-export declare const Calendar: React.FC<CalendarProps>;

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

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