@app-studio/web 0.9.41 → 0.9.43

package/docs/components/HoverCard.mdx

@@ -1,140 +1,72 @@
 # HoverCard
 
-A floating card that appears when hovering over a trigger element. Supports configurable open and close delays for a smoother user experience.
+Displays rich content on hover, with customizable trigger and content presentation.
 
 ### **Import**
-  ```tsx
-  import { HoverCard } from '@app-studio/web';
-  ```
-
-### **Default**
 ```tsx
-import React from 'react';
-import { HoverCard } from '../HoverCard';
-import { Button } from '../../Button/Button';
-import { Text } from '@app-studio/web';
-
-export const DefaultHoverCard = () => {
-  return (
-    <HoverCard>
-      <HoverCard.Trigger>
-        <Button>Hover Me</Button>
-      </HoverCard.Trigger>
-      <HoverCard.Content>
-        <Text>
-          The React Framework – created and maintained by @vercel.
-        </Text>
-      </HoverCard.Content>
-    </HoverCard>
-  );
-};
+import { HoverCard } from '@app-studio/web';
 ```
 
-### **Positioning**
-You can control the position of the HoverCard content using the `side` and `align` props.
-
-```tsx
-import React from 'react';
-import { HoverCard } from '../HoverCard';
-import { Button } from '../../Button/Button';
-import { Text } from '@app-studio/web';
-
-export const PositionedHoverCard = () => {
-  return (
-    <HoverCard>
-      <HoverCard.Trigger>
-        <Button>Hover Me</Button>
-      </HoverCard.Trigger>
-      <HoverCard.Content side="top" align="center">
-        <Text>
-          This content appears above the trigger.
-        </Text>
-      </HoverCard.Content>
-    </HoverCard>
-  );
-};
-```
-
-### **Custom Styling**
-You can customize the appearance of the HoverCard using the `views` prop.
-
-```tsx
-import React from 'react';
-import { HoverCard } from '../HoverCard';
-import { Button } from '../../Button/Button';
-import { Text } from '@app-studio/web';
-
-export const StyledHoverCard = () => {
-  return (
-    <HoverCard>
-      <HoverCard.Trigger>
-        <Button variant="outline">Custom Styled HoverCard</Button>
-      </HoverCard.Trigger>
-      <HoverCard.Content
-        views={{
-          container: {
-            backgroundColor: 'color.blue',
-            color: 'color.white',
-            borderRadius: '8px',
-            padding: '16px',
-          },
-        }}
-      >
-        <Text color="white">
-          This HoverCard has custom styling with a primary background color.
-        </Text>
-      </HoverCard.Content>
-    </HoverCard>
-  );
-};
-```
-
-### **Delay Options**
-You can control the timing of when the HoverCard opens and closes using the `openDelay` and `closeDelay` props.
-
+### **Default**
 ```tsx
 import React from 'react';
-import { HoverCard } from '../HoverCard';
-import { Button } from '../../Button/Button';
-import { Text } from '@app-studio/web';
+import { HoverCard } from '@app-studio/web';
+import { Text, Vertical, View } from 'app-studio';
+import { Button } from '@app-studio/web';
 
-export const DelayedHoverCard = () => {
+export const DefaultHoverCard = () => {
   return (
-    <HoverCard openDelay={100} closeDelay={1000}>
-      <HoverCard.Trigger>
-        <Button>Hover Me</Button>
-      </HoverCard.Trigger>
-      <HoverCard.Content>
-        <Text>
-          This card opens quickly (100ms) but stays open longer (1000ms) after you move away.
-        </Text>
-      </HoverCard.Content>
-    </HoverCard>
+    <Vertical gap={20} width="100%" maxWidth={400}>
+      <View>
+        <Text marginBottom={10}>Default HoverCard</Text>
+        <HoverCard>
+          <HoverCard.Trigger>
+            <Button>Hover Me</Button>
+          </HoverCard.Trigger>
+          <HoverCard.Content>
+            <Text>
+              The React Framework – created and maintained by @vercel.
+            </Text>
+          </HoverCard.Content>
+        </HoverCard>
+      </View>
+
+      <View>
+        <Text marginBottom={10}>HoverCard with different positions</Text>
+        <HoverCard>
+          <HoverCard.Trigger>
+            <Button>Hover for Top Position</Button>
+          </HoverCard.Trigger>
+          <HoverCard.Content side="top">
+            <Text>This content appears above the trigger.</Text>
+          </HoverCard.Content>
+        </HoverCard>
+      </View>
+
+      <View>
+        <Text marginBottom={10}>HoverCard with custom styling</Text>
+        <HoverCard>
+          <HoverCard.Trigger>
+            <Button variant="outline">Custom Styled HoverCard</Button>
+          </HoverCard.Trigger>
+          <HoverCard.Content
+            views={{
+              container: {
+                backgroundColor: 'color.blue',
+                color: 'color.white',
+                borderRadius: '8px',
+                padding: '16px',
+              },
+            }}
+          >
+            <Text color="white">
+              This HoverCard has custom styling with a primary background color.
+            </Text>
+          </HoverCard.Content>
+        </HoverCard>
+      </View>
+    </Vertical>
   );
 };
 ```
 
-### **Using with Other Components**
-You can use the `asChild` prop on the Trigger to apply hover behavior directly to another component.
-
-```tsx
-import React from 'react';
-import { HoverCard } from '../HoverCard';
-import { Link } from '../../Link/Link';
-import { Text } from '@app-studio/web';
-
-export const LinkHoverCard = () => {
-  return (
-    <HoverCard>
-      <HoverCard.Trigger asChild>
-        <Link to="https://example.com">example.com</Link>
-      </HoverCard.Trigger>
-      <HoverCard.Content>
-        <Text>
-          This card uses the asChild prop to apply hover behavior directly to the Link component.
-        </Text>
-      </HoverCard.Content>
-    </HoverCard>
-  );
-};
-```

package/docs/components/KanbanBoard.mdx

@@ -21,8 +21,8 @@ A basic Kanban board with three columns and some cards.
 
 ```tsx
 import React, { useState } from 'react';
-import { KanbanBoard } from '../KanbanBoard';
-import { KanbanBoardColumn } from '../KanbanBoard/KanbanBoard.props';
+import { KanbanBoard } from '@app-studio/web';
+import { KanbanBoardColumn } from '@app-studio/web';
 
 export const DefaultKanbanBoard = () => {
   const [columns, setColumns] = useState<KanbanBoardColumn[]>([
@@ -61,8 +61,8 @@ Customize how cards are displayed using the `renderCard` prop. This is useful fo
 
 ```tsx
 import React, { useState } from 'react';
-import { KanbanBoard } from '../KanbanBoard';
-import { KanbanBoardColumn, KanbanBoardCard } from '../KanbanBoard/KanbanBoard.props';
+import { KanbanBoard } from '@app-studio/web';
+import { KanbanBoardColumn, KanbanBoardCard } from '@app-studio/web';
 import { View, Text, Horizontal } from '@app-studio/web';
 
 export const CustomRenderKanbanBoard = () => {
@@ -129,9 +129,9 @@ Use `renderColumnHeader` to create a custom header, for example to add an "Add C
 
 ```tsx
 import React, { useState } from 'react';
-import { KanbanBoard } from '../KanbanBoard';
-import { Button } from '../Button';
-import { KanbanBoardColumn, KanbanBoardCard } from '../KanbanBoard/KanbanBoard.props';
+import { KanbanBoard } from '@app-studio/web';
+import { Button } from '@app-studio/web';
+import { KanbanBoardColumn, KanbanBoardCard } from '@app-studio/web';
 import { View, Text, Horizontal } from '@app-studio/web';
 
 export const CustomHeaderKanbanBoard = () => {
@@ -174,8 +174,8 @@ You can implement inline editing of card titles by using the `onCardTitleChange`
 
 ```tsx
 import React, { useState } from 'react';
-import { KanbanBoard } from '../KanbanBoard';
-import { KanbanBoardColumn, KanbanBoardCard } from '../KanbanBoard/KanbanBoard.props';
+import { KanbanBoard } from '@app-studio/web';
+import { KanbanBoardColumn, KanbanBoardCard } from '@app-studio/web';
 import { Input, Text } from '@app-studio/web';
 
 export const EditableKanbanBoard = () => {

package/docs/components/Link.mdx

@@ -1,42 +1,45 @@
 # Link
 
-Enables users to navigate to specified URLs or paths.
+This component provides a navigational link that can render children, manage external links, and apply various text decoration styles.
 
 ### **Import**
-  ```tsx
-  import { Link } from '@app-studio/web';
-  ```
+```tsx
+import { Link } from '@app-studio/web';
+```
 
 ### **Default**
 ```tsx
 import React from 'react';
 
-import { Link } from '../Link';
-
-export const DefaultLink = () => <Link href="/">Default</Link>;
+import { Link } from '@app-studio/web';
 
+export const DefaultLink = () => <Link to="/">Default</Link>;
 ```
 
 ### **underline**
 Optional prop to define the text decoration style of the link as underline views.
 
+- **Type:** `TextDecorationStyle`
+- **Default:** `default`
+- **Possible Values:** `default, hover, underline`
+
 ```tsx
 import React from 'react';
-import { Text } from '@app-studio/web';
-import { Vertical } from '@app-studio/web';
+import { Text } from 'app-studio';
+import { Vertical } from 'app-studio';
 
-import { Link } from '../Link';
+import { Link } from '@app-studio/web';
 
 export const UnderlineLink = () => (
   <Vertical gap={10}>
-    <Link href={'https://www.npmjs.com/package/app-studio'} underline="default">
+    <Link to={'https://www.npmjs.com/package/app-studio'} underline="default">
       Default
     </Link>
-    <Link href={'https://www.npmjs.com/package/app-studio'} underline="hover">
+    <Link to={'https://www.npmjs.com/package/app-studio'} underline="hover">
       Hover
     </Link>
     <Link
-      href={'https://www.npmjs.com/package/app-studio'}
+      to={'https://www.npmjs.com/package/app-studio'}
       underline="underline"
       color="theme.primary"
       textDecorationColor="theme.primary"
@@ -45,39 +48,28 @@ export const UnderlineLink = () => (
     </Link>
   </Vertical>
 );
-
 ```
 
 ### **isExternal**
 Optional boolean indicating whether the link points to an external resource. Default behavior may vary based on this value.
 
+- **Type:** `boolean`
+- **Default:** `false`
+
 ```tsx
 import React from 'react';
-import { Text } from '@app-studio/web';
+import { Text } from 'app-studio';
 
-import { Link } from '../Link';
+import { Link } from '@app-studio/web';
 
 export const ExternalLink = () => (
   <Link
-    href={'https://www.npmjs.com/package/app-studio'}
+    to={'https://www.npmjs.com/package/app-studio'}
     isExternal
     iconSize="md"
   >
     <Text size="xl">External</Text>
   </Link>
 );
-
 ```
 
-## Props
-
-| Prop               | Type          | Description                                                                                                                               | Default |
-| ------------------ | ------------- | ----------------------------------------------------------------------------------------------------------------------------------------- | ------- |
-| href               | string        | The URL or path the link points to.                                                                                                       |         |
-| underline          | string        | The text decoration style of the link ('default', 'hover', 'underline').                                                                 |         |
-| isExternal         | boolean       | Whether the link points to an external resource.                                                                                          | false   |
-| iconSize           | Size          | The size of the icon if the link is external ('xs', 'sm', 'md', 'lg', 'xl').                                                              | 'md'    |
-| color              | string        | The color of the link text.                                                                                                               |         |
-| textDecorationColor | string        | The color of the text decoration (e.g., underline).                                                                                       |         |
-| styles             | CSSProperties | Optional custom styles for the link (container, text, icon).                                                                              |         |
-| children           | React.ReactNode | The content of the link (typically text or an icon).                                                                                       |         |