import {Meta} from '@storybook/addon-docs/blocks'

<Meta title='@dxtmisha/en/# UI/properties/types/State (state)'/>

# State (state)

The `state` structural type is designated for conceptualizing functional variations, interactive modes, or modifier scales (such as size grids). Assigning this type explicitly forces the compiler to map a modifier CSS class natively to the parent scope adhering to BEM (e.g., `&--primary` or composite `&--size-sm`).

States can be rigidly declared utilizing the `~` prefix or manually via the systemic `_type: "state"` property. Within `dxt-ui`, every declared state natively reflects in the component's strict typings (`props.ts`) and synchronizes with Vue's reactive prop bindings.

The architectural engine relies on two foundational approaches:
- **Singular states:** Utilized for pure boolean toggle flags (e.g., `~primary`). The corresponding compiled modifier is mapped explicitly (`&--primary`).
- **Grouped states:** Utilized for array-like or multi-value properties (e.g., the `~size` grid). Nested structural keys organically emit composite modifiers (`&--size-sm`).

> The `_default` key defines the foundational fallback value during component initialization. Boolean flags accept a `true` assignment, whereas grouped parameters require the string identifier of the active node (e.g., `"md"`). The compiler automatically translates this structural fallback into the `props.ts` configuration.


**Input Configuration (`properties.json`):**
```json
{
  "button": {
    "padding": "12px",
    
    "~primary": {                // Singular state (utilizing ~ alias)
      "background-color": "blue",
      "_default": true           // Boolean default fallback
    },
    
    "disabled": {                // Explicit state type assignment
      "_type": "state",
      "opacity": "0.5"
    },
    
    "~size": {                   // Grouped multi-value states
      "sm": { "height": "32px" },
      "md": { "height": "40px" },
      "_default": "md"           // String default fallback
    }
  }
}
```

**Conceptual Compiled Output (SCSS):**
```scss
.button {
  padding: 12px;

  &--primary { background-color: blue; }
  &--disabled { opacity: 0.5; }
  &--size-sm { height: 32px; }
  &--size-md { height: 40px; }
}
```

**Vue Integration (`props.ts` and `Component.vue`):**
```typescript
// --- props.ts ---
primary?: boolean
disabled?: boolean
size?: 'sm' | 'md'

// --- Component.vue (class bindings) ---
'd1-button--primary': props.primary,
'd1-button--disabled': props.disabled,
[`d1-button--size--${props.size}`]: inArray(propsValues.size, props.size)
```
