@rarui/components 1.16.0 → 1.17.0

package/CHANGELOG.md

@@ -2,6 +2,12 @@
 
 `@rarui/components` components is a component library built with [Lit](https://lit.dev/).
 
+## 2025-07-03 `1.17.0`
+
+#### 🎉 New features
+
+- Added new surface `Modal` component. ([#125](https://git.rarolabs.com.br/frontend/rarui/-/merge_requests/125) by [@junior](https://git.rarolabs.com.br/junior))
+
 ## 2025-06-30 `1.16.0`
 
 #### 🎉 New features

package/custom-elements.json

@@ -1,5 +1,5 @@
 {
-  "version": "1.15.0",
+  "version": "1.16.0",
   "tags": [
     {
       "name": "rarui-avatar",
@@ -7186,6 +7186,114 @@
           "type": "string"
         }
       ]
+    },
+    {
+      "name": "rarui-modal",
+      "description": "## Rarui Modal\n---\nThe modal component provides a base for popovers, suspended forms, tutorials, or any other content above the UI main surface.\n\nSee [a complete document](https://rarui.rarolabs.com.br/docs/components-web-components/surface/modal) for more details.",
+      "attributes": [
+        {
+          "name": "padding",
+          "default": "base",
+          "description": "Padding properties are used to generate space around the content area of an Accordion.Body..\n\n- base\n- none",
+          "type": "string",
+          "values": [
+            {
+              "name": "base",
+              "description": "(default)"
+            },
+            {
+              "name": "none"
+            }
+          ]
+        },
+        {
+          "name": "max-width",
+          "description": "The **`max-width`** CSS property sets the maximum width of an element. It prevents the used value of the `width` property from becoming larger than the value specified by `max-width`. It is also possible to pass a specific value.\n\n\n**Initial value**: `none`\n\nThis property supports responsive values. You can pass a single value like `\"fit-content\"`.\n\n Or an object like:\n \n ```\n{\n  \"xs\": \"fit-content\",\n  \"md\": \"intrinsic\",\n  \"lg\": \"max-content\",\n  \"xl\": \"min-content\"\n}\n```\n\n- fit-content\n- intrinsic\n- max-content\n- min-content\n- none\n- stretch",
+          "values": [
+            {
+              "name": "fit-content"
+            },
+            {
+              "name": "intrinsic"
+            },
+            {
+              "name": "max-content"
+            },
+            {
+              "name": "min-content"
+            },
+            {
+              "name": "none"
+            },
+            {
+              "name": "stretch"
+            }
+          ]
+        },
+        {
+          "name": "open",
+          "description": "Whether the modal is open or not.",
+          "type": "boolean"
+        },
+        {
+          "name": "portal-id",
+          "description": "Specifies the ID of the portal element where the modal should be rendered.\nThis can be useful for rendering the modal in a different part of the DOM, such as a modal or overlay.",
+          "type": "string"
+        },
+        {
+          "name": "z-index",
+          "description": "The zIndex property specifies the stack order of the box.\n\nThis property supports responsive values. You can pass a single value like `\"$100\"`.\n\n Or an object like:\n \n ```\n{\n  \"xs\": \"$100\",\n  \"md\": \"$200\",\n  \"lg\": \"$300\",\n  \"xl\": \"$400\"\n}\n```\n\n- $100\n- $200\n- $300\n- $400\n- $500\n- $600\n- $700\n- $800\n- $900",
+          "values": [
+            {
+              "name": "$100"
+            },
+            {
+              "name": "$200"
+            },
+            {
+              "name": "$300"
+            },
+            {
+              "name": "$400"
+            },
+            {
+              "name": "$500"
+            },
+            {
+              "name": "$600"
+            },
+            {
+              "name": "$700"
+            },
+            {
+              "name": "$800"
+            },
+            {
+              "name": "$900"
+            }
+          ]
+        }
+      ]
+    },
+    {
+      "name": "rarui-modal-footer",
+      "description": "## Rarui Modal Footer\n---\nThe modal component provides a base for popovers, suspended forms, tutorials, or any other content above the UI main surface.\n\nSee [a complete document](https://rarui.rarolabs.com.br/docs/components-web-components/surface/modal) for more details.",
+      "attributes": []
+    },
+    {
+      "name": "rarui-modal-header",
+      "attributes": [
+        {
+          "name": "title",
+          "description": "The title to display in the Modal header.",
+          "type": "string"
+        },
+        {
+          "name": "subtitle",
+          "description": "The subtitle to display in the Modal header.",
+          "type": "string"
+        }
+      ]
     }
   ]
 }

package/dist/index.d.ts

@@ -17377,6 +17377,33 @@ interface CardSprinkle {
     backgroundColor?: AddDollar<keyof typeof cardBackgroundColorProperties> | Conditions<AddDollar<keyof typeof cardBackgroundColorProperties>>;
 }
 
+declare const modalStyles: {
+    modal: RuntimeFn<{
+        /**
+         * Padding properties are used to generate space around the content area of an Accordion.Body..
+         * @default base
+         */
+        padding: {
+            base: {
+                padding: `var(--${string}) var(--${string})` | `var(--${string}) var(--${string}, ${string})` | `var(--${string}, ${string}) var(--${string})` | `var(--${string}, ${string}) var(--${string}, ${string})`;
+            };
+            none: {
+                padding: number;
+            };
+        };
+    }>;
+    overlay: string;
+};
+
+type ModalVariants = Omit<NonNullable<RecipeVariants<typeof modalStyles.modal>>, "selected">;
+type ModalDynamicProperties = Pick<StandardLonghandProperties, "maxWidth">;
+interface ModalSprinkle extends ModalDynamicProperties {
+    /**
+     * The zIndex property specifies the stack order of the box.
+     */
+    zIndex?: AddDollar<keyof typeof zIndexProperties> | Conditions<AddDollar<keyof typeof zIndexProperties>>;
+}
+
 declare const paginationStyles: {
     container: RuntimeFn<{
         size: {
@@ -17801,6 +17828,36 @@ interface CardHeaderProps {
     description?: string;
 }
 
+interface ModalTyping {
+    /**
+     * Whether the modal is open or not.
+     */
+    open: boolean;
+    /**
+     * Specifies the ID of the portal element where the modal should be rendered.
+     * This can be useful for rendering the modal in a different part of the DOM, such as a modal or overlay.
+     */
+    portalId?: string;
+    /**
+     * Callback fired when the component requests to be closed.
+     * @TJS-type (open: boolean) => void;
+     */
+    onDismiss: (open: boolean) => void;
+}
+type ModalProps = ModalTyping & ModalSprinkle & ModalVariants;
+
+interface ModalHeaderTypings {
+    /**
+     * The title to display in the Modal header.
+     */
+    title?: string;
+    /**
+     * The subtitle to display in the Modal header.
+     */
+    subtitle?: string;
+}
+type ModalHeaderProps = ModalHeaderTypings;
+
 type LinkProps = LinkVariants;
 
 interface PaginationTyping {
@@ -18651,3 +18708,57 @@ declare class RaruiCard extends LitElement {
     static styles: CSSResult;
     render(): TemplateResult<1>;
 }
+
+declare global {
+    interface HTMLElementTagNameMap {
+        "rarui-modal": RaruiModal;
+    }
+}
+/**
+ * ## Rarui Modal
+ * ---
+ * The modal component provides a base for popovers, suspended forms, tutorials, or any other content above the UI main surface.
+ *
+ See [a complete document](https://rarui.rarolabs.com.br/docs/components-web-components/surface/modal) for more details.
+ */
+type ModalProperties = Omit<Partial<ModalProps>, "onDismiss">;
+
+declare class RaruiModal extends LitElement {
+    sprinkleAttrs: Record<string, string>;
+    padding: ModalProperties["padding"];
+    portalId: ModalProperties["portalId"];
+    open: ModalProperties["open"];
+    maxWidth: ModalProperties["maxWidth"];
+    dialog: HTMLElement;
+    static styles: CSSResult;
+    cleanupAutoUpdate?: () => void;
+    connectedCallback(): void;
+    disconnectedCallback(): void;
+    firstUpdated(): void;
+    updated(changed: Map<string, any>): void;
+    private getPortalRoot;
+    private handleKeyDown;
+    private dismiss;
+    render(): TemplateResult<1>;
+}
+
+declare global {
+    interface HTMLElementTagNameMap {
+        "rarui-modal-header": RaruiModalHeader;
+    }
+}
+/**
+ * ## Rarui Modal Header
+ * ---
+ * The modal component provides a base for popovers, suspended forms, tutorials, or any other content above the UI main surface.
+ *
+ See [a complete document](https://rarui.rarolabs.com.br/docs/components-web-components/surface/modal) for more details.
+ */
+type ModalHeaderProperties = ModalHeaderProps;
+
+declare class RaruiModalHeader extends LitElement {
+    title: string;
+    subtitle: ModalHeaderProperties["subtitle"];
+    private handleClose;
+    render(): TemplateResult<1>;
+}