@cube-dev/ui-kit 0.0.0-canary-d688797 → 0.0.0-canary-bdfccbd

package/docs/components/content/Layout.md

@@ -15,9 +15,17 @@ A compound component system for building application shells with headers, footer
 
 ### Properties
 
+- **`doNotOverflow`** `boolean` (default: `false`) — When true, applies `overflow: hidden` to the root element. By default, overflow is visible.
+- **`innerRef`** `ForwardedRef<HTMLDivElement>` — Ref for the inner content element
+- **`innerProps`** `HTMLAttributes<HTMLDivElement>` — Props to spread on the Inner sub-element
+- **`isGrid`** `boolean` — Enable grid display mode
+- **`columns`** `string` — Grid template columns (when `isGrid` is enabled)
+- **`rows`** `string` — Grid template rows (when `isGrid` is enabled)
+- **`template`** `string` — Grid template shorthand (when `isGrid` is enabled)
+
 ### Base Properties
 
-Supports [Base properties](../../tasty/tasty.md).
+Supports [Base properties](../../BaseProperties.md).
 
 ### Styling Properties
 
@@ -32,29 +40,21 @@ Customizes the root Layout element.
 
 These properties allow direct style application: `width`, `height`, `padding`, `gap`, `fill`, `border`, `flow`.
 
-### Overflow Control
-
-| Property | Type | Default | Description |
-|----------|------|---------|-------------|
-| doNotOverflow | `boolean` | `false` | When true, applies `overflow: hidden` to the root element. By default, overflow is visible. |
-
-### Inner Element Properties
+### Style Defaults
 
-| Property | Type | Description |
-|----------|------|-------------|
-| innerRef | `ForwardedRef<HTMLDivElement>` | Ref for the inner content element |
-| innerProps | `HTMLAttributes<HTMLDivElement>` | Props to spread on the Inner sub-element |
+- `position` — `relative`
+- `display` — `block`
+- `overflow` — `visible` (switches to `hidden` when `doNotOverflow`)
+- `flexGrow` — `1`
+- `placeSelf` — `stretch`
+- `$content-padding` — `1x` (inherited by all sub-components for consistent inner padding)
 
-### Grid Mode
-
-When `isGrid` is enabled, the inner content becomes a CSS grid:
-
-| Property | Type | Description |
-|----------|------|-------------|
-| isGrid | `boolean` | Enable grid display mode |
-| columns | `string` | Grid template columns |
-| rows | `string` | Grid template rows |
-| template | `string` | Grid template shorthand |
+**Inner element:**
+- `position` — `absolute`
+- `inset` — Adjusts based on registered panel sizes
+- `display` — `flex`
+- `flow` — `column`
+- `transition` — `inset` (only when `hasTransition` is enabled on panels)
 
 ---
 
@@ -74,9 +74,7 @@ A horizontal bar typically placed at the top for navigation and actions.
 </Layout.Toolbar>
 ```
 
-| Property | Type | Default | Description |
-|----------|------|---------|-------------|
-| children | `ReactNode` | - | Content split between left and right |
+- **`children`** `ReactNode` — Content split between left and right
 
 **Sub-elements:**
 - No sub-elements, styles apply to container
@@ -100,15 +98,13 @@ A semantic page header with title, breadcrumbs, subtitle, and action areas.
 />
 ```
 
-| Property | Type | Default | Description |
-|----------|------|---------|-------------|
-| title | `ReactNode` | - | Page/section title |
-| level | `1-6` | `3` | Heading level for accessibility |
-| breadcrumbs | `[label, href][]` | - | Navigation breadcrumbs |
-| subtitle | `ReactNode` | - | Text below the title |
-| suffix | `ReactNode` | - | Content next to the title |
-| extra | `ReactNode` | - | Content on the right side |
-| onBack | `() => void` | - | Callback for the back button. When provided, a back arrow button appears to the left of the title. |
+- **`title`** `ReactNode` — Page/section title
+- **`level`** `1-6` (default: `3`) — Heading level for accessibility
+- **`breadcrumbs`** `[label, href][]` — Navigation breadcrumbs
+- **`subtitle`** `ReactNode` — Text below the title
+- **`suffix`** `ReactNode` — Content next to the title
+- **`extra`** `ReactNode` — Content on the right side
+- **`onBack`** `() => void` — Callback for the back button. When provided, a back arrow button appears to the left of the title.
 
 **Sub-elements:**
 - `Back` - Back button container (visible when `onBack` is provided)
@@ -130,12 +126,10 @@ Scrollable content area with automatic overflow handling and custom scrollbar st
 </Layout.Content>
 ```
 
-| Property | Type | Default | Description |
-|----------|------|---------|-------------|
-| scrollbar | `'default' \| 'thin' \| 'tiny' \| 'none'` | `'thin'` | Scrollbar style |
-| children | `ReactNode` | - | Content to display |
-| innerRef | `ForwardedRef<HTMLDivElement>` | - | Ref for the inner content element |
-| innerProps | `HTMLAttributes<HTMLDivElement>` | - | Props to spread on the Inner sub-element |
+- **`scrollbar`** `'default' | 'thin' | 'tiny' | 'none'` (default: `'thin'`) — Scrollbar style
+- **`children`** `ReactNode` — Content to display
+- **`innerRef`** `ForwardedRef<HTMLDivElement>` — Ref for the inner content element
+- **`innerProps`** `HTMLAttributes<HTMLDivElement>` — Props to spread on the Inner sub-element
 
 **Scrollbar types:**
 - `default` - Browser default scrollbar
@@ -161,11 +155,9 @@ Horizontally centered content area with constrained width. Ideal for forms, arti
 </Layout.Container>
 ```
 
-| Property | Type | Default | Description |
-|----------|------|---------|-------------|
-| children | `ReactNode` | - | Content to display |
-| innerRef | `ForwardedRef<HTMLDivElement>` | - | Ref for the inner content element |
-| innerProps | `HTMLAttributes<HTMLDivElement>` | - | Props to spread on the Inner sub-element |
+- **`children`** `ReactNode` — Content to display
+- **`innerRef`** `ForwardedRef<HTMLDivElement>` — Ref for the inner content element
+- **`innerProps`** `HTMLAttributes<HTMLDivElement>` — Props to spread on the Inner sub-element
 
 **Width constraints:**
 - Minimum: `40x` (320px at default gap)
@@ -189,9 +181,7 @@ Centered content area for both horizontal and vertical alignment. Extends `Layou
 </Layout.Center>
 ```
 
-| Property | Type | Default | Description |
-|----------|------|---------|-------------|
-| children | `ReactNode` | - | Content to display |
+- **`children`** `ReactNode` — Content to display
 
 **Styling differences from Container:**
 - Content is centered both horizontally and vertically
@@ -216,10 +206,8 @@ Footer area with support for inverted content order (primary actions on right).
 </Layout.Footer>
 ```
 
-| Property | Type | Default | Description |
-|----------|------|---------|-------------|
-| invertOrder | `boolean` | `false` | Reverse child order (primary on right) |
-| children | `ReactNode` | - | Footer content |
+- **`invertOrder`** `boolean` (default: `false`) — Reverse child order (primary on right)
+- **`children`** `ReactNode` — Footer content
 
 ---
 
@@ -246,47 +234,42 @@ Collapsible side panel with resizing, transitions, and multiple rendering modes.
 </Layout.Panel>
 ```
 
-| Property | Type | Default | Description |
-|----------|------|---------|-------------|
-| side | `'left' \| 'right' \| 'top' \| 'bottom'` | `'left'` | Panel position |
-| mode | `'default' \| 'sticky' \| 'overlay' \| 'dialog'` | `'default'` | Panel rendering mode |
-| size | `number` | - | Controlled panel size (px) |
-| defaultSize | `number` | `280` | Initial uncontrolled size |
-| minSize | `number` | `200` | Minimum size constraint |
-| maxSize | `number` | - | Maximum size constraint |
-| isResizable | `boolean` | `false` | Enable drag-to-resize |
-| isOpen | `boolean` | - | Controlled open state |
-| defaultIsOpen | `boolean` | `true` | Initial open state |
-| onOpenChange | `(isOpen: boolean) => void` | - | Open state callback |
-| onSizeChange | `(size: number) => void` | - | Size change callback |
-| sizeStorageKey | `string` | - | localStorage key for persisting size |
-| hasTransition | `boolean` | `false` | Enable slide animation |
-| isDismissable | `boolean` | `true` | Allow dismissing overlay/dialog by click or Escape |
-| overlayStyles | `Styles` | - | Styles for the overlay backdrop in overlay mode |
-| isDialogOpen | `boolean` | - | Controlled dialog state (mode="dialog") |
-| defaultIsDialogOpen | `boolean` | `false` | Initial dialog state |
-| onDialogOpenChange | `(isOpen: boolean) => void` | - | Dialog state callback |
-| dialogProps | `CubeDialogContainerProps` | - | Props for dialog mode |
-| innerRef | `ForwardedRef<HTMLDivElement>` | - | Ref for the inner content element |
-| innerProps | `HTMLAttributes<HTMLDivElement>` | - | Props to spread on the Inner sub-element |
+- **`side`** `'left' | 'right' | 'top' | 'bottom'` (default: `'left'`) — Panel position
+- **`mode`** `'default' | 'sticky' | 'overlay' | 'dialog'` (default: `'default'`) — Panel rendering mode
+- **`size`** `number` — Controlled panel size (px)
+- **`defaultSize`** `number` (default: `280`) — Initial uncontrolled size
+- **`minSize`** `number` (default: `200`) — Minimum size constraint
+- **`maxSize`** `number` — Maximum size constraint
+- **`isResizable`** `boolean` (default: `false`) — Enable drag-to-resize
+- **`isOpen`** `boolean` — Controlled open state
+- **`defaultIsOpen`** `boolean` (default: `true`) — Initial open state
+- **`onOpenChange`** `(isOpen: boolean) => void` — Open state callback
+- **`onSizeChange`** `(size: number) => void` — Size change callback
+- **`sizeStorageKey`** `string` — localStorage key for persisting size
+- **`hasTransition`** `boolean` (default: `false`) — Enable slide animation
+- **`isDismissable`** `boolean` (default: `true`) — Allow dismissing overlay/dialog by click or Escape
+- **`overlayStyles`** `Styles` — Styles for the overlay backdrop in overlay mode
+- **`isDialogOpen`** `boolean` — Controlled dialog state (mode="dialog")
+- **`defaultIsDialogOpen`** `boolean` (default: `false`) — Initial dialog state
+- **`onDialogOpenChange`** `(isOpen: boolean) => void` — Dialog state callback
+- **`dialogProps`** `CubeDialogContainerProps` — Props for dialog mode
+- **`innerRef`** `ForwardedRef<HTMLDivElement>` — Ref for the inner content element
+- **`innerProps`** `HTMLAttributes<HTMLDivElement>` — Props to spread on the Inner sub-element
 
 **Panel Modes:**
 
-| Mode | Size Propagation | Overlay | Description |
-|------|-----------------|---------|-------------|
-| `default` | Yes | No | Standard panel that pushes content aside |
-| `sticky` | No | No | Panel floats over content without affecting layout |
-| `overlay` | Yes | Yes | Panel with dismissable backdrop overlay |
-| `dialog` | No | Via Dialog | Panel renders as a modal dialog |
+- `default` — Standard panel that pushes content aside (propagates size, no overlay)
+- `sticky` — Panel floats over content without affecting layout (no size propagation, no overlay)
+- `overlay` — Panel with dismissable backdrop overlay (propagates size, with overlay)
+- `dialog` — Panel renders as a modal dialog (no size propagation, overlay via Dialog)
 
 **Modifiers:**
-| Modifier | Type | Description |
-|----------|------|-------------|
-| side | `'left' \| 'right' \| 'top' \| 'bottom'` | Panel position |
-| drag | `boolean` | Currently being resized |
-| horizontal | `boolean` | Left or right panel |
-| has-transition | `boolean` | Transition enabled |
-| offscreen | `boolean` | Panel is collapsed |
+
+- `side` `'left' | 'right' | 'top' | 'bottom'` — Panel position
+- `drag` `boolean` — Currently being resized
+- `horizontal` `boolean` — Left or right panel
+- `has-transition` `boolean` — Transition enabled
+- `offscreen` `boolean` — Panel is collapsed
 
 ---
 
@@ -308,19 +291,17 @@ Resizable inline section within a layout. Unlike Layout.Panel (which is absolute
 </Layout.Pane>
 ```
 
-| Property | Type | Default | Description |
-|----------|------|---------|-------------|
-| resizeEdge | `'right' \| 'bottom'` | `'right'` | Edge where resize handler appears |
-| isResizable | `boolean` | `false` | Enable resize functionality |
-| size | `number \| string` | - | Controlled size (width for right edge, height for bottom edge) |
-| defaultSize | `number \| string` | `200` | Default size for uncontrolled state |
-| minSize | `number \| string` | - | Minimum size constraint |
-| maxSize | `number \| string` | - | Maximum size constraint |
-| onSizeChange | `(size: number) => void` | - | Size change callback |
-| scrollbar | `ScrollbarType` | `'thin'` | Scrollbar style |
-| children | `ReactNode` | - | Content to display |
-| innerRef | `ForwardedRef<HTMLDivElement>` | - | Ref for the inner content element |
-| innerProps | `HTMLAttributes<HTMLDivElement>` | - | Props to spread on the Inner sub-element |
+- **`resizeEdge`** `'right' | 'bottom'` (default: `'right'`) — Edge where resize handler appears
+- **`isResizable`** `boolean` (default: `false`) — Enable resize functionality
+- **`size`** `number | string` — Controlled size (width for right edge, height for bottom edge)
+- **`defaultSize`** `number | string` (default: `200`) — Default size for uncontrolled state
+- **`minSize`** `number | string` — Minimum size constraint
+- **`maxSize`** `number | string` — Maximum size constraint
+- **`onSizeChange`** `(size: number) => void` — Size change callback
+- **`scrollbar`** `ScrollbarType` (default: `'thin'`) — Scrollbar style
+- **`children`** `ReactNode` — Content to display
+- **`innerRef`** `ForwardedRef<HTMLDivElement>` — Ref for the inner content element
+- **`innerProps`** `HTMLAttributes<HTMLDivElement>` — Props to spread on the Inner sub-element
 
 **Sub-elements:**
 - `Inner` - Scrollable inner container
@@ -344,13 +325,11 @@ Header for panels with optional close button.
 />
 ```
 
-| Property | Type | Default | Description |
-|----------|------|---------|-------------|
-| title | `ReactNode` | - | Panel title |
-| level | `1-6` | `2` | Heading level |
-| isClosable | `boolean` | `false` | Show close button |
-| onClose | `() => void` | - | Close button handler |
-| actions | `ReactNode` | - | Custom actions (replaces close) |
+- **`title`** `ReactNode` — Panel title
+- **`level`** `1-6` (default: `2`) — Heading level
+- **`isClosable`** `boolean` (default: `false`) — Show close button
+- **`onClose`** `() => void` — Close button handler
+- **`actions`** `ReactNode` — Custom actions (replaces close)
 
 ---
 
@@ -373,12 +352,10 @@ A variant of Layout that enables CSS Grid for the content area.
 </GridLayout>
 ```
 
-| Property | Type | Description |
-|----------|------|-------------|
-| columns | `string` | Grid template columns |
-| rows | `string` | Grid template rows |
-| template | `string` | Grid template shorthand |
-| gap | `string` | Grid gap |
+- **`columns`** `string` — Grid template columns
+- **`rows`** `string` — Grid template rows
+- **`template`** `string` — Grid template shorthand
+- **`gap`** `string` — Grid gap
 
 ---
 

package/docs/components/content/Paragraph.md

@@ -0,0 +1,32 @@
+# Paragraph
+
+A block-level text component for body content. Renders as `<p>` and extends `Text` with paragraph-specific defaults.
+
+## When to Use
+
+- Body text and descriptions
+- Multi-line content that should flow as paragraphs
+
+## Properties
+
+Extends Text properties including `preset`, `color`, `weight`, `transform`, `ellipsis`, `nowrap`.
+
+### Style Defaults
+
+- `display` — `block`
+- `preset` — `p3`
+- `color` — `#dark-02`
+
+### Base Properties
+
+Supports [Base properties](../../BaseProperties.md).
+
+## Examples
+
+```jsx
+<Paragraph>This is a paragraph of body text.</Paragraph>
+
+<Paragraph preset="p2" color="#minor">
+  Secondary paragraph with custom styling.
+</Paragraph>
+```

package/docs/components/content/Placeholder.md

@@ -0,0 +1,37 @@
+# Placeholder
+
+A loading placeholder with optional shimmer animation. Used for skeleton-style loading states.
+
+## When to Use
+
+- Content loading states
+- Skeleton screens
+- Placeholder for images or text while loading
+
+## Properties
+
+- **`size`** `string` (default: `'2x'`) — Placeholder height
+- **`circle`** `boolean` — Circular shape with `aspect-ratio: 1/1` (e.g. for avatars)
+- **`isStatic`** `boolean` — Disable shimmer animation
+
+### Style Defaults
+
+- `display` — `block`
+- `fill` — `#dark.10`
+- `height` — `2x`
+- `radius` — `1r` (switches to `round` when `circle`)
+- `opacity` — `.35`
+
+### Base Properties
+
+Supports [Base properties](../../BaseProperties.md).
+
+## Examples
+
+```jsx
+<Placeholder width="200px" height="24px" />
+
+<Placeholder circle size="4x" />
+
+<Placeholder isStatic width="100%" />
+```

package/docs/components/content/PrismCode.md

@@ -0,0 +1,36 @@
+# PrismCode
+
+Syntax-highlighted code block using Prism. Supports multiple languages.
+
+## When to Use
+
+- Documentation code examples
+- Displaying code in UI
+- Technical content with syntax highlighting
+
+## Properties
+
+- **`code`** `string` (default: `''`) — The code snippet to highlight
+- **`language`** `string` (default: `'javascript'`) — Language for syntax highlighting (`javascript`, `typescript`, `json`, `yaml`, `bash`, `sql`, `css`, `html`, etc.)
+
+### Style Defaults
+
+- `margin` — `0`
+- `padding` — `0`
+- `overflow` — `auto`
+- `scrollbar` — `styled`
+
+### Base Properties
+
+Supports [Base properties](../../BaseProperties.md).
+
+## Examples
+
+```jsx
+<PrismCode code="const x = 1;" language="javascript" />
+
+<PrismCode
+  code={'function hello() {\n  return "world";\n}'}
+  language="typescript"
+/>
+```

package/docs/components/content/PrismDiffCode.md

@@ -0,0 +1,29 @@
+# PrismDiffCode
+
+Displays a diff view of two code snippets with syntax highlighting. Highlights added and removed lines.
+
+## When to Use
+
+- Showing code changes
+- Before/after comparisons
+- Code review displays
+
+## Properties
+
+- **`original`** `string` (required) — Original code
+- **`modified`** `string` (required) — Modified code
+- **`language`** `string` — Syntax highlighting language
+
+### Base Properties
+
+Supports [Base properties](../../BaseProperties.md).
+
+## Examples
+
+```jsx
+<PrismDiffCode
+  original="const x = 1;"
+  modified="const x = 2;"
+  language="javascript"
+/>
+```

package/docs/components/content/Result.md

@@ -0,0 +1,46 @@
+# Result
+
+An empty state or result display with icon, title, and optional content. Supports status presets with built-in icons.
+
+## When to Use
+
+- Empty states (no data, no results)
+- Success/error feedback after actions
+- 404, 403, 500 error pages
+- Informational messages
+
+## Properties
+
+- **`status`** `'success' | 'error' | 'info' | 'warning' | 404 | 403 | 500` (default: `'info'`) — Predefined status with corresponding icon
+- **`title`** `ReactNode` — Main title text
+- **`subtitle`** `ReactNode` — Secondary text below title
+- **`icon`** `ReactNode` — Custom icon (overrides status icon)
+- **`isCompact`** `boolean` — Compact horizontal layout
+
+### Style Defaults
+
+- `display` — `flex` (switches to `grid` when `isCompact`)
+- `flow` — `column`
+- `placeContent` — `center` (switches to `start` when `isCompact`)
+- `placeItems` — `center` (switches to `start` when `isCompact`)
+- `gap` — `3x` (switches to `2x 1x` when `isCompact`)
+- `padding` — `6x 4x` (switches to `0` when `isCompact`)
+- `textAlign` — `center` (switches to `left` when `isCompact`)
+
+### Base Properties
+
+Supports [Base properties](../../BaseProperties.md).
+
+## Examples
+
+```jsx
+<Result status="success" title="Saved" subtitle="Your changes have been saved." />
+
+<Result status="error" title="Something went wrong" subtitle="Please try again." />
+
+<Result status={404} title="Page not found" />
+
+<Result status="info" title="No items" subtitle="Add your first item to get started.">
+  <Button>Add Item</Button>
+</Result>
+```

package/docs/components/content/Skeleton.md

@@ -0,0 +1,35 @@
+# Skeleton
+
+A skeleton loading indicator with preset layouts. Composes `Placeholder` components to mimic content structure.
+
+## When to Use
+
+- Loading states for complex layouts
+- Progressive content loading
+- Replacing spinners with content-aware placeholders
+
+## Properties
+
+- **`layout`** `'page' | 'content' | 'topbar' | 'menu' | 'stats' | 'tabs' | 'table' | 'chart'` (default: `'page'`) — Preset layout pattern
+- **`lines`** `number` (default: `5`) — Number of placeholder lines (for page, content, menu, tabs layouts)
+- **`rows`** `number` (default: `5`) — Number of table rows (for table layout)
+- **`columns`** `number` (default: `5`) — Number of columns (for table and chart layouts)
+- **`tabs`** `number` (default: `3`) — Number of tabs (for tabs layout)
+- **`cards`** `number` (default: `3`) — Number of stat cards (for stats layout)
+- **`isStatic`** `boolean` (default: `false`) — Disable shimmer animation
+
+### Base Properties
+
+Supports [Base properties](../../BaseProperties.md).
+
+## Examples
+
+```jsx
+<Skeleton layout="content" lines={5} />
+
+<Skeleton layout="page" />
+
+<Skeleton layout="table" rows={5} columns={4} />
+
+<Skeleton layout="chart" columns={8} />
+```

package/docs/components/content/Tag.md

@@ -23,6 +23,15 @@ Tags are compact, inline elements used to label, categorize, or organize items.
 
 ### Properties
 
+- **`children`** `ReactNode` — Tag content
+- **`icon`** `ReactNode` — Icon to display before the tag content
+- **`theme`** `'default' | 'danger' | 'success' | 'warning' | 'note' | 'special' | 'disabled'` (default: `default`) — Visual theme of the tag
+- **`type`** `string` — Deprecated: Use theme instead
+- **`size`** `string` (default: `inline`) — Size of the tag
+- **`isClosable`** `boolean` (default: `false`) — Whether the tag can be closed
+- **`onClose`** `() => void` — Handler called when close button is pressed
+- **`closeButtonStyles`** `Styles` — Custom styles for the close button
+
 ### Base Properties
 
 Tag extends from `Item` component and supports all base design system properties including:

package/docs/components/content/Text.md

@@ -0,0 +1,54 @@
+# Text
+
+A flexible text component for inline or block text. Renders as `<span>` by default with support for typography presets, ellipsis, and semantic variants.
+
+## When to Use
+
+- Inline text within other components
+- Labels, captions, and short text content
+- Text that needs ellipsis truncation or custom typography
+
+## Properties
+
+- **`as`** `TagName` (default: `'span'`) — HTML element to render
+- **`monospace`** `boolean` — Use monospace font
+- **`ellipsis`** `boolean` — Truncate overflow with ellipsis (sets `display: block`, `nowrap`, `overflow: hidden`)
+- **`nowrap`** `boolean` — Prevent text wrapping
+- **`block`** `boolean` — Display as block element
+- **`italic`** `string` — Font style (maps to `fontStyle`)
+- **`weight`** `string | number` — Font weight (maps to `fontWeight`)
+- **`transform`** `string` — Text transform (maps to `textTransform`)
+
+### Style Defaults
+
+- `display` — `inline` (switches to `block` when `ellipsis` or `block`)
+- `margin` — `0`
+- `padding` — `0`
+
+### Base Properties
+
+Supports [Base properties](../../BaseProperties.md).
+
+### Variants
+
+- `Text.Minor` — Muted/secondary text color
+- `Text.Danger` — Error or destructive text
+- `Text.Success` — Success or positive text
+- `Text.Strong` — Bold emphasis
+- `Text.Emphasis` — Italic emphasis
+- `Text.Placeholder` — Placeholder-style text
+- `Text.Highlight` — Highlighted text (mark element)
+
+## Examples
+
+```jsx
+<Text>Inline text</Text>
+
+<Text ellipsis style={{ maxWidth: 200 }}>
+  Long text that will be truncated with ellipsis
+</Text>
+
+<Text.Minor>Secondary information</Text.Minor>
+
+<Text.Danger>Error message</Text.Danger>
+```

package/docs/components/content/TextItem.md

@@ -15,9 +15,15 @@ A text component with built-in overflow handling and auto-tooltips. When text is
 
 ### Properties
 
+- **`children`** `ReactNode` — Text content
+- **`highlight`** `string` — String to highlight within children
+- **`highlightCaseSensitive`** `boolean` (default: `false`) — Whether highlight matching is case-sensitive
+- **`tooltip`** `string | boolean | TooltipProviderProps` (default: `true`) — Tooltip configuration. Use true for auto tooltip on overflow, string for custom tooltip text.
+- **`tooltipPlacement`** `Placement` (default: `top`) — Default tooltip placement
+
 ### Base Properties
 
-Supports [Base properties](../../tasty/tasty.md) and all Text properties including `preset`, `color`, `weight`, `transform`, `ellipsis`, `nowrap`.
+Supports [Base properties](../../BaseProperties.md) and all Text properties including `preset`, `color`, `weight`, `transform`, `ellipsis`, `nowrap`.
 
 ### Styling Properties