@cube-dev/ui-kit 0.163.0 → 0.165.0

package/dist/utils/react/useViewportSize.js

@@ -1,4 +1,4 @@
-/** @license MIT | @cube-dev/ui-kit v0.163.0 | Cube Dev Team */
+/** @license MIT | @cube-dev/ui-kit v0.165.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.163.0 | Cube Dev Team */
+/** @license MIT | @cube-dev/ui-kit v0.165.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.163.0 | Cube Dev Team */
+/** @license MIT | @cube-dev/ui-kit v0.165.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.163.0 | Cube Dev Team */
+/** @license MIT | @cube-dev/ui-kit v0.165.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.163.0 | Cube Dev Team */
+/** @license MIT | @cube-dev/ui-kit v0.165.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.163.0 | Cube Dev Team */
+/** @license MIT | @cube-dev/ui-kit v0.165.0 | Cube Dev Team */
 //#region src/utils/warnings.ts
 const SUGGESTED_PROP_MAP = {
 	disabled: "isDisabled",

package/dist/version.js

@@ -1,7 +1,7 @@
-/** @license MIT | @cube-dev/ui-kit v0.163.0 | Cube Dev Team */
+/** @license MIT | @cube-dev/ui-kit v0.165.0 | Cube Dev Team */
 //#region src/version.ts
-const VERSION = "0.163.0";
-const TASTY_VERSION = "3.0.1";
+const VERSION = "0.165.0";
+const TASTY_VERSION = "3.1.0";
 if (typeof window !== "undefined") {
 	const version = VERSION;
 	const tastyVersion = TASTY_VERSION;

package/docs/Introduction.md

@@ -1,122 +1,110 @@
-# Welcome to Cube Cloud UI Kit
+# Cube UI Kit
 
-A comprehensive React component library built for modern web applications with accessibility, theming, and developer experience at its core.
+Cube UI Kit is the open-source React design system behind Cube Cloud. The
+`@cube-dev/ui-kit` package combines production-ready components, accessible
+interaction patterns, a token-aware styling engine, and a runtime-configurable
+color system.
 
-## What is Cube UI Kit?
+## Built for product interfaces
 
-Cube UI Kit is a complete design system that provides:
-- **Accessible Components** - Built with React Aria hooks for WCAG compliance
-- **Powerful Styling System** - The `tasty` style system for maintainable, theme-able components
-- **Form Management** - Integrated form handling with validation and state management
-- **Consistent Design** - Unified visual language across all components
+- **Production-ready components** — From layout and typography primitives to
+  forms, tables, navigation, dialogs, notifications, and complex pickers.
+- **Accessible interactions** — React Aria provides the foundation for keyboard
+  navigation, focus management, and screen-reader behavior.
+- **Composable styling** — Components share design tokens, style properties,
+  state-driven values, and responsive syntax.
+- **Integrated forms** — Fields connect directly to validation and form state
+  without an extra wrapper component.
+- **TypeScript-first APIs** — Component props, tokens, themes, and styling values
+  are typed and discoverable.
 
-Browse example stories by navigating to them in the sidebar to see components in action.
+## The foundations
 
-## Key Features
+Cube UI Kit is built on two independent open-source projects:
 
-### 🎨 Tasty Style System
-A declarative styling approach that makes it easy to create consistent, maintainable styles:
-- **State-based styling** - Bind styles to hover, focus, and custom modifiers
-- **Responsive design** - Use arrays for breakpoint-specific styles
-- **Token-based theming** - Built-in color tokens and semantic units
-- **Component variants** - Pre-defined style variations for different use cases
+- [Tasty](https://tasty.style) is the declarative styling engine. It turns
+  token-aware style objects, responsive values, and component states into
+  conflict-free CSS.
+- [Glaze](https://github.com/tenphi/glaze) generates the semantic color palette.
+  A small set of brand and status seeds resolves into light, dark, and
+  high-contrast token sets.
 
-### ♿ Accessibility First
-Every component is built with accessibility as a priority:
-- React Aria hooks provide keyboard navigation and screen reader support
-- ARIA attributes are automatically managed
-- Focus management follows best practices
-- High contrast and reduced motion support
+Use the [Theme Builder](/story/getting-started-theming--theme-builder) to tune a
+palette and preview the result across schemes and contrast levels.
 
-### 📝 Modern Form Handling
-Streamlined form development with built-in field support:
-- All input components have integrated field properties
-- Automatic validation and error handling
-- Form-level configuration inheritance
-- No wrapper components needed for most use cases
+## Get started
 
-## Getting Started
+Install the package alongside React:
 
-### Basic Usage
+```bash
+pnpm add @cube-dev/ui-kit react react-dom
+```
+
+Wrap the application in `Root`, then compose components normally:
 
-```jsx
-import { Button, TextInput, Form } from '@cube-dev/ui-kit';
+```tsx
+import { Button, Root, Space, TextInput } from '@cube-dev/ui-kit';
 
-function MyApp() {
+export function App() {
   return (
-    <Form onSubmit={handleSubmit}>
-      <TextInput
-        name="email"
-        label="Email"
-        type="email"
-        isRequired
-      />
-      <Button type="primary">Submit</Button>
-    </Form>
+    <Root>
+      <Space flow="column" gap="2x" padding="4x">
+        <TextInput name="email" label="Email" type="email" isRequired />
+        <Button type="primary">Continue</Button>
+      </Space>
+    </Root>
   );
 }
 ```
 
-### Styling Components
-
-Use the `tasty` system for consistent styling:
-
-```jsx
-import { tasty, Button } from '@cube-dev/ui-kit';
-
-const CustomButton = tasty(Button, {
-  styles: {
-    padding: '2x 4x',
-    fill: {
-      '': '#purple',
-      hovered: '#purple.8',
-    },
-    color: '#white',
-  },
-});
+`Root` installs the design tokens and providers used by overlays, navigation,
+internationalization, and other shared behaviors. See the
+[Root reference](./components/Root.md) for application-level options.
+
+## Style with the system
+
+Most components accept style properties directly. Values can reference semantic
+units and color tokens, so custom layouts stay aligned with the design system:
+
+```tsx
+<Space
+  flow="column"
+  gap={['2x', '3x']}
+  padding={['2x', '4x']}
+  fill="#surface-2"
+  radius="1cr"
+>
+  <Button width="max-content">Create workspace</Button>
+</Space>
 ```
 
-## Core Concepts
-
-### Styling with Tasty
-
-The `tasty` style system provides a powerful, declarative way to style components:
+For component states, reusable styled components, sub-elements, presets, and the
+complete token reference, continue to [Usage](./Usage.md)
+or the [Tasty project](https://tasty.style).
 
-- **Custom Units** - Use semantic units like `2x` (gap), `1r` (radius), `#purple` (color tokens)
-- **State Bindings** - Style different states using modifiers like `hovered`, `focused`, `disabled`
-- **Responsive Arrays** - Define breakpoint-specific styles with arrays: `padding: ['4x', '2x', '1x']`
-- **Sub-element Styling** - Style internal component parts using element names
+## Configure the palette
 
-### Form Integration
+Pass palette seeds to `Root` to apply a product theme. Glaze resolves the complete
+semantic palette from this compact configuration:
 
-All input components work seamlessly with the Form component:
-
-- **Built-in Field Support** - No wrapper components needed
-- **Automatic Validation** - Validation rules and error display
-- **Form-level Configuration** - Inherit settings like `labelPosition` and `isReadOnly`
-- **Programmatic Control** - Use `Form.useForm()` for advanced form management
-
-### Component Architecture
-
-Components are designed with composition and reusability in mind:
-
-- **Base Properties** - Common props like `qa`, styling, and accessibility
-- **Style Properties** - Direct style application without the `styles` prop
-- **Modifiers** - Control component states through the `mods` prop
-- **Variants** - Pre-defined style themes and sizes
-
-## Documentation Structure
-
-Each component includes comprehensive documentation:
+```tsx
+<Root
+  palette={{
+    accent: '#2F5BFF',
+    themes: { danger: '#B91C1C' },
+  }}
+>
+  <App />
+</Root>
+```
 
-- **Usage Examples** - Real-world implementation patterns
-- **Accessibility Guidelines** - Keyboard navigation and screen reader support
-- **Styling Reference** - Available sub-elements and modifiers
-- **Best Practices** - Recommended usage patterns and common pitfalls
+The [Theming guide](./Theming.md) covers palette zones,
+runtime updates, regional previews, dark mode, and high-contrast behavior.
 
-## Next Steps
+## Where to go next
 
-1. **Explore Components** - Browse the sidebar to see all available components
-2. **Learn Tasty** - Visit the [Tasty documentation](./tasty/usage.md) to master the styling system
-3. **Build Forms** - Check out [Form documentation](./components/form/Form.md) for form development patterns
-4. **Accessibility** - Review accessibility guidelines for inclusive design
+- Browse the sidebar for live component examples and API documentation.
+- Learn the shared styling model in [Usage](./Usage.md).
+- Build validated workflows with the [Form documentation](./components/form/Form.md).
+- Review [Base Properties](./BaseProperties.md) shared by
+  components across the kit.