@teseor/css 1.14.2 → 1.15.0

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

@@ -1,236 +0,0 @@
-{
-  "id": "radio",
-  "type": "component",
-  "title": "Radio",
-  "description": "Native radio button with custom styling. Use for mutually exclusive options within a group.",
-  "api": "./radio.api.json",
-  "sections": [
-    {
-      "title": "Default",
-      "examples": [
-        {
-          "layout": "row",
-          "items": [
-            { "tag": "input", "class": "ui-radio", "attrs": { "type": "radio", "name": "demo1" } },
-            {
-              "tag": "input",
-              "class": "ui-radio",
-              "attrs": { "type": "radio", "name": "demo1", "checked": "" }
-            }
-          ],
-          "code": "<input type=\"radio\" class=\"ui-radio\" name=\"group1\">\n<input type=\"radio\" class=\"ui-radio\" name=\"group1\" checked>"
-        }
-      ]
-    },
-    {
-      "title": "Sizes",
-      "examples": [
-        {
-          "layout": "row",
-          "items": [
-            {
-              "tag": "input",
-              "class": "ui-radio",
-              "attrs": { "type": "radio", "name": "sizes", "checked": "" }
-            },
-            {
-              "tag": "input",
-              "class": "ui-radio ui-radio--lg",
-              "attrs": { "type": "radio", "name": "sizes2", "checked": "" }
-            }
-          ],
-          "code": "<input type=\"radio\" class=\"ui-radio\" checked>\n<input type=\"radio\" class=\"ui-radio ui-radio--lg\" checked>"
-        }
-      ]
-    },
-    {
-      "title": "States",
-      "examples": [
-        {
-          "layout": "row",
-          "items": [
-            {
-              "tag": "input",
-              "class": "ui-radio",
-              "attrs": { "type": "radio", "name": "states1" }
-            },
-            {
-              "tag": "input",
-              "class": "ui-radio",
-              "attrs": { "type": "radio", "name": "states2", "checked": "" }
-            },
-            {
-              "tag": "input",
-              "class": "ui-radio",
-              "attrs": { "type": "radio", "name": "states3", "disabled": "" }
-            },
-            {
-              "tag": "input",
-              "class": "ui-radio",
-              "attrs": { "type": "radio", "name": "states4", "checked": "", "disabled": "" }
-            }
-          ],
-          "code": "<input type=\"radio\" class=\"ui-radio\">\n<input type=\"radio\" class=\"ui-radio\" checked>\n<input type=\"radio\" class=\"ui-radio\" disabled>\n<input type=\"radio\" class=\"ui-radio\" checked disabled>"
-        }
-      ]
-    },
-    {
-      "title": "Validation States",
-      "examples": [
-        {
-          "layout": "row",
-          "items": [
-            {
-              "tag": "input",
-              "class": "ui-radio ui-radio--error",
-              "attrs": { "type": "radio", "name": "error1" }
-            },
-            {
-              "tag": "input",
-              "class": "ui-radio ui-radio--error",
-              "attrs": { "type": "radio", "name": "error2", "checked": "" }
-            },
-            {
-              "tag": "input",
-              "class": "ui-radio ui-radio--success",
-              "attrs": { "type": "radio", "name": "success1" }
-            },
-            {
-              "tag": "input",
-              "class": "ui-radio ui-radio--success",
-              "attrs": { "type": "radio", "name": "success2", "checked": "" }
-            }
-          ],
-          "code": "<input type=\"radio\" class=\"ui-radio ui-radio--error\">\n<input type=\"radio\" class=\"ui-radio ui-radio--error\" checked>\n<input type=\"radio\" class=\"ui-radio ui-radio--success\">\n<input type=\"radio\" class=\"ui-radio ui-radio--success\" checked>"
-        }
-      ]
-    },
-    {
-      "title": "With Label",
-      "examples": [
-        {
-          "items": [
-            {
-              "tag": "label",
-              "class": "ui-row",
-              "attrs": { "style": "gap: var(--ui-space-1); cursor: pointer;" },
-              "children": [
-                {
-                  "tag": "input",
-                  "class": "ui-radio",
-                  "attrs": { "type": "radio", "name": "labeled" }
-                },
-                { "tag": "span", "text": "Option one" }
-              ]
-            }
-          ],
-          "code": "<label class=\"ui-row\">\n  <input type=\"radio\" class=\"ui-radio\" name=\"group\">\n  <span>Option one</span>\n</label>"
-        }
-      ]
-    },
-    {
-      "title": "Radio Group",
-      "examples": [
-        {
-          "items": [
-            {
-              "tag": "fieldset",
-              "attrs": { "style": "border: none; padding: 0; margin: 0;" },
-              "children": [
-                {
-                  "tag": "legend",
-                  "attrs": { "style": "font-weight: 600; margin-block-end: var(--ui-space-1);" },
-                  "text": "Choose an option"
-                },
-                {
-                  "tag": "div",
-                  "class": "ui-column",
-                  "attrs": { "style": "--column-gap: var(--ui-space-1);" },
-                  "children": [
-                    {
-                      "tag": "label",
-                      "class": "ui-row",
-                      "attrs": { "style": "gap: var(--ui-space-1); cursor: pointer;" },
-                      "children": [
-                        {
-                          "tag": "input",
-                          "class": "ui-radio",
-                          "attrs": { "type": "radio", "name": "group-demo", "checked": "" }
-                        },
-                        { "tag": "span", "text": "Option A" }
-                      ]
-                    },
-                    {
-                      "tag": "label",
-                      "class": "ui-row",
-                      "attrs": { "style": "gap: var(--ui-space-1); cursor: pointer;" },
-                      "children": [
-                        {
-                          "tag": "input",
-                          "class": "ui-radio",
-                          "attrs": { "type": "radio", "name": "group-demo" }
-                        },
-                        { "tag": "span", "text": "Option B" }
-                      ]
-                    },
-                    {
-                      "tag": "label",
-                      "class": "ui-row",
-                      "attrs": { "style": "gap: var(--ui-space-1); cursor: pointer;" },
-                      "children": [
-                        {
-                          "tag": "input",
-                          "class": "ui-radio",
-                          "attrs": { "type": "radio", "name": "group-demo" }
-                        },
-                        { "tag": "span", "text": "Option C" }
-                      ]
-                    }
-                  ]
-                }
-              ]
-            }
-          ],
-          "code": "<fieldset>\n  <legend>Choose an option</legend>\n  <div class=\"ui-column\">\n    <label class=\"ui-row\">\n      <input type=\"radio\" class=\"ui-radio\" name=\"group\" checked>\n      <span>Option A</span>\n    </label>\n    <label class=\"ui-row\">\n      <input type=\"radio\" class=\"ui-radio\" name=\"group\">\n      <span>Option B</span>\n    </label>\n  </div>\n</fieldset>"
-        }
-      ]
-    }
-  ],
-  "customization": [
-    {
-      "token": "--ui-radio-size",
-      "default": "calc(var(--ui-unit) * 2)",
-      "description": "Default size"
-    },
-    {
-      "token": "--ui-radio-size-lg",
-      "default": "calc(var(--ui-unit) * 3)",
-      "description": "Large size"
-    },
-    {
-      "token": "--ui-radio-bg",
-      "default": "var(--ui-color-bg)",
-      "description": "Background (unchecked)"
-    },
-    {
-      "token": "--ui-radio-bg-checked",
-      "default": "var(--ui-color-primary)",
-      "description": "Background (checked)"
-    },
-    {
-      "token": "--ui-radio-border-color",
-      "default": "var(--ui-color-border-strong)",
-      "description": "Border color"
-    },
-    {
-      "token": "--ui-radio-border-color-focus",
-      "default": "var(--ui-color-primary)",
-      "description": "Focus border color"
-    },
-    {
-      "token": "--ui-radio-dot-color",
-      "default": "var(--ui-color-text-inverse)",
-      "description": "Inner dot color"
-    }
-  ]
-}

package/src/components/forms/radio-group/radio-group.docs.json

@@ -1,351 +0,0 @@
-{
-  "id": "radio-group",
-  "type": "component",
-  "mergeInto": "radio",
-  "title": "Radio Group",
-  "description": "Groups related radio buttons with a legend for single selection. Built on native fieldset semantics.",
-  "api": "./radio-group.api.json",
-  "sections": [
-    {
-      "title": "Default",
-      "examples": [
-        {
-          "items": [
-            {
-              "tag": "fieldset",
-              "class": "ui-radio-group",
-              "children": [
-                {
-                  "tag": "legend",
-                  "class": "ui-radio-group__legend",
-                  "text": "Payment method"
-                },
-                {
-                  "tag": "div",
-                  "class": "ui-radio-group__items",
-                  "children": [
-                    {
-                      "tag": "label",
-                      "class": "ui-radio-group__item",
-                      "children": [
-                        {
-                          "tag": "input",
-                          "class": "ui-radio",
-                          "attrs": { "type": "radio", "name": "payment", "checked": "" }
-                        },
-                        { "tag": "span", "text": "Credit card" }
-                      ]
-                    },
-                    {
-                      "tag": "label",
-                      "class": "ui-radio-group__item",
-                      "children": [
-                        {
-                          "tag": "input",
-                          "class": "ui-radio",
-                          "attrs": { "type": "radio", "name": "payment" }
-                        },
-                        { "tag": "span", "text": "Debit card" }
-                      ]
-                    },
-                    {
-                      "tag": "label",
-                      "class": "ui-radio-group__item",
-                      "children": [
-                        {
-                          "tag": "input",
-                          "class": "ui-radio",
-                          "attrs": { "type": "radio", "name": "payment" }
-                        },
-                        { "tag": "span", "text": "Bank transfer" }
-                      ]
-                    }
-                  ]
-                }
-              ]
-            }
-          ],
-          "code": "<fieldset class=\"ui-radio-group\">\n  <legend class=\"ui-radio-group__legend\">Payment method</legend>\n  <div class=\"ui-radio-group__items\">\n    <label class=\"ui-radio-group__item\">\n      <input type=\"radio\" class=\"ui-radio\" name=\"payment\" checked>\n      <span>Credit card</span>\n    </label>\n    ...\n  </div>\n</fieldset>"
-        }
-      ]
-    },
-    {
-      "title": "Horizontal",
-      "examples": [
-        {
-          "items": [
-            {
-              "tag": "fieldset",
-              "class": "ui-radio-group ui-radio-group--horizontal",
-              "children": [
-                {
-                  "tag": "legend",
-                  "class": "ui-radio-group__legend",
-                  "text": "Size"
-                },
-                {
-                  "tag": "div",
-                  "class": "ui-radio-group__items",
-                  "children": [
-                    {
-                      "tag": "label",
-                      "class": "ui-radio-group__item",
-                      "children": [
-                        {
-                          "tag": "input",
-                          "class": "ui-radio",
-                          "attrs": { "type": "radio", "name": "size", "checked": "" }
-                        },
-                        { "tag": "span", "text": "Small" }
-                      ]
-                    },
-                    {
-                      "tag": "label",
-                      "class": "ui-radio-group__item",
-                      "children": [
-                        {
-                          "tag": "input",
-                          "class": "ui-radio",
-                          "attrs": { "type": "radio", "name": "size" }
-                        },
-                        { "tag": "span", "text": "Medium" }
-                      ]
-                    },
-                    {
-                      "tag": "label",
-                      "class": "ui-radio-group__item",
-                      "children": [
-                        {
-                          "tag": "input",
-                          "class": "ui-radio",
-                          "attrs": { "type": "radio", "name": "size" }
-                        },
-                        { "tag": "span", "text": "Large" }
-                      ]
-                    }
-                  ]
-                }
-              ]
-            }
-          ],
-          "code": "<fieldset class=\"ui-radio-group ui-radio-group--horizontal\">\n  <legend class=\"ui-radio-group__legend\">Size</legend>\n  ...\n</fieldset>"
-        }
-      ]
-    },
-    {
-      "title": "Compact",
-      "examples": [
-        {
-          "items": [
-            {
-              "tag": "fieldset",
-              "class": "ui-radio-group ui-radio-group--compact",
-              "children": [
-                {
-                  "tag": "legend",
-                  "class": "ui-radio-group__legend",
-                  "text": "Priority"
-                },
-                {
-                  "tag": "div",
-                  "class": "ui-radio-group__items",
-                  "children": [
-                    {
-                      "tag": "label",
-                      "class": "ui-radio-group__item",
-                      "children": [
-                        {
-                          "tag": "input",
-                          "class": "ui-radio",
-                          "attrs": { "type": "radio", "name": "priority", "checked": "" }
-                        },
-                        { "tag": "span", "text": "Low" }
-                      ]
-                    },
-                    {
-                      "tag": "label",
-                      "class": "ui-radio-group__item",
-                      "children": [
-                        {
-                          "tag": "input",
-                          "class": "ui-radio",
-                          "attrs": { "type": "radio", "name": "priority" }
-                        },
-                        { "tag": "span", "text": "Medium" }
-                      ]
-                    },
-                    {
-                      "tag": "label",
-                      "class": "ui-radio-group__item",
-                      "children": [
-                        {
-                          "tag": "input",
-                          "class": "ui-radio",
-                          "attrs": { "type": "radio", "name": "priority" }
-                        },
-                        { "tag": "span", "text": "High" }
-                      ]
-                    }
-                  ]
-                }
-              ]
-            }
-          ],
-          "code": "<fieldset class=\"ui-radio-group ui-radio-group--compact\">\n  ...\n</fieldset>"
-        }
-      ]
-    },
-    {
-      "title": "Error State",
-      "examples": [
-        {
-          "items": [
-            {
-              "tag": "fieldset",
-              "class": "ui-radio-group ui-radio-group--error",
-              "children": [
-                {
-                  "tag": "legend",
-                  "class": "ui-radio-group__legend",
-                  "text": "Shipping"
-                },
-                {
-                  "tag": "div",
-                  "class": "ui-radio-group__items",
-                  "children": [
-                    {
-                      "tag": "label",
-                      "class": "ui-radio-group__item",
-                      "children": [
-                        {
-                          "tag": "input",
-                          "class": "ui-radio ui-radio--error",
-                          "attrs": { "type": "radio", "name": "shipping" }
-                        },
-                        { "tag": "span", "text": "Standard" }
-                      ]
-                    },
-                    {
-                      "tag": "label",
-                      "class": "ui-radio-group__item",
-                      "children": [
-                        {
-                          "tag": "input",
-                          "class": "ui-radio ui-radio--error",
-                          "attrs": { "type": "radio", "name": "shipping" }
-                        },
-                        { "tag": "span", "text": "Express" }
-                      ]
-                    }
-                  ]
-                },
-                {
-                  "tag": "span",
-                  "class": "ui-form-error",
-                  "text": "Please select a shipping method"
-                }
-              ]
-            }
-          ],
-          "code": "<fieldset class=\"ui-radio-group ui-radio-group--error\">\n  <legend class=\"ui-radio-group__legend\">Shipping</legend>\n  <div class=\"ui-radio-group__items\">\n    <label class=\"ui-radio-group__item\">\n      <input type=\"radio\" class=\"ui-radio ui-radio--error\" name=\"shipping\">\n      <span>Standard</span>\n    </label>\n    ...\n  </div>\n  <span class=\"ui-form-error\">Please select a shipping method</span>\n</fieldset>"
-        }
-      ]
-    },
-    {
-      "title": "Disabled",
-      "examples": [
-        {
-          "items": [
-            {
-              "tag": "fieldset",
-              "class": "ui-radio-group",
-              "attrs": { "disabled": "" },
-              "children": [
-                {
-                  "tag": "legend",
-                  "class": "ui-radio-group__legend",
-                  "text": "Plan (locked)"
-                },
-                {
-                  "tag": "div",
-                  "class": "ui-radio-group__items",
-                  "children": [
-                    {
-                      "tag": "label",
-                      "class": "ui-radio-group__item",
-                      "children": [
-                        {
-                          "tag": "input",
-                          "class": "ui-radio",
-                          "attrs": { "type": "radio", "name": "plan", "checked": "" }
-                        },
-                        { "tag": "span", "text": "Free" }
-                      ]
-                    },
-                    {
-                      "tag": "label",
-                      "class": "ui-radio-group__item",
-                      "children": [
-                        {
-                          "tag": "input",
-                          "class": "ui-radio",
-                          "attrs": { "type": "radio", "name": "plan" }
-                        },
-                        { "tag": "span", "text": "Pro" }
-                      ]
-                    },
-                    {
-                      "tag": "label",
-                      "class": "ui-radio-group__item",
-                      "children": [
-                        {
-                          "tag": "input",
-                          "class": "ui-radio",
-                          "attrs": { "type": "radio", "name": "plan" }
-                        },
-                        { "tag": "span", "text": "Enterprise" }
-                      ]
-                    }
-                  ]
-                }
-              ]
-            }
-          ],
-          "code": "<fieldset class=\"ui-radio-group\" disabled>\n  ...\n</fieldset>"
-        }
-      ]
-    }
-  ],
-  "customization": [
-    {
-      "token": "--ui-radio-group-spacing",
-      "default": "var(--ui-space-1)",
-      "description": "Gap between radio items"
-    },
-    {
-      "token": "--ui-radio-group-legend-size",
-      "default": "var(--ui-font-size-sm)",
-      "description": "Legend font size"
-    },
-    {
-      "token": "--ui-radio-group-legend-weight",
-      "default": "var(--ui-weight-medium)",
-      "description": "Legend font weight"
-    },
-    {
-      "token": "--ui-radio-group-legend-color",
-      "default": "var(--ui-color-text)",
-      "description": "Legend text color"
-    },
-    {
-      "token": "--ui-radio-group-item-gap",
-      "default": "var(--ui-space-1)",
-      "description": "Gap between radio and label text"
-    },
-    {
-      "token": "--ui-radio-group-error-color",
-      "default": "var(--ui-color-danger)",
-      "description": "Legend color in error state"
-    }
-  ]
-}