@teseor/css 1.14.2 → 1.15.0

package/src/components/navigation/tabs/tabs.docs.json

@@ -1,243 +0,0 @@
-{
-  "id": "tabs",
-  "type": "component",
-  "title": "Tabs",
-  "api": "./tabs.api.json",
-  "sections": [
-    {
-      "title": "Default",
-      "data": {
-        "tabs": [
-          { "label": "Tab 1", "active": true, "content": "Panel 1 content" },
-          { "label": "Tab 2", "active": false, "content": "Panel 2 content" },
-          { "label": "Tab 3", "active": false, "content": "Panel 3 content" }
-        ]
-      },
-      "examples": [
-        {
-          "items": [
-            {
-              "tag": "div",
-              "class": "ui-tabs",
-              "children": [
-                {
-                  "tag": "div",
-                  "class": "ui-tabs__list",
-                  "children": [
-                    {
-                      "tag": "button",
-                      "class": "ui-tabs__tab ui-tabs__tab--active",
-                      "text": "Tab 1"
-                    },
-                    { "tag": "button", "class": "ui-tabs__tab", "text": "Tab 2" },
-                    { "tag": "button", "class": "ui-tabs__tab", "text": "Tab 3" }
-                  ]
-                },
-                {
-                  "tag": "div",
-                  "class": "ui-tabs__panel ui-tabs__panel--active",
-                  "text": "Panel 1 content"
-                },
-                { "tag": "div", "class": "ui-tabs__panel", "text": "Panel 2 content" },
-                { "tag": "div", "class": "ui-tabs__panel", "text": "Panel 3 content" }
-              ]
-            }
-          ],
-          "code": "<div class=\"ui-tabs\">\n  <div class=\"ui-tabs__list\">\n{% for t in tabs %}    <button class=\"ui-tabs__tab{% if t.active %} ui-tabs__tab--active{% endif %}\">{{ t.label }}</button>\n{% endfor %}  </div>\n{% for t in tabs %}  <div class=\"ui-tabs__panel{% if t.active %} ui-tabs__panel--active{% endif %}\">{{ t.content }}</div>\n{% endfor %}</div>"
-        }
-      ]
-    },
-    {
-      "title": "Two Tabs",
-      "data": {
-        "tabs": [{ "label": "Preview", "active": true }, { "label": "Code", "active": false }]
-      },
-      "examples": [
-        {
-          "items": [
-            {
-              "tag": "div",
-              "class": "ui-tabs",
-              "children": [
-                {
-                  "tag": "div",
-                  "class": "ui-tabs__list",
-                  "children": [
-                    {
-                      "tag": "button",
-                      "class": "ui-tabs__tab ui-tabs__tab--active",
-                      "text": "Preview"
-                    },
-                    { "tag": "button", "class": "ui-tabs__tab", "text": "Code" }
-                  ]
-                },
-                {
-                  "tag": "div",
-                  "class": "ui-tabs__panel ui-tabs__panel--active",
-                  "children": [
-                    { "tag": "div", "class": "ui-card", "text": "Preview content goes here" }
-                  ]
-                },
-                {
-                  "tag": "div",
-                  "class": "ui-tabs__panel",
-                  "children": [
-                    {
-                      "tag": "pre",
-                      "class": "ui-code-block",
-                      "children": [{ "tag": "code", "text": "<div>Code snippet</div>" }]
-                    }
-                  ]
-                }
-              ]
-            }
-          ],
-          "code": "<div class=\"ui-tabs\">\n  <div class=\"ui-tabs__list\">\n{% for t in tabs %}    <button class=\"ui-tabs__tab{% if t.active %} ui-tabs__tab--active{% endif %}\">{{ t.label }}</button>\n{% endfor %}  </div>\n  <div class=\"ui-tabs__panel ui-tabs__panel--active\">...</div>\n  <div class=\"ui-tabs__panel\">...</div>\n</div>"
-        }
-      ]
-    },
-    {
-      "title": "Sizes",
-      "examples": [
-        {
-          "items": [
-            {
-              "tag": "div",
-              "class": "ui-column",
-              "attrs": { "style": "--column-gap: var(--ui-space-3);" },
-              "children": [
-                {
-                  "tag": "div",
-                  "class": "ui-tabs ui-tabs--sm",
-                  "children": [
-                    {
-                      "tag": "div",
-                      "class": "ui-tabs__list",
-                      "children": [
-                        {
-                          "tag": "button",
-                          "class": "ui-tabs__tab ui-tabs__tab--active",
-                          "text": "Small"
-                        },
-                        { "tag": "button", "class": "ui-tabs__tab", "text": "Tab 2" }
-                      ]
-                    }
-                  ]
-                },
-                {
-                  "tag": "div",
-                  "class": "ui-tabs",
-                  "children": [
-                    {
-                      "tag": "div",
-                      "class": "ui-tabs__list",
-                      "children": [
-                        {
-                          "tag": "button",
-                          "class": "ui-tabs__tab ui-tabs__tab--active",
-                          "text": "Default"
-                        },
-                        { "tag": "button", "class": "ui-tabs__tab", "text": "Tab 2" }
-                      ]
-                    }
-                  ]
-                },
-                {
-                  "tag": "div",
-                  "class": "ui-tabs ui-tabs--lg",
-                  "children": [
-                    {
-                      "tag": "div",
-                      "class": "ui-tabs__list",
-                      "children": [
-                        {
-                          "tag": "button",
-                          "class": "ui-tabs__tab ui-tabs__tab--active",
-                          "text": "Large"
-                        },
-                        { "tag": "button", "class": "ui-tabs__tab", "text": "Tab 2" }
-                      ]
-                    }
-                  ]
-                }
-              ]
-            }
-          ],
-          "code": "<div class=\"ui-tabs ui-tabs--sm\">...</div>\n<div class=\"ui-tabs\">...</div>\n<div class=\"ui-tabs ui-tabs--lg\">...</div>"
-        }
-      ]
-    },
-    {
-      "title": "Vertical",
-      "examples": [
-        {
-          "items": [
-            {
-              "tag": "div",
-              "class": "ui-tabs ui-tabs--vertical",
-              "children": [
-                {
-                  "tag": "div",
-                  "class": "ui-tabs__list",
-                  "children": [
-                    {
-                      "tag": "button",
-                      "class": "ui-tabs__tab ui-tabs__tab--active",
-                      "text": "Tab 1"
-                    },
-                    { "tag": "button", "class": "ui-tabs__tab", "text": "Tab 2" },
-                    { "tag": "button", "class": "ui-tabs__tab", "text": "Tab 3" }
-                  ]
-                },
-                {
-                  "tag": "div",
-                  "class": "ui-tabs__panel ui-tabs__panel--active",
-                  "text": "Vertical tab content"
-                }
-              ]
-            }
-          ],
-          "code": "<div class=\"ui-tabs ui-tabs--vertical\">\n  <div class=\"ui-tabs__list\">\n    <button class=\"ui-tabs__tab ui-tabs__tab--active\">Tab 1</button>\n    <button class=\"ui-tabs__tab\">Tab 2</button>\n  </div>\n  <div class=\"ui-tabs__panel ui-tabs__panel--active\">Content</div>\n</div>"
-        }
-      ]
-    }
-  ],
-  "customization": [
-    {
-      "token": "--ui-tabs-border-color",
-      "default": "var(--ui-color-border)",
-      "description": "Tab list border color"
-    },
-    {
-      "token": "--ui-tabs-tab-height",
-      "default": "var(--ui-row-2)",
-      "description": "Tab height"
-    },
-    {
-      "token": "--ui-tabs-tab-padding-x",
-      "default": "var(--ui-space-2)",
-      "description": "Tab horizontal padding"
-    },
-    {
-      "token": "--ui-tabs-tab-font-size",
-      "default": "var(--ui-font-size-sm)",
-      "description": "Tab font size"
-    },
-    {
-      "token": "--ui-tabs-tab-padding-y",
-      "default": "var(--ui-space-1)",
-      "description": "Tab vertical padding"
-    },
-    { "token": "--ui-tabs-tab-bg", "default": "transparent", "description": "Tab background" },
-    {
-      "token": "--ui-tabs-tab-bg-active",
-      "default": "var(--ui-color-bg)",
-      "description": "Active tab background"
-    },
-    {
-      "token": "--ui-tabs-panel-padding",
-      "default": "var(--ui-space-3)",
-      "description": "Panel padding"
-    }
-  ]
-}

package/src/components/overlays/dialog/dialog.docs.json

@@ -1,200 +0,0 @@
-{
-  "id": "dialog",
-  "type": "component",
-  "title": "Dialog",
-  "description": "Structured modal with header, body, and footer sections. Use with modal component for positioning.",
-  "api": "./dialog.api.json",
-  "sections": [
-    {
-      "title": "Default",
-      "examples": [
-        {
-          "items": [
-            {
-              "tag": "div",
-              "attrs": {
-                "style": "position: relative; height: 240px; background: var(--ui-color-bg-subtle);"
-              },
-              "children": [
-                {
-                  "tag": "div",
-                  "class": "ui-modal ui-modal--visible",
-                  "attrs": { "style": "position: absolute;" },
-                  "children": [
-                    {
-                      "tag": "div",
-                      "class": "ui-modal__content ui-dialog",
-                      "attrs": { "style": "max-height: 200px;" },
-                      "children": [
-                        {
-                          "tag": "header",
-                          "class": "ui-dialog__header",
-                          "children": [
-                            { "tag": "h2", "class": "ui-dialog__title", "text": "Dialog Title" },
-                            {
-                              "tag": "button",
-                              "class": "ui-button ui-button--ghost ui-button--sm ui-dialog__close",
-                              "text": "X"
-                            }
-                          ]
-                        },
-                        {
-                          "tag": "div",
-                          "class": "ui-dialog__body",
-                          "children": [{ "tag": "p", "text": "Dialog content goes here." }]
-                        },
-                        {
-                          "tag": "footer",
-                          "class": "ui-dialog__footer",
-                          "children": [
-                            {
-                              "tag": "button",
-                              "class": "ui-button ui-button--ghost",
-                              "text": "Cancel"
-                            },
-                            { "tag": "button", "class": "ui-button", "text": "Confirm" }
-                          ]
-                        }
-                      ]
-                    }
-                  ]
-                }
-              ]
-            }
-          ],
-          "code": "<div class=\"ui-modal\">\n  <div class=\"ui-modal__content ui-dialog\">\n    <header class=\"ui-dialog__header\">\n      <h2 class=\"ui-dialog__title\">Dialog Title</h2>\n      <button class=\"ui-button ui-button--ghost ui-dialog__close\">X</button>\n    </header>\n    <div class=\"ui-dialog__body\">\n      <p>Dialog content goes here.</p>\n    </div>\n    <footer class=\"ui-dialog__footer\">\n      <button class=\"ui-button ui-button--ghost\">Cancel</button>\n      <button class=\"ui-button\">Confirm</button>\n    </footer>\n  </div>\n</div>"
-        }
-      ]
-    },
-    {
-      "title": "Borderless",
-      "examples": [
-        {
-          "items": [
-            {
-              "tag": "div",
-              "attrs": {
-                "style": "position: relative; height: 200px; background: var(--ui-color-bg-subtle);"
-              },
-              "children": [
-                {
-                  "tag": "div",
-                  "class": "ui-modal ui-modal--visible",
-                  "attrs": { "style": "position: absolute;" },
-                  "children": [
-                    {
-                      "tag": "div",
-                      "class": "ui-modal__content ui-dialog ui-dialog--borderless",
-                      "attrs": { "style": "max-height: 180px;" },
-                      "children": [
-                        {
-                          "tag": "header",
-                          "class": "ui-dialog__header",
-                          "children": [
-                            { "tag": "h2", "class": "ui-dialog__title", "text": "Simple Dialog" }
-                          ]
-                        },
-                        {
-                          "tag": "div",
-                          "class": "ui-dialog__body",
-                          "children": [{ "tag": "p", "text": "Content without borders." }]
-                        },
-                        {
-                          "tag": "footer",
-                          "class": "ui-dialog__footer",
-                          "children": [{ "tag": "button", "class": "ui-button", "text": "OK" }]
-                        }
-                      ]
-                    }
-                  ]
-                }
-              ]
-            }
-          ],
-          "code": "<div class=\"ui-modal\">\n  <div class=\"ui-modal__content ui-dialog ui-dialog--borderless\">\n    ...\n  </div>\n</div>"
-        }
-      ]
-    },
-    {
-      "title": "Confirmation Dialog",
-      "examples": [
-        {
-          "items": [
-            {
-              "tag": "div",
-              "attrs": {
-                "style": "position: relative; height: 200px; background: var(--ui-color-bg-subtle);"
-              },
-              "children": [
-                {
-                  "tag": "div",
-                  "class": "ui-modal ui-modal--sm ui-modal--visible",
-                  "attrs": { "style": "position: absolute;" },
-                  "children": [
-                    {
-                      "tag": "div",
-                      "class": "ui-modal__content ui-dialog",
-                      "children": [
-                        {
-                          "tag": "header",
-                          "class": "ui-dialog__header",
-                          "children": [
-                            { "tag": "h2", "class": "ui-dialog__title", "text": "Delete Item?" }
-                          ]
-                        },
-                        {
-                          "tag": "div",
-                          "class": "ui-dialog__body",
-                          "children": [{ "tag": "p", "text": "This action cannot be undone." }]
-                        },
-                        {
-                          "tag": "footer",
-                          "class": "ui-dialog__footer",
-                          "children": [
-                            {
-                              "tag": "button",
-                              "class": "ui-button ui-button--ghost",
-                              "text": "Cancel"
-                            },
-                            {
-                              "tag": "button",
-                              "class": "ui-button ui-button--danger",
-                              "text": "Delete"
-                            }
-                          ]
-                        }
-                      ]
-                    }
-                  ]
-                }
-              ]
-            }
-          ],
-          "code": "<div class=\"ui-modal ui-modal--sm\">\n  <div class=\"ui-modal__content ui-dialog\">\n    <header class=\"ui-dialog__header\">\n      <h2 class=\"ui-dialog__title\">Delete Item?</h2>\n    </header>\n    <div class=\"ui-dialog__body\">\n      <p>This action cannot be undone.</p>\n    </div>\n    <footer class=\"ui-dialog__footer\">\n      <button class=\"ui-button ui-button--ghost\">Cancel</button>\n      <button class=\"ui-button ui-button--danger\">Delete</button>\n    </footer>\n  </div>\n</div>"
-        }
-      ]
-    }
-  ],
-  "customization": [
-    {
-      "token": "--ui-dialog-header-padding",
-      "default": "calc(var(--ui-unit) * 2) calc(var(--ui-unit) * 3)",
-      "description": "Header padding"
-    },
-    {
-      "token": "--ui-dialog-body-padding",
-      "default": "calc(var(--ui-unit) * 3)",
-      "description": "Body padding"
-    },
-    {
-      "token": "--ui-dialog-footer-padding",
-      "default": "calc(var(--ui-unit) * 2) calc(var(--ui-unit) * 3)",
-      "description": "Footer padding"
-    },
-    {
-      "token": "--ui-dialog-border-color",
-      "default": "var(--ui-color-border)",
-      "description": "Section border color"
-    }
-  ]
-}