@cube-dev/ui-kit 0.165.0 → 0.167.0

package/docs/CreateComponent.md

@@ -38,6 +38,7 @@ function MyComponent(props: MyComponentProps) {
 ```
 
 **Filter options:**
+
 - `eventProps: true` - Include standard DOM event handlers (onClick, onFocus, etc.)
 - `labelable: true` - Include ARIA labeling properties
 - `propNames: Set<string>` - Include specific additional properties
@@ -96,7 +97,7 @@ import {
   filterBaseProps,
 } from '@tenphi/tasty';
 
-interface MyComponentProps 
+interface MyComponentProps
   extends AllBaseProps,
     ContainerStyleProps,
     TextStyleProps {
@@ -104,7 +105,7 @@ interface MyComponentProps
 
 function MyComponent(props: MyComponentProps) {
   const styles = extractStyles(props, [...CONTAINER_STYLES, ...TEXT_STYLES]);
-  
+
   return (
     <Element
       {...filterBaseProps(props, { eventProps: true })}
@@ -155,6 +156,7 @@ function MyComponent({ isLoading, mods, ...props }: MyComponentProps) {
 ```
 
 **Usage:**
+
 ```tsx
 <MyComponent mods={{ custom: true, highlighted: isHighlighted }} />
 // Renders: <div data-custom data-highlighted class="...">
@@ -169,7 +171,7 @@ const MyElement = tasty({
   styles: {
     display: 'flex',
     gap: '1x',
-    
+
     // Sub-element styles
     Icon: {
       preset: 'h3',
@@ -192,6 +194,7 @@ function MyComponent(props) {
 ```
 
 **Usage with style overrides:**
+
 ```tsx
 <MyComponent
   styles={{
@@ -204,6 +207,7 @@ function MyComponent(props) {
 ```
 
 **When to use sub-elements:**
+
 - Elements that should share the parent's state (hover, focus, disabled, etc.)
 - Tightly coupled UI parts (icon + label, title + subtitle)
 - When you want a single `styles` prop to control everything
@@ -224,7 +228,7 @@ interface MyComponentProps extends AllBaseProps {
 
 function MyComponent({ iconStyles, labelStyles, ...props }: MyComponentProps) {
   const styles = extractStyles(props, CONTAINER_STYLES);
-  
+
   return (
     <Element styles={styles}>
       <IconElement styles={iconStyles} />
@@ -235,6 +239,7 @@ function MyComponent({ iconStyles, labelStyles, ...props }: MyComponentProps) {
 ```
 
 **When to use additional style properties:**
+
 - Inner elements need independent state management (separate hover, focus behaviors)
 - Complex components with multiple logical sections
 - Components that need fine-grained styling control
@@ -251,7 +256,7 @@ import { useRef } from 'react';
 function MyButton(props) {
   const ref = useRef();
   const { buttonProps } = useButton(props, ref);
-  
+
   return (
     <Element
       {...buttonProps}
@@ -267,6 +272,7 @@ function MyButton(props) {
 ### Example 1: Block Component (Basic)
 
 This demonstrates a basic component with:
+
 - Base properties support
 - All container style properties
 - Clean, minimal implementation
@@ -308,6 +314,7 @@ export const Block = forwardRef(function Block(props: CubeBlockProps, ref) {
 ### Example 2: Action Component (Advanced)
 
 This demonstrates advanced features:
+
 - React Aria integration (`useButton`)
 - Complex modifier handling
 - Multiple style property sets
@@ -384,7 +391,7 @@ export const Action = forwardRef(function Action(
     },
     domRef,
   );
-  
+
   const { hoverProps, isHovered } = useHover({ isDisabled });
 
   const styles = extractStyles(props, STYLE_PROPS);
@@ -414,7 +421,7 @@ export const Action = forwardRef(function Action(
 For input components that need to integrate with forms, see the [Field documentation](./components/form/Field.md) for comprehensive guidance on:
 
 - Form state management
-- Validation integration  
+- Validation integration
 - Label and help text handling
 - Error state management
 - Accessibility requirements for form controls
@@ -455,7 +462,7 @@ When creating a new component, consider:
 
 - [ ] Base properties support (`AllBaseProps`, `filterBaseProps`)
 - [ ] Appropriate style property sets
-- [ ] Modifier (`mods`) support for state-based styling  
+- [ ] Modifier (`mods`) support for state-based styling
 - [ ] Additional style properties for inner elements
 - [ ] Sub-element definitions for targeted styling
 - [ ] React Aria integration for accessibility

package/docs/Introduction.md

@@ -1,36 +1,23 @@
 # Cube UI Kit
 
-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.
+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.
 
 ## Built for product interfaces
 
-- **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.
+- **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.
 
 ## The foundations
 
 Cube UI Kit is built on two independent open-source projects:
 
-- [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.
+- [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.
 
-Use the [Theme Builder](/story/getting-started-theming--theme-builder) to tune a
-palette and preview the result across schemes and contrast levels.
+Use the [Theme Builder](/story/getting-started-theming--theme-builder) to tune a palette and preview the result across schemes and contrast levels.
 
 ## Get started
 
@@ -57,14 +44,11 @@ export function App() {
 }
 ```
 
-`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.
+`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:
+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
@@ -78,14 +62,11 @@ units and color tokens, so custom layouts stay aligned with the design system:
 </Space>
 ```
 
-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).
+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).
 
 ## Configure the palette
 
-Pass palette seeds to `Root` to apply a product theme. Glaze resolves the complete
-semantic palette from this compact configuration:
+Pass palette seeds to `Root` to apply a product theme. Glaze resolves the complete semantic palette from this compact configuration:
 
 ```tsx
 <Root
@@ -98,13 +79,11 @@ semantic palette from this compact configuration:
 </Root>
 ```
 
-The [Theming guide](./Theming.md) covers palette zones,
-runtime updates, regional previews, dark mode, and high-contrast behavior.
+The [Theming guide](./Theming.md) covers palette zones, runtime updates, regional previews, dark mode, and high-contrast behavior.
 
 ## Where to go next
 
 - 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.
+- Review [Base Properties](./BaseProperties.md) shared by components across the kit.

package/docs/RenderCache.md

@@ -82,8 +82,8 @@ const [activeId, setActiveId] = useState(1);
   getKey={(item) => item.id}
 >
   {(item) => (
-    <ExpensiveListItem 
-      item={item} 
+    <ExpensiveListItem
+      item={item}
       isActive={item.id === activeId}
     />
   )}
@@ -100,6 +100,7 @@ const [activeId, setActiveId] = useState(1);
 ## Best Practices
 
 1. **Use stable keys**: Ensure getKey returns consistent keys for the same items across renders
+
    ```jsx
    // Good: Using stable IDs
    <RenderCache
@@ -109,7 +110,7 @@ const [activeId, setActiveId] = useState(1);
    >
      {(item) => <Item {...item} />}
    </RenderCache>
-   
+
    // Bad: Using indices (unstable when list changes)
    <RenderCache
      items={items}
@@ -121,6 +122,7 @@ const [activeId, setActiveId] = useState(1);
    ```
 
 2. **Minimize renderKeys**: Only include keys that truly need re-rendering to maximize cache benefits
+
    ```jsx
    // Good: Only re-render the active item
    <RenderCache
@@ -130,7 +132,7 @@ const [activeId, setActiveId] = useState(1);
    >
      {(item) => <Item {...item} />}
    </RenderCache>
-   
+
    // Bad: Re-rendering all items defeats the purpose
    <RenderCache
      items={items}
@@ -146,12 +148,13 @@ const [activeId, setActiveId] = useState(1);
 4. **Profile first**: Use React DevTools Profiler to confirm you have a performance issue before adding this optimization
 
 5. **Avoid inline functions**: Use stable render functions to prevent unnecessary cache invalidation
+
    ```jsx
    // Good: Stable render function
    const renderItem = useCallback((item) => (
      <ExpensiveItem item={item} />
    ), []);
-   
+
    <RenderCache
      items={items}
      renderKeys={[selectedId]}
@@ -174,4 +177,3 @@ const [activeId, setActiveId] = useState(1);
 - **useMemo** - For memoizing computed values
 - **useCallback** - For memoizing callback functions
 - **DisplayTransition** - For animating component mount/unmount
-