fix: tt

Author: harshilp24

website/docs/packages/reference/ui-module-instance.md

@@ -0,0 +1,41 @@
+# UI Module Instance
+
+
+When you add a UI Module from a package into your application, you create a UI Module Instance.
+
+Each instance acts as a reusable, self-contained UI component that can be configured dynamically without modifying the internal structure of the module.
+
+You can create multiple instances of the same UI Module with different input values and settings.
+Instances are named sequentially (e.g., customerProfile1, customerProfile2) for easier identification.
+
+This page provides information about the settings and properties available for configuring a UI Module Instance.
+
+
+
+
+
+### Properties
+
+These properties are only available if they are defined in the UI Module.
+
+
+#### Inputs
+
+<dd>
+
+Allows you to pass dynamic values from the application into the UI Module Instance. Inputs listed at the instance level are automatically generated based on the Inputs defined when the UI Module was created.
+
+Inputs enable you to dynamically populate widget properties, run queries, or execute JavaScript logic inside the module based on the data you provide from the app.
+
+You can bind static values, widget outputs, query results, or app/user data into Inputs using JavaScript bindings.
+
+
+If you want to pass customer details fetched from a query into the module, you can set Inputs using the query response fields.
+
+```js
+//inputCustomerName
+{{getCustomerDetails.data.name}}
+```
+
+
+</dd>

website/docs/packages/reference/ui-module.md

@@ -0,0 +1,146 @@
+# UI Module
+
+A UI Module is a reusable container that groups widgets, queries, and JavaScript logic into a single unit. It is created inside a UI Package and is designed for reuse across multiple applications.
+
+- You can add different types of widgets inside the module container. The entire container is rendered together when the module is used in an application.
+
+- Widgets inside the module cannot be edited directly from the application. All configurations must be done through defined Inputs.
+
+- UI Modules allow dynamic values to be passed from the application into the module using Inputs. Each module instance can receive different values based on application requirements.
+
+This page provides information about the properties, content settings, and style configurations available for UI Modules.
+
+### Content properties
+
+Content properties control the functional behavior of the UI Module container and its dynamic behavior when rendered inside an application.
+
+#### Inputs
+
+<dd>
+
+Inputs allow you to pass dynamic values from the application into the UI Module.
+They act as a bridge between the app and the widgets, queries, or JavaScript logic inside the module.
+
+You can create multiple Inputs when designing the module. Each Input has:
+
+- **Name:** Used to reference the value inside the module.
+
+- **Default value (optional):** Used if no value is passed from the application at runtime.
+
+Inputs help you dynamically configure the behavior of widgets inside the UI Module without modifying the module itself.
+
+**Accessing Inputs**
+
+Inputs are accessed using the same syntax across widgets, queries, and JavaScript functions inside the module:
+
+```javascript
+{{inputs.inputName}}
+```
+
+
+- **Widget**: Use `{{inputs.inputName}}` inside widget properties such as Default Text, Label, Data, or Options.
+
+    *Example:* If you want to prefill a customer profile form with the user's email, create an input named `inputemail` and set the Input widget’s Default Text property to `{{inputs.inputemail}}`, passing `{{appsmith.user.email}}` from the application.
+
+- **Query**: Use `{{inputs.inputName}}` inside the query body to dynamically inject input values at runtime.
+
+   *Example:* If you want to fetch customer addresses based on the selected country, create a query that uses:
+   
+   ```js
+   SELECT * FROM addresses WHERE country = {{inputs.inputCountry}}
+   ```
+
+- **JavaScript**: Use `inputs.inputName` directly inside JavaScript Object functions to dynamically operate based on input values.
+
+    *Example:* If you want to adjust available shipping options based on country, create a function that checks `inputs.inputCountry` and returns different options accordingly.
+   
+
+</dd>
+
+
+#### Visible `boolean`
+
+<dd> 
+
+Controls whether the entire UI Module container is visible when the application loads. This property applies to the entire module container, not to individual widgets.
+
+To control the visibility of individual widgets, configure the widget’s visibility property individually inside the module.
+
+
+</dd>
+
+#### Scroll Contents `boolean`
+
+<dd>
+
+Controls whether the UI Module container allows scrolling when the internal content exceeds the container size. This property applies to the entire module container, not to individual widgets.
+
+</dd>
+
+#### Animate Loading `boolean`
+
+<dd> 
+
+Controls whether a loading animation appears while the UI Module's widgets, queries, or JavaScript logic are initializing. This property applies to the entire module container, not to individual widgets.
+
+
+</dd>
+
+
+### Style Properties
+
+Style properties control the appearance of the UI Module container, including background, border, and shadow settings.
+Some style properties are also JavaScript configurable and can accept dynamic values through Inputs.
+
+#### Background Color `string`
+
+<dd> 
+
+Sets the background color of the UI Module container. You can define a static color value or bind a dynamic color using JavaScript expressions.
+
+Background Color is JavaScript configurable and can also be dynamically controlled by passing a color value through an **Input**.
+
+
+</dd>
+
+
+#### Border Color `string`
+
+<dd> 
+
+Sets the color of the border around the UI Module container. Accepts a hex code, RGB value, or color name.
+
+*Example:* If you want the container to have a grey border, set the Border Color to `#E0E0E0`.
+
+</dd>
+
+
+#### Border Width `number`
+
+<dd> 
+
+Sets the thickness of the border around the UI Module container.
+Default value is `1`.
+
+*Example:* If you want a thicker border for emphasis, set the Border Width to `2`.
+
+</dd>
+
+
+#### Border Radius `string`
+
+<dd> 
+
+Controls the roundness of the corners of the UI Module container. Offers three standard options: **Sharp** (square edge), **Rounded** (slightly curved), and **Pill** (fully curved edges).
+
+</dd>
+
+
+#### Border Shadow `string`
+
+<dd>
+
+Adds a shadow around the UI Module container to create visual elevation. You can select from three standard shadow options: Small, Medium, and Large.
+
+
+</dd>