@teseor/css 1.14.2 → 1.15.0

package/src/components/forms/form-helper/form-helper.docs.json

@@ -1,151 +0,0 @@
-{
-  "id": "form-helper",
-  "type": "component",
-  "title": "Form Helper",
-  "description": "Helper text for form fields. Provides additional context or instructions.",
-  "api": "./form-helper.api.json",
-  "sections": [
-    {
-      "title": "Default",
-      "examples": [
-        {
-          "items": [
-            { "tag": "span", "class": "ui-form-helper", "text": "Must be at least 8 characters" }
-          ],
-          "code": "<span class=\"ui-form-helper\">Must be at least 8 characters</span>"
-        }
-      ]
-    },
-    {
-      "title": "With Input Field",
-      "description": "Helper text paired with a form input for context.",
-      "examples": [
-        {
-          "layout": "column",
-          "items": [
-            {
-              "tag": "div",
-              "class": "ui-column ui-column--xs",
-              "children": [
-                {
-                  "tag": "input",
-                  "class": "ui-input",
-                  "attrs": { "type": "email", "placeholder": "Email address" }
-                },
-                {
-                  "tag": "span",
-                  "class": "ui-form-helper",
-                  "text": "We will never share your email"
-                }
-              ]
-            }
-          ],
-          "code": "<input class=\"ui-input\" type=\"email\" placeholder=\"Email address\">\n<span class=\"ui-form-helper\">We will never share your email</span>"
-        }
-      ]
-    },
-    {
-      "title": "Error State",
-      "description": "Helper text styled for validation errors using the input error context.",
-      "examples": [
-        {
-          "layout": "column",
-          "items": [
-            {
-              "tag": "div",
-              "class": "ui-column ui-column--xs",
-              "children": [
-                {
-                  "tag": "input",
-                  "class": "ui-input ui-input--error",
-                  "attrs": { "type": "text", "value": "abc" }
-                },
-                {
-                  "tag": "span",
-                  "class": "ui-form-helper",
-                  "attrs": { "style": "color: var(--ui-color-danger);" },
-                  "text": "Password must be at least 8 characters"
-                }
-              ]
-            }
-          ],
-          "code": "<input class=\"ui-input ui-input--error\" value=\"abc\">\n<span class=\"ui-form-helper\" style=\"color: var(--ui-color-danger);\">Password must be at least 8 characters</span>"
-        }
-      ]
-    },
-    {
-      "title": "Success State",
-      "description": "Helper text for successful validation.",
-      "examples": [
-        {
-          "layout": "column",
-          "items": [
-            {
-              "tag": "div",
-              "class": "ui-column ui-column--xs",
-              "children": [
-                {
-                  "tag": "input",
-                  "class": "ui-input ui-input--success",
-                  "attrs": { "type": "text", "value": "strongpassword123" }
-                },
-                {
-                  "tag": "span",
-                  "class": "ui-form-helper",
-                  "attrs": { "style": "color: var(--ui-color-success);" },
-                  "text": "Password strength: strong"
-                }
-              ]
-            }
-          ],
-          "code": "<input class=\"ui-input ui-input--success\" value=\"strongpassword123\">\n<span class=\"ui-form-helper\" style=\"color: var(--ui-color-success);\">Password strength: strong</span>"
-        }
-      ]
-    },
-    {
-      "title": "With Select",
-      "description": "Helper text paired with a select field.",
-      "examples": [
-        {
-          "layout": "column",
-          "items": [
-            {
-              "tag": "div",
-              "class": "ui-column ui-column--xs",
-              "children": [
-                {
-                  "tag": "select",
-                  "class": "ui-select",
-                  "children": [
-                    { "tag": "option", "text": "Choose a country" },
-                    { "tag": "option", "text": "United States" },
-                    { "tag": "option", "text": "Canada" }
-                  ]
-                },
-                {
-                  "tag": "span",
-                  "class": "ui-form-helper",
-                  "text": "Required for shipping calculations"
-                }
-              ]
-            }
-          ],
-          "code": "<select class=\"ui-select\">\n  <option>Choose a country</option>\n</select>\n<span class=\"ui-form-helper\">Required for shipping calculations</span>"
-        }
-      ]
-    }
-  ],
-  "customization": [
-    {
-      "token": "--ui-form-helper-color",
-      "default": "var(--ui-color-text-muted)",
-      "description": "Text color"
-    },
-    {
-      "token": "--ui-form-helper-size",
-      "default": "var(--ui-font-size-sm)",
-      "description": "Font size"
-    },
-    { "token": "--ui-form-helper-gap", "default": "0", "description": "Top margin spacing" }
-  ]
-}

package/src/components/forms/input/input.docs.json

@@ -1,306 +0,0 @@
-{
-  "id": "input",
-  "type": "component",
-  "title": "Input",
-  "description": "Text input field for user data entry. Heights align to grid rows.",
-  "api": "./input.api.json",
-  "sections": [
-    {
-      "title": "Default",
-      "examples": [
-        {
-          "items": [
-            {
-              "tag": "input",
-              "class": "ui-input",
-              "attrs": { "type": "text", "placeholder": "Enter text..." }
-            }
-          ]
-        }
-      ]
-    },
-    {
-      "title": "Sizes",
-      "examples": [
-        {
-          "layout": "column",
-          "items": [
-            {
-              "tag": "input",
-              "class": "ui-input ui-input--sm",
-              "attrs": { "type": "text", "placeholder": "Small (1.5 rows)" }
-            },
-            {
-              "tag": "input",
-              "class": "ui-input",
-              "attrs": { "type": "text", "placeholder": "Default (2 rows)" }
-            },
-            {
-              "tag": "input",
-              "class": "ui-input ui-input--lg",
-              "attrs": { "type": "text", "placeholder": "Large (2.5 rows)" }
-            }
-          ],
-          "code": "<input class=\"ui-input ui-input--sm\" placeholder=\"Small\">\n<input class=\"ui-input\" placeholder=\"Default\">\n<input class=\"ui-input ui-input--lg\" placeholder=\"Large\">"
-        }
-      ]
-    },
-    {
-      "title": "Variants",
-      "examples": [
-        {
-          "layout": "column",
-          "items": [
-            {
-              "tag": "input",
-              "class": "ui-input",
-              "attrs": { "type": "text", "placeholder": "Outline (default)" }
-            },
-            {
-              "tag": "input",
-              "class": "ui-input ui-input--filled",
-              "attrs": { "type": "text", "placeholder": "Filled" }
-            },
-            {
-              "tag": "input",
-              "class": "ui-input ui-input--ghost",
-              "attrs": { "type": "text", "placeholder": "Ghost" }
-            }
-          ],
-          "code": "<input class=\"ui-input\" placeholder=\"Outline\">\n<input class=\"ui-input ui-input--filled\" placeholder=\"Filled\">\n<input class=\"ui-input ui-input--ghost\" placeholder=\"Ghost\">"
-        }
-      ]
-    },
-    {
-      "title": "States",
-      "examples": [
-        {
-          "layout": "column",
-          "items": [
-            {
-              "tag": "input",
-              "class": "ui-input",
-              "attrs": { "type": "text", "placeholder": "Default" }
-            },
-            {
-              "tag": "input",
-              "class": "ui-input ui-input--error",
-              "attrs": { "type": "text", "value": "Invalid input" }
-            },
-            {
-              "tag": "input",
-              "class": "ui-input ui-input--success",
-              "attrs": { "type": "text", "value": "Valid input" }
-            },
-            {
-              "tag": "input",
-              "class": "ui-input",
-              "attrs": { "type": "text", "placeholder": "Disabled", "disabled": "" }
-            },
-            {
-              "tag": "input",
-              "class": "ui-input",
-              "attrs": { "type": "text", "value": "Read only", "readonly": "" }
-            }
-          ],
-          "code": "<input class=\"ui-input\" placeholder=\"Default\">\n<input class=\"ui-input ui-input--error\" value=\"Invalid\">\n<input class=\"ui-input ui-input--success\" value=\"Valid\">\n<input class=\"ui-input\" disabled placeholder=\"Disabled\">\n<input class=\"ui-input\" readonly value=\"Read only\">"
-        }
-      ]
-    },
-    {
-      "title": "Full Width",
-      "examples": [
-        {
-          "items": [
-            {
-              "tag": "input",
-              "class": "ui-input ui-input--block",
-              "attrs": { "type": "text", "placeholder": "Full width input" }
-            }
-          ]
-        }
-      ]
-    },
-    {
-      "title": "With Prefix Icon",
-      "examples": [
-        {
-          "items": [
-            {
-              "tag": "div",
-              "class": "ui-input-group ui-input-group--has-prefix",
-              "children": [
-                {
-                  "tag": "span",
-                  "class": "ui-input-group__addon ui-input-group__addon--start",
-                  "children": [
-                    {
-                      "tag": "svg",
-                      "class": "ui-icon",
-                      "attrs": { "xmlns": "http://www.w3.org/2000/svg", "viewBox": "0 0 24 24" },
-                      "children": [
-                        { "tag": "circle", "attrs": { "cx": "11", "cy": "11", "r": "8" } },
-                        { "tag": "path", "attrs": { "d": "m21 21-4.3-4.3" } }
-                      ]
-                    }
-                  ]
-                },
-                {
-                  "tag": "input",
-                  "class": "ui-input ui-input--block",
-                  "attrs": { "type": "search", "placeholder": "Search..." }
-                }
-              ]
-            }
-          ],
-          "code": "<div class=\"ui-input-group ui-input-group--has-prefix\">\n  <span class=\"ui-input-group__addon ui-input-group__addon--start\">\n    <svg class=\"ui-icon\"><!-- search icon --></svg>\n  </span>\n  <input class=\"ui-input ui-input--block\" type=\"search\" placeholder=\"Search...\">\n</div>"
-        }
-      ]
-    },
-    {
-      "title": "With Suffix Icon",
-      "examples": [
-        {
-          "items": [
-            {
-              "tag": "div",
-              "class": "ui-input-group ui-input-group--has-suffix",
-              "children": [
-                {
-                  "tag": "input",
-                  "class": "ui-input ui-input--block",
-                  "attrs": { "type": "email", "placeholder": "Email address" }
-                },
-                {
-                  "tag": "span",
-                  "class": "ui-input-group__addon ui-input-group__addon--end",
-                  "children": [
-                    {
-                      "tag": "svg",
-                      "class": "ui-icon",
-                      "attrs": { "xmlns": "http://www.w3.org/2000/svg", "viewBox": "0 0 24 24" },
-                      "children": [
-                        {
-                          "tag": "rect",
-                          "attrs": { "width": "20", "height": "16", "x": "2", "y": "4", "rx": "2" }
-                        },
-                        {
-                          "tag": "path",
-                          "attrs": { "d": "m22 7-8.97 5.7a1.94 1.94 0 0 1-2.06 0L2 7" }
-                        }
-                      ]
-                    }
-                  ]
-                }
-              ]
-            }
-          ],
-          "code": "<div class=\"ui-input-group ui-input-group--has-suffix\">\n  <input class=\"ui-input ui-input--block\" type=\"email\" placeholder=\"Email\">\n  <span class=\"ui-input-group__addon ui-input-group__addon--end\">\n    <svg class=\"ui-icon\"><!-- mail icon --></svg>\n  </span>\n</div>"
-        }
-      ]
-    },
-    {
-      "title": "With Both Addons",
-      "examples": [
-        {
-          "items": [
-            {
-              "tag": "div",
-              "class": "ui-input-group ui-input-group--has-prefix ui-input-group--has-suffix",
-              "children": [
-                {
-                  "tag": "span",
-                  "class": "ui-input-group__addon ui-input-group__addon--start",
-                  "children": [
-                    {
-                      "tag": "svg",
-                      "class": "ui-icon",
-                      "attrs": { "xmlns": "http://www.w3.org/2000/svg", "viewBox": "0 0 24 24" },
-                      "children": [
-                        {
-                          "tag": "path",
-                          "attrs": { "d": "M19 21v-2a4 4 0 0 0-4-4H9a4 4 0 0 0-4 4v2" }
-                        },
-                        { "tag": "circle", "attrs": { "cx": "12", "cy": "7", "r": "4" } }
-                      ]
-                    }
-                  ]
-                },
-                {
-                  "tag": "input",
-                  "class": "ui-input ui-input--block",
-                  "attrs": { "type": "text", "placeholder": "Username" }
-                },
-                {
-                  "tag": "span",
-                  "class": "ui-input-group__addon ui-input-group__addon--end ui-input-group__addon--interactive",
-                  "children": [
-                    {
-                      "tag": "svg",
-                      "class": "ui-icon",
-                      "attrs": { "xmlns": "http://www.w3.org/2000/svg", "viewBox": "0 0 24 24" },
-                      "children": [
-                        { "tag": "path", "attrs": { "d": "M18 6 6 18" } },
-                        { "tag": "path", "attrs": { "d": "m6 6 12 12" } }
-                      ]
-                    }
-                  ]
-                }
-              ]
-            }
-          ],
-          "code": "<div class=\"ui-input-group ui-input-group--has-prefix ui-input-group--has-suffix\">\n  <span class=\"ui-input-group__addon ui-input-group__addon--start\">...</span>\n  <input class=\"ui-input ui-input--block\" placeholder=\"Username\">\n  <span class=\"ui-input-group__addon ui-input-group__addon--end ui-input-group__addon--interactive\">...</span>\n</div>"
-        }
-      ]
-    }
-  ],
-  "customization": [
-    { "token": "--ui-input-height", "default": "var(--ui-row-2)", "description": "Default height" },
-    {
-      "token": "--ui-input-height-sm",
-      "default": "calc(var(--ui-row) * 1.5)",
-      "description": "Small height"
-    },
-    {
-      "token": "--ui-input-height-lg",
-      "default": "calc(var(--ui-row) * 2.5)",
-      "description": "Large height"
-    },
-    {
-      "token": "--ui-input-padding-x",
-      "default": "var(--ui-space-1)",
-      "description": "Horizontal padding"
-    },
-    {
-      "token": "--ui-input-font-size",
-      "default": "var(--ui-font-size-sm)",
-      "description": "Font size"
-    },
-    {
-      "token": "--ui-input-radius",
-      "default": "var(--ui-radius-md)",
-      "description": "Border radius"
-    },
-    {
-      "token": "--ui-input-bg",
-      "default": "var(--ui-color-bg)",
-      "description": "Background color"
-    },
-    {
-      "token": "--ui-input-border-color",
-      "default": "var(--ui-color-border-strong)",
-      "description": "Border color"
-    },
-    {
-      "token": "--ui-input-border-color-focus",
-      "default": "var(--ui-color-primary)",
-      "description": "Focus border color"
-    },
-    { "token": "--ui-input-color", "default": "var(--ui-color-text)", "description": "Text color" },
-    {
-      "token": "--ui-input-placeholder",
-      "default": "var(--ui-color-text-muted)",
-      "description": "Placeholder color"
-    }
-  ]
-}

package/src/components/forms/label/label.docs.json

@@ -1,110 +0,0 @@
-{
-  "id": "label",
-  "type": "component",
-  "title": "Label",
-  "description": "Form control labels. Associates text with inputs via htmlFor or wrapping.",
-  "api": "./label.api.json",
-  "sections": [
-    {
-      "title": "Default",
-      "examples": [
-        {
-          "items": [
-            {
-              "tag": "label",
-              "class": "ui-label",
-              "text": "Email address",
-              "attrs": { "for": "input1" }
-            }
-          ],
-          "code": "<label class=\"ui-label\" for=\"input\">Email address</label>"
-        }
-      ]
-    },
-    {
-      "title": "Required",
-      "examples": [
-        {
-          "items": [
-            {
-              "tag": "label",
-              "class": "ui-label",
-              "attrs": { "for": "input2" },
-              "children": [
-                { "text": "Email address" },
-                { "tag": "span", "class": "ui-label__required", "text": "*" }
-              ]
-            }
-          ],
-          "code": "<label class=\"ui-label\" for=\"input\">\n  Email address\n  <span class=\"ui-label__required\">*</span>\n</label>"
-        }
-      ]
-    },
-    {
-      "title": "Optional",
-      "examples": [
-        {
-          "items": [
-            {
-              "tag": "label",
-              "class": "ui-label",
-              "attrs": { "for": "input3" },
-              "children": [
-                { "text": "Phone number" },
-                { "tag": "span", "class": "ui-label__optional", "text": "(optional)" }
-              ]
-            }
-          ],
-          "code": "<label class=\"ui-label\" for=\"input\">\n  Phone number\n  <span class=\"ui-label__optional\">(optional)</span>\n</label>"
-        }
-      ]
-    },
-    {
-      "title": "Sizes",
-      "examples": [
-        {
-          "layout": "column",
-          "items": [
-            { "tag": "label", "class": "ui-label", "text": "Default size" },
-            { "tag": "label", "class": "ui-label ui-label--lg", "text": "Large size" }
-          ],
-          "code": "<label class=\"ui-label\">Default</label>\n<label class=\"ui-label ui-label--lg\">Large</label>"
-        }
-      ]
-    },
-    {
-      "title": "Disabled",
-      "examples": [
-        {
-          "items": [
-            {
-              "tag": "label",
-              "class": "ui-label",
-              "text": "Disabled label",
-              "attrs": { "aria-disabled": "true" }
-            }
-          ],
-          "code": "<label class=\"ui-label\" aria-disabled=\"true\">Disabled</label>"
-        }
-      ]
-    }
-  ],
-  "customization": [
-    {
-      "token": "--ui-label-font-size",
-      "default": "var(--ui-font-size-sm)",
-      "description": "Default font size"
-    },
-    {
-      "token": "--ui-label-font-size-lg",
-      "default": "var(--ui-font-size-md)",
-      "description": "Large font size"
-    },
-    { "token": "--ui-label-color", "default": "var(--ui-color-text)", "description": "Text color" },
-    {
-      "token": "--ui-label-required-color",
-      "default": "var(--ui-color-danger)",
-      "description": "Required indicator color"
-    }
-  ]
-}