@cube-dev/ui-kit 0.199.2 → 0.200.1

package/docs/components/fields/ListBox.md

@@ -29,7 +29,7 @@ A versatile list selection component that allows users to select one or more ite
 - **`disabledKeys`** `Key[]` — Array of keys for disabled items
 - **`size`** `'small' | 'medium' | 'large'` (default: `medium`) — ListBox size
 - **`shape`** `'card' | 'plain' | 'popover'` (default: `card`) — Visual shape of the ListBox
-- **`listGap`** `number` — Space between options, in pixels. Defaults to a hairline (`1bw`)
+- **`listGap`** `number` — Space between options, in pixels. Defaults to a hairline (`$item-gap`, `1px`)
 - **`filter`** `(nodes: Iterable<Node>) => Iterable<Node>` — Filter function for the list items
 - **`emptyLabel`** `ReactNode` (default: `No items`) — Label shown when no items are available. The empty listbox stays in the document, described by this label
 - **`header`** `ReactNode` — Custom header content
@@ -185,7 +185,7 @@ The `mods` property accepts the following modifiers you can override:
 - Use `plain` when embedding ListBox directly into another component
 - Use `popover` when using ListBox inside overlays (Dialog, ComboBox, Picker)
 
-**listGap** (`number`, default: a hairline, `1bw`)
+**listGap** (`number`, default: a hairline, `$item-gap`)
 
 - The space between options, in pixels
 - Use it rather than a margin in `optionStyles`: a virtualized list positions its options itself, so it ignores their margins

package/docs/components/fields/Picker.md

@@ -34,7 +34,7 @@ Choose a different component when the interaction has another shape:
 - **`defaultSelectedKeys`** `string[] | 'all'` — The default selected keys in uncontrolled multiple mode
 - **`items`** `Iterable<T>` — Array of items for dynamic content with render function pattern
 - **`size`** `'small' | 'medium' | 'large'` (default: `medium`) — Size of the picker component
-- **`listGap`** `number` — Space between options, in pixels. Defaults to a hairline (`1bw`)
+- **`listGap`** `number` — Space between options, in pixels. Defaults to a hairline (`$item-gap`, `1px`)
 - **`type`** `'outline' | 'outline-2' | 'clear' | 'primary'` (default: `outline`) — Trigger button styling type
 - **`theme`** `'default' | 'danger'` (default: `default`) — Trigger button color theme
 - **`icon`** `ReactNode` — Icon displayed in the trigger button

package/docs/components/fields/SearchComboBox.md

@@ -37,7 +37,7 @@ Choose a different component when the interaction has another outcome:
 - **`isLoading`** `boolean` (default: `false`) — Whether items are being loaded (e.g. from a server)
 - **`loadingDelay`** `number` (default: `1000`) — Delay in ms before the loading indicator appears
 - **`size`** `'small' | 'medium' | 'large'` (default: `medium`) — Size of the component
-- **`listGap`** `number` — Space between options, in pixels. Defaults to a hairline (`1bw`)
+- **`listGap`** `number` — Space between options, in pixels. Defaults to a hairline (`$item-gap`, `1px`)
 - **`disabledKeys`** `Iterable<Key>` — Keys of suggestions that cannot be selected
 - **`onSelect`** `(key: string, textValue: string) => void` — Fired when a suggestion is picked; the input clears afterwards
 - **`onSubmit`** `(value: string) => void` — Opt-in. Fired when Enter is pressed with no focused/available option; the input clears afterwards

package/docs/components/fields/Select.md

@@ -56,7 +56,7 @@ Choose a different component when the interaction has another shape:
 - **`inputStyles`** `Styles` — Styles for the input trigger element
 - **`listBoxStyles`** `Styles` — Styles for the dropdown list container
 - **`optionStyles`** `Styles` — Styles for individual option items
-- **`listGap`** `number` — Space between options, in pixels. Defaults to a hairline (`1bw`)
+- **`listGap`** `number` — Space between options, in pixels. Defaults to a hairline (`$item-gap`, `1px`)
 - **`overlayStyles`** `Styles` — Styles for the dropdown overlay wrapper
 - **`triggerStyles`** `Styles` — Styles for the trigger button element
 - **`inputProps`** `Props` — Additional props for the trigger button element

package/docs/components/fields/TagInput.md

@@ -39,7 +39,7 @@ A multi-value field. The user types a value into a single-line input and commits
 - **`hideTrigger`** `boolean` (default: `false`) — Whether to hide the button that toggles the popover
 - **`disabledKeys`** `Iterable<Key>` — Keys of options that cannot be picked
 - **`size`** `'small' | 'medium' | 'large'` (default: `medium`) — Size of the input. The chips follow it
-- **`listGap`** `number` — Space between options, in pixels. Defaults to a hairline (`1bw`)
+- **`listGap`** `number` — Space between options, in pixels. Defaults to a hairline (`$item-gap`, `1px`)
 - **`direction`** `'bottom' | 'top'` (default: `bottom`) — Where the suggestions popover opens
 - **`shouldFlip`** `boolean` (default: `true`) — Whether the popover flips when there is no room
 - **`overlayOffset`** `number` (default: `8`) — Distance between the input and the popover, in pixels

package/docs/components/overlays/Dialog.md

@@ -194,7 +194,7 @@ To clamp the width yourself, set `styles.width` (`styles={{ width: 'initial 520p
 
 - `Tab` - Moves focus between interactive elements within the dialog
 - `Shift + Tab` - Moves focus backward between interactive elements
-- `Escape` - Closes the dialog when its `DialogTrigger` or `DialogContainer` is dismissable (`isDismissable`, on by default) and `isKeyboardDismissDisabled` is not set
+- `Escape` - Closes the dialog when its `DialogTrigger` or `DialogContainer` is dismissable (`isDismissable`, on by default) and `isKeyboardDismissDisabled` is not set. If a control inside already prevents the key's default, the dialog stays open and keeps the handled Escape from reaching an enclosing dialog
 - `Enter/Space` - Activates focused buttons or interactive elements
 
 ### Screen Reader Support

package/docs/tasty/react-api.md

@@ -406,7 +406,7 @@ elements: {
 }
 ```
 
-The sub-components produced by `elements` support `mods`, `tokens`, `isDisabled`, `isHidden`, and `isChecked` props — the same modifier interface as the root component.
+The sub-components produced by `elements` support `mods`, `tokens`, `theme`, `isDisabled`, `isHidden`, and `isChecked` props — the same modifier interface as the root component. As on the root, `theme` renders as `data-theme`, and an explicit `data-theme` wins over it.
 
 If you don't need sub-components (e.g., the inner elements are already rendered by a third-party library), you can still style them by key alone — just omit `elements` and apply `data-element` manually:
 

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@cube-dev/ui-kit",
-  "version": "0.199.2",
+  "version": "0.200.1",
   "type": "module",
   "description": "UIKit for Cube Projects",
   "repository": {
@@ -59,7 +59,7 @@
     "@tabler/icons-react": "^3.31.0",
     "@tanstack/react-virtual": "^3.13.12",
     "@tenphi/glaze": "2.0.0",
-    "@tenphi/tasty": "3.13.0",
+    "@tenphi/tasty": "3.14.0",
     "clipboard-copy": "^4.0.1",
     "clsx": "^1.1.1",
     "diff": "^8.0.3",
@@ -97,7 +97,7 @@
     "@statoscope/cli": "^5.20.1",
     "@storybook/addon-docs": "^10.3.6",
     "@storybook/react-vite": "^10.3.6",
-    "@tenphi/eslint-plugin-tasty": "^1.8.5",
+    "@tenphi/eslint-plugin-tasty": "^1.12.0",
     "@testing-library/dom": "^10.4.1",
     "@testing-library/jest-dom": "^6.7.0",
     "@testing-library/react": "^16.3.0",

package/tasty.config.ts

@@ -3,6 +3,9 @@
  *
  * This file configures the tasty VSCode extension for the @cube-dev/ui-kit project.
  * It provides token names, units, presets, and state aliases for validation and autocomplete.
+ * For `@tenphi/eslint-plugin-tasty`, it also lists the components consumers
+ * customize through their props rather than by restyling them
+ * (`protectedComponents`).
  *
  * Projects using @cube-dev/ui-kit can extend this config:
  * ```typescript
@@ -27,6 +30,153 @@ export default {
    */
   importSources: ['@cube-dev/ui-kit'],
 
+  /**
+   * Components a consumer customizes through their props (`type`, `theme`,
+   * `size`, …) rather than by restyling them. `tasty/no-protected-restyle`
+   * reports their instance `styles` and `*Styles` props, appearance style
+   * props, and `tasty()` wrappers that restyle them, so an intended override
+   * carries a reasoned disable. Every export is protected except the layout
+   * and typography primitives, the bases meant for extension and the icons,
+   * whose `styles` are their API. Style props that place or size the root
+   * stay allowed, and containers also keep the props that lay out their
+   * content. The first matching entry decides, so the last entry holds the
+   * rest. A sub-component such as `Layout.Content` counts as the export it
+   * hangs off, unless an entry names its member path, which then decides
+   * first. Our own source imports components by relative path, which never
+   * matches `source`, so the rule holds consumers only.
+   *
+   * Without `typeAwareJSX`, the rule reads any prop named like a Tasty style
+   * as one, so a component whose own prop shares such a name gets that name
+   * allowed in an entry of its own.
+   */
+  protectedComponents: [
+    // `direction` places a field's popover, `filter` matches its options and
+    // `resize` is a text field's resize handle. The fields share one entry, so
+    // a field without one of these props still gets its name, which is no
+    // plausible restyle of a field.
+    {
+      source: '@cube-dev/ui-kit',
+      include: [
+        'ComboBox',
+        'SearchComboBox',
+        'Select',
+        'TagInput',
+        'CommandTextArea',
+        'CommandMenu',
+        'FilterListBox',
+        'FilterPicker',
+        'ListBox',
+        'Picker',
+        'Input',
+        'TextInputBase',
+        'TextInput',
+        'TextArea',
+        'PasswordInput',
+        'NumberInput',
+        'SearchInput',
+      ],
+      allowedStyleProps: [
+        'position',
+        'dimension',
+        'direction',
+        'filter',
+        'resize',
+      ],
+    },
+    {
+      source: '@cube-dev/ui-kit',
+      include: ['ColorSwatch'],
+      allowedStyleProps: ['position', 'dimension', 'color'],
+    },
+    {
+      source: '@cube-dev/ui-kit',
+      include: ['AlertDialog'],
+      allowedStyleProps: ['position', 'dimension', 'content'],
+    },
+    {
+      source: '@cube-dev/ui-kit',
+      include: ['Root'],
+      allowedStyleProps: ['position', 'dimension', 'font'],
+    },
+    {
+      source: '@cube-dev/ui-kit',
+      include: ['GridProvider'],
+      allowedStyleProps: ['position', 'dimension', 'gap'],
+    },
+    // Containers. `Layout` and `GridLayout` cover their sub-components, such
+    // as `Layout.Content`, whose `scrollbar` is their own prop;
+    // `ResizablePanel`'s `direction` is the side it resizes from.
+    {
+      source: '@cube-dev/ui-kit',
+      include: [
+        'Card',
+        'Panel',
+        'ResizablePanel',
+        'Content',
+        'Header',
+        'Footer',
+        'Layout',
+        'GridLayout',
+      ],
+      allowedStyleProps: [
+        'position',
+        'dimension',
+        'flow',
+        'gap',
+        'columnGap',
+        'rowGap',
+        'place',
+        'placeItems',
+        'placeContent',
+        'align',
+        'alignItems',
+        'alignContent',
+        'justify',
+        'justifyItems',
+        'justifyContent',
+        'gridColumns',
+        'gridRows',
+        'gridTemplate',
+        'gridAreas',
+        'gridAutoFlow',
+        'gridAutoColumns',
+        'gridAutoRows',
+        'padding',
+        'blockPadding',
+        'inlinePadding',
+        'overflow',
+        'scrollbar',
+        'direction',
+      ],
+    },
+    {
+      source: '@cube-dev/ui-kit',
+      // `*Icon` also matches `Icon`. `Button.Group` is `ButtonGroup`, a
+      // `Space`, and its member path decides before `Button` does.
+      exclude: [
+        'Element',
+        'Block',
+        'Flex',
+        'Flow',
+        'Grid',
+        'Space',
+        'ButtonGroup',
+        'Button.Group',
+        'Prefix',
+        'Suffix',
+        'Text',
+        'TextItem',
+        'Title',
+        'Paragraph',
+        'Typography',
+        'Action',
+        '*Icon',
+        'IconSwitch',
+      ],
+      allowedStyleProps: ['position', 'dimension'],
+    },
+  ],
+
   tokens: [
     // Declared in src/tasty-augment.d.ts but previously absent here, so the
     // ESLint plugin reported them as unknown once story files started being
@@ -326,6 +476,9 @@ export default {
     '$input-letter-spacing',
     '$disabled-opacity',
     '$stroke-width',
+    '$outline-offset',
+    '$ring-width',
+    '$item-gap',
     '$large-radius',
     '$card-radius',
     '$leaf-sharp-radius',