@teseor/css 1.14.3 → 1.15.0

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

@@ -1,311 +0,0 @@
-{
-  "id": "number-input",
-  "type": "component",
-  "title": "Number Input",
-  "description": "Numeric input with increment and decrement stepper buttons.",
-  "api": "./number-input.api.json",
-  "sections": [
-    {
-      "title": "Default",
-      "examples": [
-        {
-          "items": [
-            {
-              "tag": "div",
-              "class": "ui-number-input",
-              "children": [
-                {
-                  "tag": "button",
-                  "class": "ui-number-input__decrement",
-                  "attrs": { "type": "button", "aria-label": "Decrease" },
-                  "children": [
-                    {
-                      "tag": "svg",
-                      "attrs": { "viewBox": "0 0 24 24" },
-                      "children": [{ "tag": "path", "attrs": { "d": "M5 12h14" } }]
-                    }
-                  ]
-                },
-                {
-                  "tag": "input",
-                  "class": "ui-number-input__field",
-                  "attrs": { "type": "number", "value": "5" }
-                },
-                {
-                  "tag": "button",
-                  "class": "ui-number-input__increment",
-                  "attrs": { "type": "button", "aria-label": "Increase" },
-                  "children": [
-                    {
-                      "tag": "svg",
-                      "attrs": { "viewBox": "0 0 24 24" },
-                      "children": [
-                        { "tag": "path", "attrs": { "d": "M12 5v14" } },
-                        { "tag": "path", "attrs": { "d": "M5 12h14" } }
-                      ]
-                    }
-                  ]
-                }
-              ]
-            }
-          ],
-          "code": "<div class=\"ui-number-input\">\n  <button class=\"ui-number-input__decrement\" aria-label=\"Decrease\"><svg>...</svg></button>\n  <input class=\"ui-number-input__field\" type=\"number\" value=\"5\">\n  <button class=\"ui-number-input__increment\" aria-label=\"Increase\"><svg>...</svg></button>\n</div>"
-        }
-      ]
-    },
-    {
-      "title": "Sizes",
-      "examples": [
-        {
-          "layout": "column",
-          "items": [
-            {
-              "tag": "div",
-              "class": "ui-number-input ui-number-input--sm",
-              "children": [
-                {
-                  "tag": "button",
-                  "class": "ui-number-input__decrement",
-                  "attrs": { "type": "button", "aria-label": "Decrease" },
-                  "children": [
-                    {
-                      "tag": "svg",
-                      "attrs": { "viewBox": "0 0 24 24" },
-                      "children": [{ "tag": "path", "attrs": { "d": "M5 12h14" } }]
-                    }
-                  ]
-                },
-                {
-                  "tag": "input",
-                  "class": "ui-number-input__field",
-                  "attrs": { "type": "number", "value": "3" }
-                },
-                {
-                  "tag": "button",
-                  "class": "ui-number-input__increment",
-                  "attrs": { "type": "button", "aria-label": "Increase" },
-                  "children": [
-                    {
-                      "tag": "svg",
-                      "attrs": { "viewBox": "0 0 24 24" },
-                      "children": [
-                        { "tag": "path", "attrs": { "d": "M12 5v14" } },
-                        { "tag": "path", "attrs": { "d": "M5 12h14" } }
-                      ]
-                    }
-                  ]
-                }
-              ]
-            },
-            {
-              "tag": "div",
-              "class": "ui-number-input",
-              "children": [
-                {
-                  "tag": "button",
-                  "class": "ui-number-input__decrement",
-                  "attrs": { "type": "button", "aria-label": "Decrease" },
-                  "children": [
-                    {
-                      "tag": "svg",
-                      "attrs": { "viewBox": "0 0 24 24" },
-                      "children": [{ "tag": "path", "attrs": { "d": "M5 12h14" } }]
-                    }
-                  ]
-                },
-                {
-                  "tag": "input",
-                  "class": "ui-number-input__field",
-                  "attrs": { "type": "number", "value": "5" }
-                },
-                {
-                  "tag": "button",
-                  "class": "ui-number-input__increment",
-                  "attrs": { "type": "button", "aria-label": "Increase" },
-                  "children": [
-                    {
-                      "tag": "svg",
-                      "attrs": { "viewBox": "0 0 24 24" },
-                      "children": [
-                        { "tag": "path", "attrs": { "d": "M12 5v14" } },
-                        { "tag": "path", "attrs": { "d": "M5 12h14" } }
-                      ]
-                    }
-                  ]
-                }
-              ]
-            },
-            {
-              "tag": "div",
-              "class": "ui-number-input ui-number-input--lg",
-              "children": [
-                {
-                  "tag": "button",
-                  "class": "ui-number-input__decrement",
-                  "attrs": { "type": "button", "aria-label": "Decrease" },
-                  "children": [
-                    {
-                      "tag": "svg",
-                      "attrs": { "viewBox": "0 0 24 24" },
-                      "children": [{ "tag": "path", "attrs": { "d": "M5 12h14" } }]
-                    }
-                  ]
-                },
-                {
-                  "tag": "input",
-                  "class": "ui-number-input__field",
-                  "attrs": { "type": "number", "value": "10" }
-                },
-                {
-                  "tag": "button",
-                  "class": "ui-number-input__increment",
-                  "attrs": { "type": "button", "aria-label": "Increase" },
-                  "children": [
-                    {
-                      "tag": "svg",
-                      "attrs": { "viewBox": "0 0 24 24" },
-                      "children": [
-                        { "tag": "path", "attrs": { "d": "M12 5v14" } },
-                        { "tag": "path", "attrs": { "d": "M5 12h14" } }
-                      ]
-                    }
-                  ]
-                }
-              ]
-            }
-          ],
-          "code": "<div class=\"ui-number-input ui-number-input--sm\">...</div>\n<div class=\"ui-number-input\">...</div>\n<div class=\"ui-number-input ui-number-input--lg\">...</div>"
-        }
-      ]
-    },
-    {
-      "title": "Block",
-      "description": "Full-width layout.",
-      "examples": [
-        {
-          "items": [
-            {
-              "tag": "div",
-              "class": "ui-number-input ui-number-input--block",
-              "children": [
-                {
-                  "tag": "button",
-                  "class": "ui-number-input__decrement",
-                  "attrs": { "type": "button", "aria-label": "Decrease" },
-                  "children": [
-                    {
-                      "tag": "svg",
-                      "attrs": { "viewBox": "0 0 24 24" },
-                      "children": [{ "tag": "path", "attrs": { "d": "M5 12h14" } }]
-                    }
-                  ]
-                },
-                {
-                  "tag": "input",
-                  "class": "ui-number-input__field",
-                  "attrs": { "type": "number", "value": "5" }
-                },
-                {
-                  "tag": "button",
-                  "class": "ui-number-input__increment",
-                  "attrs": { "type": "button", "aria-label": "Increase" },
-                  "children": [
-                    {
-                      "tag": "svg",
-                      "attrs": { "viewBox": "0 0 24 24" },
-                      "children": [
-                        { "tag": "path", "attrs": { "d": "M12 5v14" } },
-                        { "tag": "path", "attrs": { "d": "M5 12h14" } }
-                      ]
-                    }
-                  ]
-                }
-              ]
-            }
-          ],
-          "code": "<div class=\"ui-number-input ui-number-input--block\">...</div>"
-        }
-      ]
-    },
-    {
-      "title": "Disabled",
-      "examples": [
-        {
-          "items": [
-            {
-              "tag": "div",
-              "class": "ui-number-input ui-number-input--disabled",
-              "children": [
-                {
-                  "tag": "button",
-                  "class": "ui-number-input__decrement",
-                  "attrs": { "type": "button", "aria-label": "Decrease", "disabled": "" },
-                  "children": [
-                    {
-                      "tag": "svg",
-                      "attrs": { "viewBox": "0 0 24 24" },
-                      "children": [{ "tag": "path", "attrs": { "d": "M5 12h14" } }]
-                    }
-                  ]
-                },
-                {
-                  "tag": "input",
-                  "class": "ui-number-input__field",
-                  "attrs": { "type": "number", "value": "0", "disabled": "" }
-                },
-                {
-                  "tag": "button",
-                  "class": "ui-number-input__increment",
-                  "attrs": { "type": "button", "aria-label": "Increase", "disabled": "" },
-                  "children": [
-                    {
-                      "tag": "svg",
-                      "attrs": { "viewBox": "0 0 24 24" },
-                      "children": [
-                        { "tag": "path", "attrs": { "d": "M12 5v14" } },
-                        { "tag": "path", "attrs": { "d": "M5 12h14" } }
-                      ]
-                    }
-                  ]
-                }
-              ]
-            }
-          ],
-          "code": "<div class=\"ui-number-input ui-number-input--disabled\">\n  <button disabled>...</button>\n  <input type=\"number\" disabled>\n  <button disabled>...</button>\n</div>"
-        }
-      ]
-    }
-  ],
-  "customization": [
-    {
-      "token": "--ui-number-input-height",
-      "default": "var(--ui-row-2)",
-      "description": "Default height"
-    },
-    {
-      "token": "--ui-number-input-height-sm",
-      "default": "calc(var(--ui-row) * 1.5)",
-      "description": "Small height"
-    },
-    {
-      "token": "--ui-number-input-height-lg",
-      "default": "calc(var(--ui-row) * 2.5)",
-      "description": "Large height"
-    },
-    {
-      "token": "--ui-number-input-button-bg",
-      "default": "var(--ui-color-bg-muted)",
-      "description": "Stepper button background"
-    },
-    {
-      "token": "--ui-number-input-button-hover-bg",
-      "default": "var(--ui-color-border)",
-      "description": "Stepper button hover background"
-    },
-    {
-      "token": "--ui-number-input-border-color-focus",
-      "default": "var(--ui-color-primary)",
-      "description": "Focus border color"
-    }
-  ]
-}

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

@@ -1,316 +0,0 @@
-{
-  "id": "password-input",
-  "type": "component",
-  "title": "Password Input",
-  "description": "Secure password field with toggle visibility button.",
-  "api": "./password-input.api.json",
-  "sections": [
-    {
-      "title": "Default",
-      "examples": [
-        {
-          "items": [
-            {
-              "tag": "div",
-              "class": "ui-password-input",
-              "children": [
-                {
-                  "tag": "input",
-                  "class": "ui-password-input__field",
-                  "attrs": { "type": "password", "placeholder": "Enter password" }
-                },
-                {
-                  "tag": "button",
-                  "class": "ui-password-input__toggle",
-                  "attrs": { "type": "button", "aria-label": "Show password" },
-                  "children": [
-                    {
-                      "tag": "svg",
-                      "attrs": { "viewBox": "0 0 24 24" },
-                      "children": [
-                        {
-                          "tag": "path",
-                          "attrs": { "d": "M1 12s4-8 11-8 11 8 11 8-4 8-11 8-11-8-11-8z" }
-                        },
-                        { "tag": "circle", "attrs": { "cx": "12", "cy": "12", "r": "3" } }
-                      ]
-                    }
-                  ]
-                }
-              ]
-            }
-          ],
-          "code": "<div class=\"ui-password-input\">\n  <input class=\"ui-password-input__field\" type=\"password\" placeholder=\"Enter password\">\n  <button class=\"ui-password-input__toggle\" aria-label=\"Show password\"><svg>...</svg></button>\n</div>"
-        }
-      ]
-    },
-    {
-      "title": "Sizes",
-      "examples": [
-        {
-          "layout": "column",
-          "items": [
-            {
-              "tag": "div",
-              "class": "ui-password-input ui-password-input--sm",
-              "children": [
-                {
-                  "tag": "input",
-                  "class": "ui-password-input__field",
-                  "attrs": { "type": "password", "placeholder": "Small" }
-                },
-                {
-                  "tag": "button",
-                  "class": "ui-password-input__toggle",
-                  "attrs": { "type": "button", "aria-label": "Show password" },
-                  "children": [
-                    {
-                      "tag": "svg",
-                      "attrs": { "viewBox": "0 0 24 24" },
-                      "children": [
-                        {
-                          "tag": "path",
-                          "attrs": { "d": "M1 12s4-8 11-8 11 8 11 8-4 8-11 8-11-8-11-8z" }
-                        },
-                        { "tag": "circle", "attrs": { "cx": "12", "cy": "12", "r": "3" } }
-                      ]
-                    }
-                  ]
-                }
-              ]
-            },
-            {
-              "tag": "div",
-              "class": "ui-password-input",
-              "children": [
-                {
-                  "tag": "input",
-                  "class": "ui-password-input__field",
-                  "attrs": { "type": "password", "placeholder": "Default" }
-                },
-                {
-                  "tag": "button",
-                  "class": "ui-password-input__toggle",
-                  "attrs": { "type": "button", "aria-label": "Show password" },
-                  "children": [
-                    {
-                      "tag": "svg",
-                      "attrs": { "viewBox": "0 0 24 24" },
-                      "children": [
-                        {
-                          "tag": "path",
-                          "attrs": { "d": "M1 12s4-8 11-8 11 8 11 8-4 8-11 8-11-8-11-8z" }
-                        },
-                        { "tag": "circle", "attrs": { "cx": "12", "cy": "12", "r": "3" } }
-                      ]
-                    }
-                  ]
-                }
-              ]
-            },
-            {
-              "tag": "div",
-              "class": "ui-password-input ui-password-input--lg",
-              "children": [
-                {
-                  "tag": "input",
-                  "class": "ui-password-input__field",
-                  "attrs": { "type": "password", "placeholder": "Large" }
-                },
-                {
-                  "tag": "button",
-                  "class": "ui-password-input__toggle",
-                  "attrs": { "type": "button", "aria-label": "Show password" },
-                  "children": [
-                    {
-                      "tag": "svg",
-                      "attrs": { "viewBox": "0 0 24 24" },
-                      "children": [
-                        {
-                          "tag": "path",
-                          "attrs": { "d": "M1 12s4-8 11-8 11 8 11 8-4 8-11 8-11-8-11-8z" }
-                        },
-                        { "tag": "circle", "attrs": { "cx": "12", "cy": "12", "r": "3" } }
-                      ]
-                    }
-                  ]
-                }
-              ]
-            }
-          ],
-          "code": "<div class=\"ui-password-input ui-password-input--sm\">...</div>\n<div class=\"ui-password-input\">...</div>\n<div class=\"ui-password-input ui-password-input--lg\">...</div>"
-        }
-      ]
-    },
-    {
-      "title": "Block",
-      "description": "Full-width layout.",
-      "examples": [
-        {
-          "items": [
-            {
-              "tag": "div",
-              "class": "ui-password-input ui-password-input--block",
-              "children": [
-                {
-                  "tag": "input",
-                  "class": "ui-password-input__field",
-                  "attrs": { "type": "password", "placeholder": "Full width" }
-                },
-                {
-                  "tag": "button",
-                  "class": "ui-password-input__toggle",
-                  "attrs": { "type": "button", "aria-label": "Show password" },
-                  "children": [
-                    {
-                      "tag": "svg",
-                      "attrs": { "viewBox": "0 0 24 24" },
-                      "children": [
-                        {
-                          "tag": "path",
-                          "attrs": { "d": "M1 12s4-8 11-8 11 8 11 8-4 8-11 8-11-8-11-8z" }
-                        },
-                        { "tag": "circle", "attrs": { "cx": "12", "cy": "12", "r": "3" } }
-                      ]
-                    }
-                  ]
-                }
-              ]
-            }
-          ],
-          "code": "<div class=\"ui-password-input ui-password-input--block\">...</div>"
-        }
-      ]
-    },
-    {
-      "title": "States",
-      "examples": [
-        {
-          "layout": "column",
-          "items": [
-            {
-              "tag": "div",
-              "class": "ui-password-input ui-password-input--error",
-              "children": [
-                {
-                  "tag": "input",
-                  "class": "ui-password-input__field",
-                  "attrs": { "type": "password", "value": "wrongpass" }
-                },
-                {
-                  "tag": "button",
-                  "class": "ui-password-input__toggle",
-                  "attrs": { "type": "button", "aria-label": "Show password" },
-                  "children": [
-                    {
-                      "tag": "svg",
-                      "attrs": { "viewBox": "0 0 24 24" },
-                      "children": [
-                        {
-                          "tag": "path",
-                          "attrs": { "d": "M1 12s4-8 11-8 11 8 11 8-4 8-11 8-11-8-11-8z" }
-                        },
-                        { "tag": "circle", "attrs": { "cx": "12", "cy": "12", "r": "3" } }
-                      ]
-                    }
-                  ]
-                }
-              ]
-            },
-            {
-              "tag": "div",
-              "class": "ui-password-input ui-password-input--success",
-              "children": [
-                {
-                  "tag": "input",
-                  "class": "ui-password-input__field",
-                  "attrs": { "type": "password", "value": "correctpass" }
-                },
-                {
-                  "tag": "button",
-                  "class": "ui-password-input__toggle",
-                  "attrs": { "type": "button", "aria-label": "Show password" },
-                  "children": [
-                    {
-                      "tag": "svg",
-                      "attrs": { "viewBox": "0 0 24 24" },
-                      "children": [
-                        {
-                          "tag": "path",
-                          "attrs": { "d": "M1 12s4-8 11-8 11 8 11 8-4 8-11 8-11-8-11-8z" }
-                        },
-                        { "tag": "circle", "attrs": { "cx": "12", "cy": "12", "r": "3" } }
-                      ]
-                    }
-                  ]
-                }
-              ]
-            },
-            {
-              "tag": "div",
-              "class": "ui-password-input ui-password-input--disabled",
-              "children": [
-                {
-                  "tag": "input",
-                  "class": "ui-password-input__field",
-                  "attrs": { "type": "password", "placeholder": "Disabled", "disabled": "" }
-                },
-                {
-                  "tag": "button",
-                  "class": "ui-password-input__toggle",
-                  "attrs": { "type": "button", "aria-label": "Show password", "disabled": "" },
-                  "children": [
-                    {
-                      "tag": "svg",
-                      "attrs": { "viewBox": "0 0 24 24" },
-                      "children": [
-                        {
-                          "tag": "path",
-                          "attrs": { "d": "M1 12s4-8 11-8 11 8 11 8-4 8-11 8-11-8-11-8z" }
-                        },
-                        { "tag": "circle", "attrs": { "cx": "12", "cy": "12", "r": "3" } }
-                      ]
-                    }
-                  ]
-                }
-              ]
-            }
-          ],
-          "code": "<div class=\"ui-password-input ui-password-input--error\">...</div>\n<div class=\"ui-password-input ui-password-input--success\">...</div>\n<div class=\"ui-password-input ui-password-input--disabled\">...</div>"
-        }
-      ]
-    }
-  ],
-  "customization": [
-    {
-      "token": "--ui-password-input-height",
-      "default": "var(--ui-row-2)",
-      "description": "Default height"
-    },
-    {
-      "token": "--ui-password-input-height-sm",
-      "default": "calc(var(--ui-row) * 1.5)",
-      "description": "Small height"
-    },
-    {
-      "token": "--ui-password-input-height-lg",
-      "default": "calc(var(--ui-row) * 2.5)",
-      "description": "Large height"
-    },
-    {
-      "token": "--ui-password-input-bg",
-      "default": "var(--ui-color-bg)",
-      "description": "Background color"
-    },
-    {
-      "token": "--ui-password-input-border-color",
-      "default": "var(--ui-color-border-strong)",
-      "description": "Border color"
-    },
-    {
-      "token": "--ui-password-input-toggle-color",
-      "default": "var(--ui-color-text-muted)",
-      "description": "Toggle button color"
-    }
-  ]
-}