@cube-dev/ui-kit 0.0.0-canary-dda2a98 → 0.0.0-canary-0d6f826

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
-