@cube-dev/ui-kit 0.133.0 → 0.135.0

package/dist/utils/react/useEventBus.js

@@ -1,4 +1,4 @@
-/** @license MIT | @cube-dev/ui-kit v0.133.0 | Cube Dev Team */
+/** @license MIT | @cube-dev/ui-kit v0.135.0 | Cube Dev Team */
 import React, { createContext, useCallback, useContext, useEffect, useRef } from "react";
 
 //#region src/utils/react/useEventBus.ts

package/dist/utils/react/useId.js

@@ -1,4 +1,4 @@
-/** @license MIT | @cube-dev/ui-kit v0.133.0 | Cube Dev Team */
+/** @license MIT | @cube-dev/ui-kit v0.135.0 | Cube Dev Team */
 import { useLayoutEffect as useLayoutEffect$1 } from "./useLayoutEffect.js";
 import { useEffect, useRef, useState } from "react";
 import { useSSRSafeId } from "@react-aria/ssr";

package/dist/utils/react/useIsDarwin.js

@@ -1,4 +1,4 @@
-/** @license MIT | @cube-dev/ui-kit v0.133.0 | Cube Dev Team */
+/** @license MIT | @cube-dev/ui-kit v0.135.0 | Cube Dev Team */
 import { useEffect, useState } from "react";
 
 //#region src/utils/react/useIsDarwin.ts

package/dist/utils/react/useKeySymbols.js

@@ -1,4 +1,4 @@
-/** @license MIT | @cube-dev/ui-kit v0.133.0 | Cube Dev Team */
+/** @license MIT | @cube-dev/ui-kit v0.135.0 | Cube Dev Team */
 import { useIsDarwin } from "./useIsDarwin.js";
 import { useMemo } from "react";
 

package/dist/utils/react/useLayoutEffect.js

@@ -1,4 +1,4 @@
-/** @license MIT | @cube-dev/ui-kit v0.133.0 | Cube Dev Team */
+/** @license MIT | @cube-dev/ui-kit v0.135.0 | Cube Dev Team */
 import * as React$1 from "react";
 
 //#region src/utils/react/useLayoutEffect.tsx

package/dist/utils/react/useLocalStorage.js

@@ -1,4 +1,4 @@
-/** @license MIT | @cube-dev/ui-kit v0.133.0 | Cube Dev Team */
+/** @license MIT | @cube-dev/ui-kit v0.135.0 | Cube Dev Team */
 import { useEvent } from "../../_internal/hooks/use-event.js";
 import { useCallback, useSyncExternalStore } from "react";
 

package/dist/utils/react/useMergeStyles.js

@@ -1,4 +1,4 @@
-/** @license MIT | @cube-dev/ui-kit v0.133.0 | Cube Dev Team */
+/** @license MIT | @cube-dev/ui-kit v0.135.0 | Cube Dev Team */
 import { mergeStyles } from "@tenphi/tasty";
 import { useMemo } from "react";
 

package/dist/utils/react/useQaProps.js

@@ -1,4 +1,4 @@
-/** @license MIT | @cube-dev/ui-kit v0.133.0 | Cube Dev Team */
+/** @license MIT | @cube-dev/ui-kit v0.135.0 | Cube Dev Team */
 //#region src/utils/react/useQaProps.ts
 /**
 * Processes QA props.

package/dist/utils/react/useViewportSize.js

@@ -1,4 +1,4 @@
-/** @license MIT | @cube-dev/ui-kit v0.133.0 | Cube Dev Team */
+/** @license MIT | @cube-dev/ui-kit v0.135.0 | Cube Dev Team */
 import { useEffect, useState } from "react";
 
 //#region src/utils/react/useViewportSize.ts

package/dist/utils/react/wrapNodeIfPlain.js

@@ -1,4 +1,4 @@
-/** @license MIT | @cube-dev/ui-kit v0.133.0 | Cube Dev Team */
+/** @license MIT | @cube-dev/ui-kit v0.135.0 | Cube Dev Team */
 import { isValidElement } from "react";
 import { isFragment } from "react-is";
 

package/dist/utils/selection.js

@@ -1,4 +1,4 @@
-/** @license MIT | @cube-dev/ui-kit v0.133.0 | Cube Dev Team */
+/** @license MIT | @cube-dev/ui-kit v0.135.0 | Cube Dev Team */
 //#region src/utils/selection.ts
 /**
 * Deduplicate/toggle keys in a selection: if a key appears twice it is

package/dist/utils/styles.js

@@ -1,4 +1,4 @@
-/** @license MIT | @cube-dev/ui-kit v0.133.0 | Cube Dev Team */
+/** @license MIT | @cube-dev/ui-kit v0.135.0 | Cube Dev Team */
 //#region src/utils/styles.ts
 /**
 * Split properties into style and non-style properties.

package/dist/utils/tree.js

@@ -1,4 +1,4 @@
-/** @license MIT | @cube-dev/ui-kit v0.133.0 | Cube Dev Team */
+/** @license MIT | @cube-dev/ui-kit v0.135.0 | Cube Dev Team */
 //#region src/utils/tree.ts
 function toFlatTree(tree, includingFolders) {
 	return tree.reduce((result, node) => {

package/dist/utils/warnings.js

@@ -1,4 +1,4 @@
-/** @license MIT | @cube-dev/ui-kit v0.133.0 | Cube Dev Team */
+/** @license MIT | @cube-dev/ui-kit v0.135.0 | Cube Dev Team */
 //#region src/utils/warnings.ts
 const SUGGESTED_PROP_MAP = {
 	disabled: "isDisabled",

package/dist/version.js

@@ -1,6 +1,6 @@
-/** @license MIT | @cube-dev/ui-kit v0.133.0 | Cube Dev Team */
+/** @license MIT | @cube-dev/ui-kit v0.135.0 | Cube Dev Team */
 //#region src/version.ts
-const VERSION = "0.133.0";
+const VERSION = "0.135.0";
 if (typeof window !== "undefined") {
 	const version = VERSION;
 	window.CubeUIKit = window.CubeUIKit || { version };

package/docs/Usage.md

@@ -210,7 +210,7 @@ Reusable style presets applied via the `recipe` style property. Defined in `src/
 | `reset` | Zero out margin, padding, border, outline; set `box-sizing: border-box` |
 | `button` | Base button appearance: no native styling, `touch-action: manipulation` |
 | `input` | Base input appearance: no native styling, inherit color |
-| `input-autofill` | Handle `:-webkit-autofill` styling |
+| `input-autofill` | Handle browser autofill styling (`:autofill`, `:-webkit-autofill`, `:-internal-autofill-*`) |
 | `input-placeholder` | Placeholder text styling via `-webkit-text-fill-color` |
 | `input-search-cancel-button` | Hide native search cancel button |
 

package/docs/components/content/Layout.md

@@ -189,6 +189,7 @@ Centered content area for both horizontal and vertical alignment. Extends `Layou
 ```
 
 - **`children`** `ReactNode` — Content to display
+- **`isGoldenRatio`** `boolean` (default: `false`) — Position content slightly above the geometric center using the golden ratio (~38.2% empty space above, ~61.8% below). Only applies while content fits inside the container; once content overflows, falls back to the default centered behavior.
 
 **Styling differences from Container:**
 - Content is centered both horizontally and vertically

package/docs/components/content/Result.md

@@ -9,14 +9,19 @@ An empty state or result display with icon, title, and optional content. Support
 - 404, 403, 500 error pages
 - Informational messages
 
-## Properties
+## Component
+
+---
+
+### 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
-- **`subTitle`** `ReactNode` — Deprecated: Use `subtitle` instead
+- **`subtitle`** `ReactNode` — Secondary text below the title
+- **`subTitle`** `ReactNode` — Deprecated: use `subtitle` instead
 - **`icon`** `ReactNode` — Custom icon (overrides status icon)
-- **`isCompact`** `boolean` — Compact horizontal layout
+- **`isCompact`** `boolean` (default: `false`) — Compact horizontal layout
+- **`children`** `ReactNode` — Additional block content, e.g. a set of action buttons
 
 ### Style Defaults
 
@@ -27,6 +32,8 @@ An empty state or result display with icon, title, and optional content. Support
 - `gap` — `3x` (switches to `2x 1x` when `isCompact`)
 - `padding` — `6x 4x` (switches to `0` when `isCompact`)
 - `textAlign` — `center` (switches to `left` when `isCompact`)
+- `width` — `max 80ch` (caps the readable line length; override via the `width` prop)
+- `margin` — `0 auto` (centers Result horizontally within its parent; switches to `0` when `isCompact`)
 
 ### Base Properties
 
@@ -45,14 +52,28 @@ These properties allow direct style application without using the `styles` prop:
 
 ## Examples
 
-```jsx
-<Result status="success" title="Saved" subtitle="Your changes have been saved." />
+### Info
+
+### Warning
+
+### Error
+
+### Custom Icon
+
+### Custom Title
+
+### Compact
+
+### Width Limit
 
-<Result status="error" title="Something went wrong" subtitle="Please try again." />
+The default `width: max 80ch` keeps long copy in a comfortable reading column even inside a much wider parent. Override the cap by passing your own `width`.
 
-<Result status={404} title="Page not found" />
+## Differences from Ant Design
 
-<Result status="info" title="No items" subtitle="Add your first item to get started.">
-  <Button>Add Item</Button>
-</Result>
-```
+| There are differences | Ant Design property | Cube UIKit property |
+| :-------------------: | :-----------------: | :-----------------: |
+|          No           |      `status`       |      `status`       |
+|          No           |       `title`       |       `title`       |
+|          Yes          |     `subTitle`      |     `subtitle`      |
+|          No           |       `icon`        |       `icon`        |
+|          Yes          |       `extra`       |     `children`      |

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@cube-dev/ui-kit",
-  "version": "0.133.0",
+  "version": "0.135.0",
   "type": "module",
   "description": "UIKit for Cube Projects",
   "repository": {

package/docs/Result.md

@@ -1,42 +0,0 @@
-# Result
-
-Used to feed back the results of a series of operational tasks.
-
-## When To Use
-
-Use when important operations need to inform the user to process the results and the feedback is more complicated.
-
-## Examples
-
-### Success
-
-### Info
-
-### Warning
-
-### Error
-
-### Custom Icon
-
-### Custom Title
-
-### Compact
-
-## Properties
-
-- **`status`** `'success' | 'error' | 'info' | 'warning' | 404 | 403 | 500` (default: `'info'`) — Result status, determines the icon and color from ready-made templates
-- **`title`** `ReactNode` — The title of the result
-- **`subtitle`** `ReactNode` — Subtitle of the result component
-- **`icon`** `ReactNode` — Custom icon element. Don't use together with `status`
-- **`isCompact`** `boolean` — Whether the result component has a compact presentation
-- **`children`** `ReactNode` — Additional block content, e.g. a set of action buttons
-
-## Differences from Ant Design
-
-| There are differences | Ant Design property | Cube UIKit property |
-| :-------------------: | :-----------------: | :-----------------: |
-|          No           |      `status`       |      `status`       |
-|          No           |       `title`       |       `title`       |
-|          Yes          |     `subTitle`      |     `subtitle`      |
-|          No           |       `icon`        |       `icon`        |
-|          Yes          |       `extra`       |     `children`      |