@warp-ds/elements 2.10.0-next.23 → 2.10.0-next.24

package/dist/packages/textarea/textarea.react.stories.d.ts

@@ -3,7 +3,7 @@ import React from "react";
 import { Textarea } from "./react";
 declare const _default: {
     title: string;
-    render(args: Omit<Omit<Omit<React.HTMLAttributes<import("./textarea").WarpTextarea>, "value" | "form" | "label" | "name" | "disabled" | "invalid" | "helpText" | "optional" | "placeholder" | "readOnly" | "readonly" | "required" | "renderRoot" | "isUpdatePending" | "hasUpdated" | "addController" | "removeController" | "connectedCallback" | "disconnectedCallback" | "attributeChangedCallback" | "requestUpdate" | "updateComplete" | "onblur" | "onchange" | "onfocus" | "oninput" | "updated" | "firstUpdated" | "resetFormControl" | "_helptextstyles" | "_helpId" | "_id" | "_error" | "handler" | "render" | "validationTarget" | "internals" | "showError" | "validationMessage" | "validity" | "validationComplete" | "checkValidity" | "formResetCallback" | "valueChangedCallback" | "validityCallback" | "validationMessageCallback" | "setValue" | "shouldFormValueUpdate" | "renderOptions" | "onFocus" | "onBlur" | "onChange" | "onInput" | "reportValidity" | "minHeight" | "setCustomValidity" | "maxRows" | "minRows" | "maxHeight" | "_textareaStyles"> & {
+    render(args: Omit<Omit<Omit<React.HTMLAttributes<import("./textarea").WarpTextarea>, "value" | "form" | "label" | "name" | "disabled" | "invalid" | "helpText" | "optional" | "placeholder" | "readOnly" | "readonly" | "required" | "renderRoot" | "isUpdatePending" | "hasUpdated" | "addController" | "removeController" | "connectedCallback" | "disconnectedCallback" | "attributeChangedCallback" | "requestUpdate" | "updateComplete" | "onblur" | "onchange" | "onfocus" | "oninput" | "updated" | "firstUpdated" | "resetFormControl" | "_helptextstyles" | "_helpId" | "_id" | "_error" | "handler" | "render" | "validationTarget" | "internals" | "showError" | "validationMessage" | "validity" | "validationComplete" | "checkValidity" | "formResetCallback" | "valueChangedCallback" | "validityCallback" | "validationMessageCallback" | "setValue" | "shouldFormValueUpdate" | "renderOptions" | "onFocus" | "onBlur" | "onChange" | "onInput" | "reportValidity" | "setCustomValidity" | "maxRows" | "minRows" | "_textareaStyles"> & {
         onBlur?: ((e: Event) => void) | undefined;
         onblur?: ((e: Event) => void) | undefined;
         onChange?: ((e: Event) => void) | undefined;
@@ -18,7 +18,7 @@ declare const _default: {
         minRows?: number;
         readOnly?: boolean;
     } & React.RefAttributes<import("./textarea").WarpTextarea>): React.JSX.Element;
-    component: React.ForwardRefExoticComponent<Omit<Omit<Omit<React.HTMLAttributes<import("./textarea").WarpTextarea>, "value" | "form" | "label" | "name" | "disabled" | "invalid" | "helpText" | "optional" | "placeholder" | "readOnly" | "readonly" | "required" | "renderRoot" | "isUpdatePending" | "hasUpdated" | "addController" | "removeController" | "connectedCallback" | "disconnectedCallback" | "attributeChangedCallback" | "requestUpdate" | "updateComplete" | "onblur" | "onchange" | "onfocus" | "oninput" | "updated" | "firstUpdated" | "resetFormControl" | "_helptextstyles" | "_helpId" | "_id" | "_error" | "handler" | "render" | "validationTarget" | "internals" | "showError" | "validationMessage" | "validity" | "validationComplete" | "checkValidity" | "formResetCallback" | "valueChangedCallback" | "validityCallback" | "validationMessageCallback" | "setValue" | "shouldFormValueUpdate" | "renderOptions" | "onFocus" | "onBlur" | "onChange" | "onInput" | "reportValidity" | "minHeight" | "setCustomValidity" | "maxRows" | "minRows" | "maxHeight" | "_textareaStyles"> & {
+    component: React.ForwardRefExoticComponent<Omit<Omit<Omit<React.HTMLAttributes<import("./textarea").WarpTextarea>, "value" | "form" | "label" | "name" | "disabled" | "invalid" | "helpText" | "optional" | "placeholder" | "readOnly" | "readonly" | "required" | "renderRoot" | "isUpdatePending" | "hasUpdated" | "addController" | "removeController" | "connectedCallback" | "disconnectedCallback" | "attributeChangedCallback" | "requestUpdate" | "updateComplete" | "onblur" | "onchange" | "onfocus" | "oninput" | "updated" | "firstUpdated" | "resetFormControl" | "_helptextstyles" | "_helpId" | "_id" | "_error" | "handler" | "render" | "validationTarget" | "internals" | "showError" | "validationMessage" | "validity" | "validationComplete" | "checkValidity" | "formResetCallback" | "valueChangedCallback" | "validityCallback" | "validationMessageCallback" | "setValue" | "shouldFormValueUpdate" | "renderOptions" | "onFocus" | "onBlur" | "onChange" | "onInput" | "reportValidity" | "setCustomValidity" | "maxRows" | "minRows" | "_textareaStyles"> & {
         onBlur?: ((e: Event) => void) | undefined;
         onblur?: ((e: Event) => void) | undefined;
         onChange?: ((e: Event) => void) | undefined;
@@ -33,6 +33,23 @@ declare const _default: {
         minRows?: number;
         readOnly?: boolean;
     } & React.RefAttributes<import("./textarea").WarpTextarea>>;
+    args: {
+        optional: false;
+        required: false;
+        disabled: false;
+        invalid: false;
+        readOnly: false;
+        maxRows: undefined;
+        minRows: undefined;
+    };
+    argTypes: {
+        maxRows: {
+            type: "number";
+        };
+        minRows: {
+            type: "number";
+        };
+    };
 };
 export default _default;
 export type Story = StoryObj<typeof Textarea>;

package/dist/packages/textarea/textarea.react.stories.js

@@ -6,6 +6,23 @@ export default {
         return React.createElement(Textarea, { ...args });
     },
     component: Textarea,
+    args: {
+        optional: false,
+        required: false,
+        disabled: false,
+        invalid: false,
+        readOnly: false,
+        maxRows: undefined,
+        minRows: undefined,
+    },
+    argTypes: {
+        maxRows: {
+            type: "number",
+        },
+        minRows: {
+            type: "number",
+        },
+    },
 };
 export const Default = {
     args: {

package/dist/packages/textfield/textfield.react.stories.d.ts

@@ -33,6 +33,36 @@ declare const _default: {
         maxLength?: number;
         readOnly?: boolean;
     } & React.RefAttributes<import("./textfield").WarpTextField>>;
+    args: {
+        type: string;
+        optional: false;
+        required: false;
+        disabled: false;
+        invalid: false;
+        size: undefined;
+        max: undefined;
+        maxLength: undefined;
+        min: undefined;
+        minLength: undefined;
+        readOnly: false;
+    };
+    argTypes: {
+        max: {
+            type: "number";
+        };
+        min: {
+            type: "number";
+        };
+        maxLength: {
+            type: "number";
+        };
+        minLength: {
+            type: "number";
+        };
+        size: {
+            type: "number";
+        };
+    };
 };
 export default _default;
 export type Story = StoryObj<typeof TextField>;

package/dist/packages/textfield/textfield.react.stories.js

@@ -11,11 +11,43 @@ export default {
         return React.createElement(TextField, { ...args });
     },
     component: TextField,
+    args: {
+        type: "text",
+        optional: false,
+        required: false,
+        disabled: false,
+        invalid: false,
+        size: undefined,
+        max: undefined,
+        maxLength: undefined,
+        min: undefined,
+        minLength: undefined,
+        readOnly: false,
+    },
+    argTypes: {
+        max: {
+            type: "number",
+        },
+        min: {
+            type: "number",
+        },
+        maxLength: {
+            type: "number",
+        },
+        minLength: {
+            type: "number",
+        },
+        size: {
+            type: "number",
+        },
+    },
 };
 export const Default = {
     args: {
         label: "Email",
         type: "email",
+        optional: false,
+        required: false,
     },
 };
 export const WithPlaceholder = {

package/dist/web-types.json

@@ -1,7 +1,7 @@
 {
   "$schema": "https://raw.githubusercontent.com/JetBrains/web-types/master/schema/web-types.json",
   "name": "@warp-ds/elements",
-  "version": "2.10.0-next.22",
+  "version": "2.10.0-next.23",
   "description-markup": "markdown",
   "contributions": {
     "html": {
@@ -1543,7 +1543,7 @@
         },
         {
           "name": "w-modal",
-          "description": "Modals (or dialogs) display important information that users need to acknowledge.\n---\n\n\n### **Events:**\n - **shown**\n- **hidden**\n\n### **Slots:**\n - **header** - Typically where you would use the `w-modal-header` component.\n- **content** - The main content of the modal.\n- **footer** - Typically where you would use the `w-modal-footer` component, for things like actions.",
+          "description": "Modals (or dialogs) display important information that users need to acknowledge.\n---\n\n\n### **Events:**\n - **shown**\n- **hidden**\n\n### **Slots:**\n - **header** - Typically where you would use the `w-modal-header` component.\n- **content** - The main content of the modal.\n- **footer** - Typically where you would use the `w-modal-footer` component, for things like actions.\n\n### **CSS Properties:**\n - **--w-c-modal-backdrop-color** - undefined _(default: undefined)_\n- **--w-c-modal-bg** - undefined _(default: undefined)_\n- **--w-c-modal-box-shadow** - undefined _(default: undefined)_\n- **--w-c-modal-color** - undefined _(default: undefined)_\n- **--w-c-modal-height** - undefined _(default: undefined)_\n- **--w-c-modal-max-height** - undefined _(default: undefined)_\n- **--w-c-modal-min-height** - undefined _(default: undefined)_\n- **--w-c-modal-translate-distance** - undefined _(default: undefined)_\n- **--w-c-modal-width** - undefined _(default: undefined)_\n\n### **CSS Parts:**\n - **dialog** - the root element inside the component (`<dialog>` element).\n- **wrapper** - container for all elements, direct child of `<dialog>`.\n- **content** - the container for the `content` slot items (children).",
           "doc-url": "",
           "attributes": [
             {
@@ -1598,7 +1598,7 @@
         },
         {
           "name": "w-modal-footer",
-          "description": "The footer section of a modal, typically where you place actions.\n---\n",
+          "description": "The footer section of a modal, typically where you place actions.\n---\n\n\n### **CSS Properties:**\n - **--w-c-modal-footer-gap** -  adjusts the flex gap between actions in the footer. _(default: undefined)_\n\n### **CSS Parts:**\n - **footer** - the container for slotted items (children).",
           "doc-url": "",
           "attributes": [],
           "events": [],
@@ -1606,7 +1606,7 @@
         },
         {
           "name": "w-modal-header",
-          "description": "The header section of a modal, typically where you place the title and a close button.\n---\n\n\n### **Events:**\n - **backClicked**\n\n### **Slots:**\n - **top** - Customize the title bar, for example to have a header image that reaches the modal's edges. See the With Image story for an example.",
+          "description": "The header section of a modal, typically where you place the title and a close button.\n---\n\n\n### **Events:**\n - **backClicked**\n\n### **Slots:**\n - **top** - Customize the title bar, for example to have a header image that reaches the modal's edges. See the With Image story for an example.\n\n### **CSS Properties:**\n - **--w-c-modal-header-font-size** - undefined _(default: undefined)_\n- **--w-c-modal-header-line-height** - undefined _(default: undefined)_\n- **--w-c-modal-header-margin-bottom** - undefined _(default: undefined)_\n\n### **CSS Parts:**\n - **header** - the root element inside the component.\n- **top** - the container for the image (`top` slot).\n- **back** - the back button, if visible.\n- **title** - the title element.\n- **close** - the close button, if visible.",
           "doc-url": "",
           "attributes": [
             {
@@ -2845,6 +2845,22 @@
     },
     "css": {
       "properties": [
+        { "name": "--w-c-modal-backdrop-color" },
+        { "name": "--w-c-modal-bg" },
+        { "name": "--w-c-modal-box-shadow" },
+        { "name": "--w-c-modal-color" },
+        { "name": "--w-c-modal-height" },
+        { "name": "--w-c-modal-max-height" },
+        { "name": "--w-c-modal-min-height" },
+        { "name": "--w-c-modal-translate-distance" },
+        { "name": "--w-c-modal-width" },
+        {
+          "name": "--w-c-modal-footer-gap",
+          "description": " adjusts the flex gap between actions in the footer."
+        },
+        { "name": "--w-c-modal-header-font-size" },
+        { "name": "--w-c-modal-header-line-height" },
+        { "name": "--w-c-modal-header-margin-bottom" },
         { "name": "--w-c-snackbar-item-radius" },
         { "name": "--w-c-snackbar-item-max-width" },
         { "name": "--w-c-snackbar-item-min-width" },
@@ -2864,6 +2880,36 @@
         { "name": "--w-c-snackbar-z-index" }
       ],
       "pseudo-elements": [
+        {
+          "name": "part(dialog)",
+          "description": "the root element inside the component (`<dialog>` element)."
+        },
+        {
+          "name": "part(wrapper)",
+          "description": "container for all elements, direct child of `<dialog>`."
+        },
+        {
+          "name": "part(content)",
+          "description": "the container for the `content` slot items (children)."
+        },
+        {
+          "name": "part(footer)",
+          "description": "the container for slotted items (children)."
+        },
+        {
+          "name": "part(header)",
+          "description": "the root element inside the component."
+        },
+        {
+          "name": "part(top)",
+          "description": "the container for the image (`top` slot)."
+        },
+        { "name": "part(back)", "description": "the back button, if visible." },
+        { "name": "part(title)", "description": "the title element." },
+        {
+          "name": "part(close)",
+          "description": "the close button, if visible."
+        },
         {
           "name": "part(item)",
           "description": "the container wrapping the message, icon and actions."