@app-studio/web 0.9.39 → 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';
-
-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';
-
-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';
-
-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';
+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';
-
-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/Icon.mdx

@@ -20,7 +20,7 @@ A comprehensive collection of SVG icons with consistent styling, customizable co
 ```tsx
 import React from 'react';
 import { UploadIcon, EditIcon, DeleteIcon } from '@app-studio/web';
-import { Horizontal } from 'app-studio';
+import { Horizontal } from '@app-studio/web';
 
 export const BasicIcons = () => (
   <Horizontal gap={16}>
@@ -35,7 +35,7 @@ export const BasicIcons = () => (
 ```tsx
 import React from 'react';
 import { StarIcon } from '@app-studio/web';
-import { Horizontal } from 'app-studio';
+import { Horizontal } from '@app-studio/web';
 
 export const IconSizes = () => (
   <Horizontal gap={16} alignItems="center">
@@ -52,7 +52,7 @@ export const IconSizes = () => (
 ```tsx
 import React from 'react';
 import { HeartIcon } from '@app-studio/web';
-import { Horizontal } from 'app-studio';
+import { Horizontal } from '@app-studio/web';
 
 export const IconColors = () => (
   <Horizontal gap={16}>
@@ -69,7 +69,7 @@ export const IconColors = () => (
 ```tsx
 import React from 'react';
 import { StarIcon, HeartIcon, BookmarkIcon } from '@app-studio/web';
-import { Horizontal, Vertical, Text } from 'app-studio';
+import { Horizontal, Vertical, Text } from '@app-studio/web';
 
 export const IconVariants = () => (
   <Vertical gap={16}>
@@ -94,7 +94,7 @@ export const IconVariants = () => (
 ```tsx
 import React from 'react';
 import { ArrowIcon } from '@app-studio/web';
-import { Horizontal, Text } from 'app-studio';
+import { Horizontal, Text } from '@app-studio/web';
 
 export const IconOrientations = () => (
   <Horizontal gap={24} alignItems="center">
@@ -181,7 +181,7 @@ The icon library includes a comprehensive set of icons organized by category:
 import React from 'react';
 import { Button } from '@app-studio/web';
 import { EditIcon, DeleteIcon, SaveIcon } from '@app-studio/web';
-import { Horizontal } from 'app-studio';
+import { Horizontal } from '@app-studio/web';
 
 export const IconButtons = () => (
   <Horizontal gap={12}>
@@ -213,7 +213,7 @@ export const IconButtons = () => (
 ```tsx
 import React from 'react';
 import { StarIcon } from '@app-studio/web';
-import { View } from 'app-studio';
+import { View } from '@app-studio/web';
 
 export const CustomStyledIcon = () => (
   <View>
@@ -265,7 +265,7 @@ All icons inherit from the base `IconWrapper` component which extends `ViewProps
 ```tsx
 import React from 'react';
 import { MenuIcon } from '@app-studio/web';
-import { useBreakpoint } from 'app-studio';
+import { useBreakpoint } from '@app-studio/web';
 
 export const ResponsiveIcon = () => {
   const { isMobile, isTablet, isDesktop } = useBreakpoint();
@@ -302,7 +302,7 @@ export const IconWithTooltip = () => (
 ```tsx
 import React, { useState } from 'react';
 import { HeartIcon } from '@app-studio/web';
-import { View } from 'app-studio';
+import { View } from '@app-studio/web';
 
 export const AnimatedIcon = () => {
   const [isLiked, setIsLiked] = useState(false);
@@ -330,7 +330,7 @@ export const AnimatedIcon = () => {
 ```tsx
 import React from 'react';
 import * as Icons from '@app-studio/web';
-import { View, Text } from 'app-studio';
+import { View, Text } from '@app-studio/web';
 
 export const IconGrid = () => {
   const iconNames = Object.keys(Icons).filter(name =>

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,9 +61,9 @@ 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 { View, Text, Horizontal } from 'app-studio';
+import { KanbanBoard } from '@app-studio/web';
+import { KanbanBoardColumn, KanbanBoardCard } from '@app-studio/web';
+import { View, Text, Horizontal } from '@app-studio/web';
 
 export const CustomRenderKanbanBoard = () => {
   const [columns, setColumns] = useState<KanbanBoardColumn[]>([
@@ -129,10 +129,10 @@ 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 { View, Text, Horizontal } from 'app-studio';
+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 = () => {
   const [columns, setColumns] = useState<KanbanBoardColumn[]>([
@@ -174,9 +174,9 @@ 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 { Input, Text } from 'app-studio';
+import { KanbanBoard } from '@app-studio/web';
+import { KanbanBoardColumn, KanbanBoardCard } from '@app-studio/web';
+import { Input, Text } from '@app-studio/web';
 
 export const EditableKanbanBoard = () => {
   const [columns, setColumns] = useState<KanbanBoardColumn[]>([

package/docs/components/Label.mdx

@@ -12,7 +12,7 @@ A semantic text element designed for form labels and descriptive text with compr
 import React from 'react';
 import { Label } from '@app-studio/web';
 import { TextField } from '@app-studio/web';
-import { Vertical } from 'app-studio';
+import { Vertical } from '@app-studio/web';
 
 export const BasicLabel = () => (
   <Vertical gap={8}>
@@ -26,7 +26,7 @@ export const BasicLabel = () => (
 ```tsx
 import React from 'react';
 import { Label } from '@app-studio/web';
-import { Vertical } from 'app-studio';
+import { Vertical } from '@app-studio/web';
 
 export const LabelSizes = () => (
   <Vertical gap={16}>
@@ -43,7 +43,7 @@ export const LabelSizes = () => (
 ```tsx
 import React from 'react';
 import { Label } from '@app-studio/web';
-import { Vertical } from 'app-studio';
+import { Vertical } from '@app-studio/web';
 
 export const LabelWeights = () => (
   <Vertical gap={12}>
@@ -60,7 +60,7 @@ export const LabelWeights = () => (
 ```tsx
 import React from 'react';
 import { Label } from '@app-studio/web';
-import { Vertical } from 'app-studio';
+import { Vertical } from '@app-studio/web';
 
 export const HeadingLabels = () => (
   <Vertical gap={16}>
@@ -78,7 +78,7 @@ export const HeadingLabels = () => (
 ```tsx
 import React from 'react';
 import { Label } from '@app-studio/web';
-import { Vertical } from 'app-studio';
+import { Vertical } from '@app-studio/web';
 
 export const TextDecorations = () => (
   <Vertical gap={12}>
@@ -98,7 +98,7 @@ export const TextDecorations = () => (
 import React from 'react';
 import { Label } from '@app-studio/web';
 import { TextField, TextArea } from '@app-studio/web';
-import { Vertical, Horizontal } from 'app-studio';
+import { Vertical, Horizontal } from '@app-studio/web';
 
 export const FormLabels = () => (
   <Vertical gap={20}>
@@ -131,7 +131,7 @@ export const FormLabels = () => (
 ```tsx
 import React from 'react';
 import { Label } from '@app-studio/web';
-import { View, Vertical } from 'app-studio';
+import { View, Vertical } from '@app-studio/web';
 
 export const SectionHeaders = () => (
   <Vertical gap={24}>
@@ -172,7 +172,7 @@ export const SectionHeaders = () => (
 ```tsx
 import React from 'react';
 import { Label } from '@app-studio/web';
-import { Vertical } from 'app-studio';
+import { Vertical } from '@app-studio/web';
 
 export const ColoredLabels = () => (
   <Vertical gap={12}>

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';
 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';
 
-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).                                                                                       |         |