@cube-dev/ui-kit 0.208.0 → 0.210.0

package/docs/components/fields/FileInput.md

@@ -19,7 +19,7 @@ A file input component that allows users to select and upload files through a cu
 - **`placeholder`** `string` — Text displayed when no file is selected
 - **`accept`** `string` — Comma-separated list of accepted file types
 - **`type`** `'file' | 'text'` (default: `file`) — How to process the selected file(s)
-- **`size`** `'small' | 'default' | 'large'` (default: `default`) — The size of the input
+- **`size`** `'small' | 'default' | 'large'` (default: `default`) — The size of the input: the same heights as text inputs (28, 32 and 40px)
 - **`inputStyles`** `Styles` — Custom styles for the file input element
 - **`inputProps`** `Props` — Direct props passed to the native file input element
 - **`onChange`** `function` — Callback fired when files are selected
@@ -38,11 +38,11 @@ Supports all [Field properties](../../FieldProperties.md)
 
 #### styles
 
-Styles the input element. Its style props place and size the field: see [Field properties](../../FieldProperties.md).
+Styles the input element, the box that opens the file dialog. It is drawn like the text inputs' box and fills the width of its field, as they do; narrow it with `controlWidth`. Its style props place and size the field: see [Field properties](../../FieldProperties.md).
 
 **Sub-elements:**
 
-- `Button` - The clickable button element for file selection
+- `Button` - The "Choose file" chip at the start of the box
 - `Placeholder` - Text shown when no file is selected
 - `Value` - Text showing the selected file name(s)
 - `Input` - The hidden native file input element
@@ -58,7 +58,11 @@ These properties allow direct style application without using the `styles` prop:
 
 The `mods` property accepts the following modifiers you can override:
 
-- **`drag-hover`** `boolean` — Whether files are being dragged over the component
+- **`drag-hover`** `boolean` — Whether files are being dragged over the component (never while disabled)
+- **`hovered`** `boolean` — Whether the pointer is over the component
+- **`pressed`** `boolean` — Whether the component is being pressed
+- **`selected`** `boolean` — Whether a file is selected
+- **`size`** `string` — The `size` prop's value
 - **`disabled`** `boolean` — Whether the file input is disabled
 - **`invalid`** `boolean` — Whether the file input has validation errors
 - **`valid`** `boolean` — Whether the file input is valid
@@ -87,6 +91,16 @@ The `mods` property accepts the following modifiers you can override:
 
 When bound to a legacy or modern form, resetting updates the displayed filename and clears any obsolete native file selection. This also allows choosing the same file again. A nonempty string value can display a filename, but it cannot restore file bytes; the user must select the file again. With `type="text"`, the form stores the file's text content.
 
+### Sizes
+
+Each size has the height of a text input of the same size, so the two line up in a form.
+
+```jsx
+<FileInput label="Key file" size="small" />
+<FileInput label="Key file" />
+<FileInput label="Key file" size="large" />
+```
+
 ### With Validation
 
 Pass `isValid` or `isInvalid` to tint the border and show the matching state icon.
@@ -173,7 +187,6 @@ This component supports all [Field properties](../../FieldProperties.md) when us
 - Implement file preview functionality for images
 - Add support for file size and type validation messages
 - Consider adding file removal functionality for selected files
-- Implement custom drag-and-drop visual feedback
 
 ## Related Components
 

package/docs/tasty/ai-agents.md

@@ -201,7 +201,7 @@ Advanced states:
 | `@name`        | project state alias                                                              | `@mobile`                                           |
 
 - At root level write the selector directly: ❌ `'@own(:hover)'` → ✅ `':hover'`.
-- `@name` aliases must exist in `states` in the config or be declared locally as an `'@name': '<state expression>'` key; alias keys start with `@` and their value must be a valid state expression.
+- `@name` aliases must exist in `states` in the config or be declared locally as an `'@name': '<state expression>'` key; alias keys start with `@` and their value must be a valid state expression. A value may use other aliases (`'@collapsed': '@mobile & !expanded'`), but never in a loop.
 - `:is()` / `:has()` / `:not()` / `:where()` work in state keys but support at most 2 levels of nested parentheses, and `:has()` is expensive — prefer `@parent()`, `@own()` and modifiers.
 
 When extending a parent's state map: `'@inherit'` reuses the parent's value for that state, `null` removes a state (or resets a property, letting recipes fill in), `false` is a tombstone that blocks it entirely.

package/docs/tasty/design-system.md

@@ -191,6 +191,18 @@ const Card = tasty({
 });
 ```
 
+Aliases can build on each other, so a composite state is defined once too:
+
+```tsx
+configure({
+  states: {
+    '@mobile': '@media(w < 768px)',
+    '@tablet': '@media(768px <= w < 1024px)',
+    '@touch': '@mobile | @tablet',
+  },
+});
+```
+
 Theme switching belongs in tokens (`'#surface': { '': '#fff', '@dark': '#1c1c1e' }`) rather than in component state maps, so components stay theme-agnostic.
 
 Without aliases, the same component would need the full media query expression inlined in every state map — across every property, in every component. Aliases eliminate that duplication.

package/docs/tasty/dsl.md

@@ -29,6 +29,26 @@ styles: {
 }
 ```
 
+An alias can use other aliases, anywhere in its expression:
+
+```jsx
+configure({
+  states: {
+    '@mobile': '@media(w < 768px)',
+    '@collapsed': '@mobile & !expanded',
+  },
+});
+
+styles: {
+  '@compact': '@collapsed | @media:print', // local, built on a global alias
+  padding: { '': '4x', '@compact': '2x' },
+}
+```
+
+- A local alias sees the component's aliases first, then the global ones. Aliases declared inside a sub-element also see the root-level ones.
+- A global alias sees only global aliases. It means the same thing in every component: if a component redefines `@mobile` locally, the global `@collapsed` keeps using the global `@mobile`.
+- A circular alias (`'@a': '@b'` with `'@b': '@a'`, or `'@a': '@a & hovered'`) never matches, and a `CIRCULAR_STATE_ALIAS` warning names the loop.
+
 #### State Key Types
 
 | Syntax             | Example                  | Generated CSS                                                            |

package/docs/tasty/pipeline.md

@@ -149,7 +149,7 @@ Converts each state key in a style value map (like `'hovered & !disabled'`, `'@m
    - `@own(hovered)` → `OwnCondition` wrapping the parsed inner condition
    - `@supports(display: grid)` → `SupportsCondition`
    - `@(w < 600px)` → `ContainerCondition` (dimension, style, or raw subtypes)
-   - `@mobile` → Resolved via predefined states, then parsed recursively
+   - `@mobile` → Resolved via predefined states, then parsed recursively. A local alias resolves against local, then global aliases; a global alias resolves against global aliases only. A stack of the aliases being resolved stops a cycle: the repeated alias becomes `FALSE` and emits `CIRCULAR_STATE_ALIAS`
 
 Pipeline warnings for invalid inputs (e.g. bad `$` selector affix) are emitted from `warnings.ts`.
 

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@cube-dev/ui-kit",
-  "version": "0.208.0",
+  "version": "0.210.0",
   "type": "module",
   "description": "UIKit for Cube Projects",
   "repository": {
@@ -60,7 +60,7 @@
     "@tabler/icons-react": "^3.31.0",
     "@tanstack/react-virtual": "^3.13.12",
     "@tenphi/glaze": "3.0.1",
-    "@tenphi/tasty": "3.17.1",
+    "@tenphi/tasty": "3.18.0",
     "clipboard-copy": "^4.0.1",
     "clsx": "^1.1.1",
     "diff": "^8.0.3",

package/tasty.config.generated.ts

@@ -482,7 +482,7 @@ export const runtimeNames = {
     '$topbar-height',
     '$transition',
   ],
-  states: ['@dark', '@hc', '@reduced-motion'],
+  states: ['@dark', '@hc', '@mobile', '@reduced-motion'],
   presets: [
     'c1',
     'c2',

package/tasty.config.ts

@@ -67,6 +67,49 @@ export const componentTokens = [
   '$overlay-inset-top',
 ];
 
+/**
+ * The style props a container keeps: those that place or size it, and those
+ * that lay out the content the consumer puts in it, including `textAlign` and
+ * the `container` that its container queries read. `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.
+ * `display` picks the layout: a block `Card` needs `flex` or `grid` before
+ * `flow`, `grid*` or `place*` do anything.
+ */
+const containerStyleProps = [
+  'position',
+  'dimension',
+  'display',
+  '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',
+  'textAlign',
+  'container',
+  'direction',
+];
+
 export default {
   extends: '@tenphi/tasty',
 
@@ -152,17 +195,47 @@ export default {
       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. `Alert`,
-    // `Result` and `Skeleton` hold content the consumer supplies, so how that
-    // content is spaced is the consumer's call. `display` picks the layout:
-    // a block `Card` needs `flex` or `grid` before `flow`, `grid*` or `place*`
-    // do anything.
+    // Containers that draw a surface of their own: a fill, a border, a
+    // radius or a theme. `Alert`, `Result` and `Skeleton` hold content the
+    // consumer supplies, so how that content is spaced is the consumer's
+    // call. A member path decides before the export it hangs off, so
+    // `Layout.Panel` and `Layout.PanelHeader` are listed before `Layout`.
     {
       source: '@cube-dev/ui-kit',
       include: [
         'Card',
+        'Layout.Panel',
+        'Layout.PanelHeader',
+        'Alert',
+        'Result',
+        'Skeleton',
+      ],
+      allowedStyleProps: containerStyleProps,
+    },
+    // Layout's sections draw no fill, so the backdrop is the consumer's; their
+    // border is UI Kit's, which separates stacked sections or underlines a
+    // header, so it stays protected.
+    {
+      source: '@cube-dev/ui-kit',
+      include: [
+        'Layout.Content',
+        'Layout.Header',
+        'Layout.Footer',
+        'Layout.Toolbar',
+        'Layout.Block',
+        'Layout.Flex',
+        'Layout.Grid',
+        'Layout.Center',
+        'Layout.Container',
+      ],
+      allowedStyleProps: [...containerStyleProps, 'fill'],
+    },
+    // Frames that draw neither a fill nor a border, such as a page `Layout`
+    // or a plain `Panel`: there is no surface to protect, so a fill or a
+    // border on one is the consumer's, as on a `Block`.
+    {
+      source: '@cube-dev/ui-kit',
+      include: [
         'Panel',
         'ResizablePanel',
         'Content',
@@ -170,41 +243,8 @@ export default {
         'Footer',
         'Layout',
         'GridLayout',
-        'Alert',
-        'Result',
-        'Skeleton',
-      ],
-      allowedStyleProps: [
-        'position',
-        'dimension',
-        'display',
-        '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',
       ],
+      allowedStyleProps: [...containerStyleProps, 'fill', 'border'],
     },
     // A placeholder stands in for content of any shape, so `radius` is its
     // shape, like `dimension`.