@teseor/css 1.14.3 → 1.15.0

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

@@ -1,229 +0,0 @@
-{
-  "id": "textarea",
-  "type": "component",
-  "title": "Textarea",
-  "description": "Multi-line text input for longer content like comments or descriptions.",
-  "api": "./textarea.api.json",
-  "sections": [
-    {
-      "title": "Default",
-      "examples": [
-        {
-          "items": [
-            {
-              "tag": "textarea",
-              "class": "ui-textarea",
-              "attrs": { "placeholder": "Enter your message..." }
-            }
-          ]
-        }
-      ]
-    },
-    {
-      "title": "Sizes",
-      "examples": [
-        {
-          "layout": "column",
-          "items": [
-            {
-              "tag": "textarea",
-              "class": "ui-textarea ui-textarea--sm",
-              "attrs": { "placeholder": "Small (3 rows)" }
-            },
-            {
-              "tag": "textarea",
-              "class": "ui-textarea",
-              "attrs": { "placeholder": "Default (4 rows)" }
-            },
-            {
-              "tag": "textarea",
-              "class": "ui-textarea ui-textarea--lg",
-              "attrs": { "placeholder": "Large (6 rows)" }
-            }
-          ],
-          "code": "<textarea class=\"ui-textarea ui-textarea--sm\"></textarea>\n<textarea class=\"ui-textarea\"></textarea>\n<textarea class=\"ui-textarea ui-textarea--lg\"></textarea>"
-        }
-      ]
-    },
-    {
-      "title": "Variants",
-      "examples": [
-        {
-          "layout": "column",
-          "items": [
-            {
-              "tag": "textarea",
-              "class": "ui-textarea",
-              "attrs": { "placeholder": "Outline (default)" }
-            },
-            {
-              "tag": "textarea",
-              "class": "ui-textarea ui-textarea--filled",
-              "attrs": { "placeholder": "Filled" }
-            },
-            {
-              "tag": "textarea",
-              "class": "ui-textarea ui-textarea--ghost",
-              "attrs": { "placeholder": "Ghost" }
-            }
-          ],
-          "code": "<textarea class=\"ui-textarea\"></textarea>\n<textarea class=\"ui-textarea ui-textarea--filled\"></textarea>\n<textarea class=\"ui-textarea ui-textarea--ghost\"></textarea>"
-        }
-      ]
-    },
-    {
-      "title": "States",
-      "examples": [
-        {
-          "layout": "column",
-          "items": [
-            {
-              "tag": "textarea",
-              "class": "ui-textarea ui-textarea--error",
-              "text": "Invalid content"
-            },
-            {
-              "tag": "textarea",
-              "class": "ui-textarea ui-textarea--success",
-              "text": "Valid content"
-            },
-            {
-              "tag": "textarea",
-              "class": "ui-textarea",
-              "attrs": { "disabled": "", "placeholder": "Disabled" }
-            },
-            {
-              "tag": "textarea",
-              "class": "ui-textarea",
-              "attrs": { "readonly": "" },
-              "text": "Read only content"
-            }
-          ],
-          "code": "<textarea class=\"ui-textarea ui-textarea--error\">Invalid</textarea>\n<textarea class=\"ui-textarea ui-textarea--success\">Valid</textarea>\n<textarea class=\"ui-textarea\" disabled></textarea>\n<textarea class=\"ui-textarea\" readonly>Read only</textarea>"
-        }
-      ]
-    },
-    {
-      "title": "Resize Options",
-      "description": "Control how users can resize the textarea.",
-      "api": "./textarea.api.json",
-      "examples": [
-        {
-          "layout": "column",
-          "items": [
-            {
-              "tag": "textarea",
-              "class": "ui-textarea",
-              "attrs": { "placeholder": "Vertical resize (default)" }
-            },
-            {
-              "tag": "textarea",
-              "class": "ui-textarea ui-textarea--resize-none",
-              "attrs": { "placeholder": "No resize" }
-            },
-            {
-              "tag": "textarea",
-              "class": "ui-textarea ui-textarea--resize-horizontal",
-              "attrs": { "placeholder": "Horizontal resize only" }
-            },
-            {
-              "tag": "textarea",
-              "class": "ui-textarea ui-textarea--resize-both",
-              "attrs": { "placeholder": "Resize both directions" }
-            }
-          ],
-          "code": "<textarea class=\"ui-textarea\">Vertical (default)</textarea>\n<textarea class=\"ui-textarea ui-textarea--resize-none\">No resize</textarea>\n<textarea class=\"ui-textarea ui-textarea--resize-horizontal\">Horizontal only</textarea>\n<textarea class=\"ui-textarea ui-textarea--resize-both\">Both directions</textarea>"
-        }
-      ]
-    },
-    {
-      "title": "Auto Size",
-      "description": "Automatically grows to fit content using field-sizing: content. Falls back to fixed min-height in unsupported browsers.",
-      "examples": [
-        {
-          "layout": "column",
-          "items": [
-            {
-              "tag": "textarea",
-              "class": "ui-textarea ui-textarea--auto-size",
-              "attrs": { "placeholder": "Type to grow..." }
-            },
-            {
-              "tag": "textarea",
-              "class": "ui-textarea ui-textarea--auto-size ui-textarea--sm",
-              "attrs": { "placeholder": "Small auto-size" }
-            },
-            {
-              "tag": "textarea",
-              "class": "ui-textarea ui-textarea--auto-size ui-textarea--lg",
-              "attrs": { "placeholder": "Large auto-size" }
-            }
-          ],
-          "code": "<textarea class=\"ui-textarea ui-textarea--auto-size\" placeholder=\"Type to grow...\"></textarea>\n<textarea class=\"ui-textarea ui-textarea--auto-size ui-textarea--sm\"></textarea>\n<textarea class=\"ui-textarea ui-textarea--auto-size ui-textarea--lg\"></textarea>"
-        }
-      ]
-    }
-  ],
-  "customization": [
-    {
-      "token": "--ui-textarea-min-height",
-      "default": "calc(var(--ui-row) * 4)",
-      "description": "Default minimum height"
-    },
-    {
-      "token": "--ui-textarea-min-height-sm",
-      "default": "calc(var(--ui-row) * 3)",
-      "description": "Small minimum height"
-    },
-    {
-      "token": "--ui-textarea-min-height-lg",
-      "default": "calc(var(--ui-row) * 6)",
-      "description": "Large minimum height"
-    },
-    {
-      "token": "--ui-textarea-padding-x",
-      "default": "var(--ui-space-1)",
-      "description": "Horizontal padding"
-    },
-    {
-      "token": "--ui-textarea-padding-y",
-      "default": "var(--ui-space-1)",
-      "description": "Vertical padding"
-    },
-    {
-      "token": "--ui-textarea-font-size",
-      "default": "var(--ui-font-size-sm)",
-      "description": "Font size"
-    },
-    {
-      "token": "--ui-textarea-radius",
-      "default": "var(--ui-radius-md)",
-      "description": "Border radius"
-    },
-    {
-      "token": "--ui-textarea-bg",
-      "default": "var(--ui-color-bg)",
-      "description": "Background color"
-    },
-    {
-      "token": "--ui-textarea-border-color",
-      "default": "var(--ui-color-border-strong)",
-      "description": "Border color"
-    },
-    {
-      "token": "--ui-textarea-border-color-focus",
-      "default": "var(--ui-color-primary)",
-      "description": "Focus border color"
-    },
-    {
-      "token": "--ui-textarea-color",
-      "default": "var(--ui-color-text)",
-      "description": "Text color"
-    },
-    {
-      "token": "--ui-textarea-placeholder",
-      "default": "var(--ui-color-text-muted)",
-      "description": "Placeholder color"
-    }
-  ]
-}

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

@@ -1,229 +0,0 @@
-{
-  "id": "toggle",
-  "type": "component",
-  "title": "Toggle",
-  "description": "Switch control for boolean states. Uses checkbox semantics with role=switch for accessibility.",
-  "api": "./toggle.api.json",
-  "sections": [
-    {
-      "title": "Default",
-      "examples": [
-        {
-          "items": [
-            {
-              "tag": "label",
-              "class": "ui-toggle",
-              "children": [
-                {
-                  "tag": "input",
-                  "class": "ui-toggle__input",
-                  "attrs": { "type": "checkbox", "role": "switch" }
-                },
-                { "tag": "span", "class": "ui-toggle__track" },
-                { "tag": "span", "class": "ui-toggle__thumb" }
-              ]
-            }
-          ],
-          "code": "<label class=\"ui-toggle\">\n  <input type=\"checkbox\" class=\"ui-toggle__input\" role=\"switch\">\n  <span class=\"ui-toggle__track\"></span>\n  <span class=\"ui-toggle__thumb\"></span>\n</label>"
-        }
-      ]
-    },
-    {
-      "title": "Checked",
-      "examples": [
-        {
-          "items": [
-            {
-              "tag": "label",
-              "class": "ui-toggle",
-              "children": [
-                {
-                  "tag": "input",
-                  "class": "ui-toggle__input",
-                  "attrs": { "type": "checkbox", "role": "switch", "checked": "" }
-                },
-                { "tag": "span", "class": "ui-toggle__track" },
-                { "tag": "span", "class": "ui-toggle__thumb" }
-              ]
-            }
-          ],
-          "code": "<label class=\"ui-toggle\">\n  <input type=\"checkbox\" class=\"ui-toggle__input\" role=\"switch\" checked>\n  ...\n</label>"
-        }
-      ]
-    },
-    {
-      "title": "Sizes",
-      "examples": [
-        {
-          "items": [
-            {
-              "tag": "div",
-              "attrs": { "style": "display: flex; gap: var(--ui-space-2); align-items: center;" },
-              "children": [
-                {
-                  "tag": "label",
-                  "class": "ui-toggle ui-toggle--sm",
-                  "children": [
-                    {
-                      "tag": "input",
-                      "class": "ui-toggle__input",
-                      "attrs": { "type": "checkbox", "role": "switch" }
-                    },
-                    { "tag": "span", "class": "ui-toggle__track" },
-                    { "tag": "span", "class": "ui-toggle__thumb" }
-                  ]
-                },
-                {
-                  "tag": "label",
-                  "class": "ui-toggle",
-                  "children": [
-                    {
-                      "tag": "input",
-                      "class": "ui-toggle__input",
-                      "attrs": { "type": "checkbox", "role": "switch", "checked": "" }
-                    },
-                    { "tag": "span", "class": "ui-toggle__track" },
-                    { "tag": "span", "class": "ui-toggle__thumb" }
-                  ]
-                },
-                {
-                  "tag": "label",
-                  "class": "ui-toggle ui-toggle--lg",
-                  "children": [
-                    {
-                      "tag": "input",
-                      "class": "ui-toggle__input",
-                      "attrs": { "type": "checkbox", "role": "switch" }
-                    },
-                    { "tag": "span", "class": "ui-toggle__track" },
-                    { "tag": "span", "class": "ui-toggle__thumb" }
-                  ]
-                }
-              ]
-            }
-          ],
-          "code": "<label class=\"ui-toggle ui-toggle--sm\">...</label>\n<label class=\"ui-toggle\">...</label>\n<label class=\"ui-toggle ui-toggle--lg\">...</label>"
-        }
-      ]
-    },
-    {
-      "title": "Disabled",
-      "examples": [
-        {
-          "items": [
-            {
-              "tag": "div",
-              "attrs": { "style": "display: flex; gap: var(--ui-space-2);" },
-              "children": [
-                {
-                  "tag": "label",
-                  "class": "ui-toggle",
-                  "children": [
-                    {
-                      "tag": "input",
-                      "class": "ui-toggle__input",
-                      "attrs": { "type": "checkbox", "role": "switch", "disabled": "" }
-                    },
-                    { "tag": "span", "class": "ui-toggle__track" },
-                    { "tag": "span", "class": "ui-toggle__thumb" }
-                  ]
-                },
-                {
-                  "tag": "label",
-                  "class": "ui-toggle",
-                  "children": [
-                    {
-                      "tag": "input",
-                      "class": "ui-toggle__input",
-                      "attrs": {
-                        "type": "checkbox",
-                        "role": "switch",
-                        "checked": "",
-                        "disabled": ""
-                      }
-                    },
-                    { "tag": "span", "class": "ui-toggle__track" },
-                    { "tag": "span", "class": "ui-toggle__thumb" }
-                  ]
-                }
-              ]
-            }
-          ],
-          "code": "<label class=\"ui-toggle\">\n  <input type=\"checkbox\" ... disabled>\n  ...\n</label>"
-        }
-      ]
-    },
-    {
-      "title": "With Label",
-      "examples": [
-        {
-          "items": [
-            {
-              "tag": "div",
-              "attrs": { "style": "display: flex; align-items: center; gap: var(--ui-space-2);" },
-              "children": [
-                {
-                  "tag": "label",
-                  "class": "ui-toggle",
-                  "children": [
-                    {
-                      "tag": "input",
-                      "class": "ui-toggle__input",
-                      "attrs": { "type": "checkbox", "role": "switch", "id": "notifications" }
-                    },
-                    { "tag": "span", "class": "ui-toggle__track" },
-                    { "tag": "span", "class": "ui-toggle__thumb" }
-                  ]
-                },
-                {
-                  "tag": "label",
-                  "attrs": { "for": "notifications" },
-                  "text": "Enable notifications"
-                }
-              ]
-            }
-          ],
-          "code": "<div style=\"display: flex; align-items: center; gap: var(--ui-space-2);\">\n  <label class=\"ui-toggle\">\n    <input type=\"checkbox\" ... id=\"notifications\">\n    ...\n  </label>\n  <label for=\"notifications\">Enable notifications</label>\n</div>"
-        }
-      ]
-    }
-  ],
-  "customization": [
-    {
-      "token": "--ui-toggle-track-width",
-      "default": "calc(var(--ui-unit) * 5)",
-      "description": "Track width"
-    },
-    {
-      "token": "--ui-toggle-track-height",
-      "default": "calc(var(--ui-unit) * 3)",
-      "description": "Track height"
-    },
-    {
-      "token": "--ui-toggle-track-bg",
-      "default": "var(--ui-color-bg-subtle)",
-      "description": "Track background (unchecked)"
-    },
-    {
-      "token": "--ui-toggle-track-bg-checked",
-      "default": "var(--ui-color-primary)",
-      "description": "Track background (checked)"
-    },
-    {
-      "token": "--ui-toggle-track-radius",
-      "default": "calc(var(--ui-unit) * 1.5)",
-      "description": "Track border radius"
-    },
-    {
-      "token": "--ui-toggle-thumb-size",
-      "default": "calc(var(--ui-unit) * 2.5)",
-      "description": "Thumb size"
-    },
-    { "token": "--ui-toggle-thumb-bg", "default": "white", "description": "Thumb background" },
-    {
-      "token": "--ui-toggle-thumb-offset",
-      "default": "calc(var(--ui-unit) / 4)",
-      "description": "Thumb offset from edge"
-    }
-  ]
-}