@teseor/css 1.14.2 → 1.15.0

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

@@ -1,307 +0,0 @@
-{
-  "id": "drawer",
-  "type": "component",
-  "title": "Drawer",
-  "api": "./drawer.api.json",
-  "sections": [
-    {
-      "title": "Default (End)",
-      "description": "Slides in from the end (right in LTR)",
-      "examples": [
-        {
-          "items": [
-            {
-              "tag": "div",
-              "attrs": {
-                "style": "position:relative;height:300px;overflow:hidden;border:1px solid var(--ui-color-border);border-radius:var(--ui-radius-md)"
-              },
-              "children": [
-                {
-                  "tag": "div",
-                  "class": "ui-drawer-overlay",
-                  "attrs": { "style": "position:absolute" }
-                },
-                {
-                  "tag": "div",
-                  "class": "ui-drawer ui-drawer--end",
-                  "attrs": { "style": "position:absolute", "data-state": "open" },
-                  "children": [
-                    {
-                      "tag": "div",
-                      "class": "ui-drawer__header",
-                      "children": [
-                        {
-                          "tag": "div",
-                          "children": [
-                            { "tag": "h2", "class": "ui-drawer__title", "text": "Drawer Title" },
-                            {
-                              "tag": "p",
-                              "class": "ui-drawer__description",
-                              "text": "Optional description text"
-                            }
-                          ]
-                        },
-                        {
-                          "tag": "button",
-                          "class": "ui-drawer__close ui-button ui-button--ghost ui-button--icon",
-                          "text": "X"
-                        }
-                      ]
-                    },
-                    {
-                      "tag": "div",
-                      "class": "ui-drawer__body",
-                      "children": [{ "tag": "p", "text": "Drawer content goes here." }]
-                    },
-                    {
-                      "tag": "div",
-                      "class": "ui-drawer__footer",
-                      "children": [
-                        {
-                          "tag": "button",
-                          "class": "ui-button ui-button--secondary",
-                          "text": "Cancel"
-                        },
-                        { "tag": "button", "class": "ui-button", "text": "Save" }
-                      ]
-                    }
-                  ]
-                }
-              ]
-            }
-          ]
-        }
-      ]
-    },
-    {
-      "title": "Positions",
-      "examples": [
-        {
-          "items": [
-            {
-              "tag": "div",
-              "attrs": {
-                "style": "position:relative;height:200px;overflow:hidden;border:1px solid var(--ui-color-border);border-radius:var(--ui-radius-md)"
-              },
-              "children": [
-                {
-                  "tag": "div",
-                  "class": "ui-drawer ui-drawer--start ui-drawer--sm",
-                  "attrs": { "style": "position:absolute", "data-state": "open" },
-                  "children": [
-                    {
-                      "tag": "div",
-                      "class": "ui-drawer__header",
-                      "children": [{ "tag": "h2", "class": "ui-drawer__title", "text": "Start" }]
-                    },
-                    {
-                      "tag": "div",
-                      "class": "ui-drawer__body",
-                      "children": [{ "tag": "p", "text": "From start edge" }]
-                    }
-                  ]
-                }
-              ]
-            }
-          ],
-          "layout": "column"
-        },
-        {
-          "items": [
-            {
-              "tag": "div",
-              "attrs": {
-                "style": "position:relative;height:200px;overflow:hidden;border:1px solid var(--ui-color-border);border-radius:var(--ui-radius-md)"
-              },
-              "children": [
-                {
-                  "tag": "div",
-                  "class": "ui-drawer ui-drawer--top",
-                  "attrs": { "style": "position:absolute", "data-state": "open" },
-                  "children": [
-                    {
-                      "tag": "div",
-                      "class": "ui-drawer__header",
-                      "children": [{ "tag": "h2", "class": "ui-drawer__title", "text": "Top" }]
-                    },
-                    {
-                      "tag": "div",
-                      "class": "ui-drawer__body",
-                      "children": [{ "tag": "p", "text": "From top edge" }]
-                    }
-                  ]
-                }
-              ]
-            }
-          ],
-          "layout": "column"
-        },
-        {
-          "items": [
-            {
-              "tag": "div",
-              "attrs": {
-                "style": "position:relative;height:200px;overflow:hidden;border:1px solid var(--ui-color-border);border-radius:var(--ui-radius-md)"
-              },
-              "children": [
-                {
-                  "tag": "div",
-                  "class": "ui-drawer ui-drawer--bottom",
-                  "attrs": { "style": "position:absolute", "data-state": "open" },
-                  "children": [
-                    {
-                      "tag": "div",
-                      "class": "ui-drawer__header",
-                      "children": [{ "tag": "h2", "class": "ui-drawer__title", "text": "Bottom" }]
-                    },
-                    {
-                      "tag": "div",
-                      "class": "ui-drawer__body",
-                      "children": [{ "tag": "p", "text": "From bottom edge" }]
-                    }
-                  ]
-                }
-              ]
-            }
-          ],
-          "layout": "column"
-        }
-      ]
-    },
-    {
-      "title": "Sizes",
-      "examples": [
-        {
-          "items": [
-            {
-              "tag": "div",
-              "attrs": {
-                "style": "position:relative;height:150px;overflow:hidden;border:1px solid var(--ui-color-border);border-radius:var(--ui-radius-md)"
-              },
-              "children": [
-                {
-                  "tag": "div",
-                  "class": "ui-drawer ui-drawer--end ui-drawer--sm",
-                  "attrs": { "style": "position:absolute", "data-state": "open" },
-                  "children": [
-                    {
-                      "tag": "div",
-                      "class": "ui-drawer__body",
-                      "children": [{ "tag": "p", "text": "Small drawer" }]
-                    }
-                  ]
-                }
-              ]
-            }
-          ],
-          "layout": "column"
-        },
-        {
-          "items": [
-            {
-              "tag": "div",
-              "attrs": {
-                "style": "position:relative;height:150px;overflow:hidden;border:1px solid var(--ui-color-border);border-radius:var(--ui-radius-md)"
-              },
-              "children": [
-                {
-                  "tag": "div",
-                  "class": "ui-drawer ui-drawer--end",
-                  "attrs": { "style": "position:absolute", "data-state": "open" },
-                  "children": [
-                    {
-                      "tag": "div",
-                      "class": "ui-drawer__body",
-                      "children": [{ "tag": "p", "text": "Default drawer" }]
-                    }
-                  ]
-                }
-              ]
-            }
-          ],
-          "layout": "column"
-        },
-        {
-          "items": [
-            {
-              "tag": "div",
-              "attrs": {
-                "style": "position:relative;height:150px;overflow:hidden;border:1px solid var(--ui-color-border);border-radius:var(--ui-radius-md)"
-              },
-              "children": [
-                {
-                  "tag": "div",
-                  "class": "ui-drawer ui-drawer--end ui-drawer--lg",
-                  "attrs": { "style": "position:absolute", "data-state": "open" },
-                  "children": [
-                    {
-                      "tag": "div",
-                      "class": "ui-drawer__body",
-                      "children": [{ "tag": "p", "text": "Large drawer" }]
-                    }
-                  ]
-                }
-              ]
-            }
-          ],
-          "layout": "column"
-        },
-        {
-          "items": [
-            {
-              "tag": "div",
-              "attrs": {
-                "style": "position:relative;height:150px;overflow:hidden;border:1px solid var(--ui-color-border);border-radius:var(--ui-radius-md)"
-              },
-              "children": [
-                {
-                  "tag": "div",
-                  "class": "ui-drawer ui-drawer--end ui-drawer--full",
-                  "attrs": { "style": "position:absolute", "data-state": "open" },
-                  "children": [
-                    {
-                      "tag": "div",
-                      "class": "ui-drawer__body",
-                      "children": [{ "tag": "p", "text": "Full-size drawer" }]
-                    }
-                  ]
-                }
-              ]
-            }
-          ],
-          "layout": "column"
-        }
-      ]
-    }
-  ],
-  "customization": [
-    {
-      "token": "--ui-drawer-size",
-      "default": "calc(var(--ui-unit) * 40)",
-      "description": "Default width/height"
-    },
-    { "token": "--ui-drawer-max-size", "default": "90%", "description": "Maximum size" },
-    {
-      "token": "--ui-drawer-bg",
-      "default": "var(--ui-color-bg)",
-      "description": "Background color"
-    },
-    { "token": "--ui-drawer-shadow", "default": "var(--shadow-lg)", "description": "Box shadow" },
-    {
-      "token": "--ui-drawer-header-padding",
-      "default": "16px 24px",
-      "description": "Header padding"
-    },
-    { "token": "--ui-drawer-body-padding", "default": "24px", "description": "Body padding" },
-    {
-      "token": "--ui-drawer-footer-padding",
-      "default": "16px 24px",
-      "description": "Footer padding"
-    },
-    {
-      "token": "--ui-drawer-border-color",
-      "default": "var(--ui-color-border)",
-      "description": "Border color"
-    }
-  ]
-}

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

@@ -1,252 +0,0 @@
-{
-  "id": "modal",
-  "type": "component",
-  "title": "Modal",
-  "description": "Container for modal dialogs. Use with overlay for backdrop effect.",
-  "api": "./modal.api.json",
-  "sections": [
-    {
-      "title": "Default",
-      "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",
-                      "children": [{ "tag": "p", "text": "Modal content goes here" }]
-                    }
-                  ]
-                }
-              ]
-            }
-          ],
-          "code": "<div class=\"ui-overlay\"></div>\n<div class=\"ui-modal\">\n  <div class=\"ui-modal__content\">\n    <p>Modal content goes here</p>\n  </div>\n</div>"
-        }
-      ]
-    },
-    {
-      "title": "Sizes",
-      "data": {
-        "sizes": [
-          { "mod": "sm", "label": "Small" },
-          { "mod": "", "label": "Default" },
-          { "mod": "lg", "label": "Large" }
-        ]
-      },
-      "examples": [
-        {
-          "items": [
-            {
-              "tag": "div",
-              "attrs": {
-                "style": "position: relative; height: 120px; 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",
-                      "children": [{ "tag": "p", "text": "Small modal" }]
-                    }
-                  ]
-                }
-              ]
-            }
-          ],
-          "code": "<div class=\"ui-modal ui-modal--sm\">\n  <div class=\"ui-modal__content\">Small modal</div>\n</div>"
-        }
-      ]
-    },
-    {
-      "title": "Large",
-      "examples": [
-        {
-          "items": [
-            {
-              "tag": "div",
-              "attrs": {
-                "style": "position: relative; height: 120px; background: var(--ui-color-bg-subtle);"
-              },
-              "children": [
-                {
-                  "tag": "div",
-                  "class": "ui-modal ui-modal--lg ui-modal--visible",
-                  "attrs": { "style": "position: absolute;" },
-                  "children": [
-                    {
-                      "tag": "div",
-                      "class": "ui-modal__content",
-                      "children": [{ "tag": "p", "text": "Large modal" }]
-                    }
-                  ]
-                }
-              ]
-            }
-          ]
-        }
-      ]
-    },
-    {
-      "title": "Full",
-      "examples": [
-        {
-          "items": [
-            {
-              "tag": "div",
-              "attrs": {
-                "style": "position: relative; height: 120px; background: var(--ui-color-bg-subtle);"
-              },
-              "children": [
-                {
-                  "tag": "div",
-                  "class": "ui-modal ui-modal--full ui-modal--visible",
-                  "attrs": { "style": "position: absolute;" },
-                  "children": [
-                    {
-                      "tag": "div",
-                      "class": "ui-modal__content",
-                      "children": [{ "tag": "p", "text": "Full-screen modal" }]
-                    }
-                  ]
-                }
-              ]
-            }
-          ]
-        }
-      ]
-    },
-    {
-      "title": "Entering Animation",
-      "description": "Apply entering modifier for open transition.",
-      "examples": [
-        {
-          "items": [
-            {
-              "tag": "div",
-              "attrs": {
-                "style": "position: relative; height: 120px; background: var(--ui-color-bg-subtle);"
-              },
-              "children": [
-                {
-                  "tag": "div",
-                  "class": "ui-modal ui-modal--visible ui-modal--entering",
-                  "attrs": { "style": "position: absolute;" },
-                  "children": [
-                    {
-                      "tag": "div",
-                      "class": "ui-modal__content",
-                      "children": [{ "tag": "p", "text": "Entering modal" }]
-                    }
-                  ]
-                }
-              ]
-            }
-          ],
-          "code": "<div class=\"ui-modal ui-modal--entering\">\n  <div class=\"ui-modal__content\">...</div>\n</div>"
-        }
-      ]
-    },
-    {
-      "title": "With Scrollable Content",
-      "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",
-                      "attrs": { "style": "max-height: 150px;" },
-                      "children": [
-                        {
-                          "tag": "div",
-                          "class": "ui-modal__body",
-                          "children": [
-                            { "tag": "p", "text": "Line 1" },
-                            { "tag": "p", "text": "Line 2" },
-                            { "tag": "p", "text": "Line 3" },
-                            { "tag": "p", "text": "Line 4" },
-                            { "tag": "p", "text": "Line 5" },
-                            { "tag": "p", "text": "Line 6" }
-                          ]
-                        }
-                      ]
-                    }
-                  ]
-                }
-              ]
-            }
-          ],
-          "code": "<div class=\"ui-modal\">\n  <div class=\"ui-modal__content\">\n    <div class=\"ui-modal__body\">\n      <!-- Scrollable content -->\n    </div>\n  </div>\n</div>"
-        }
-      ]
-    }
-  ],
-  "customization": [
-    {
-      "token": "--ui-modal-bg",
-      "default": "var(--ui-color-bg)",
-      "description": "Background color"
-    },
-    {
-      "token": "--ui-modal-radius",
-      "default": "var(--ui-radius-lg)",
-      "description": "Border radius"
-    },
-    {
-      "token": "--ui-modal-shadow",
-      "default": "0 24px 48px rgb(0 0 0 / 0.25)",
-      "description": "Box shadow"
-    },
-    {
-      "token": "--ui-modal-padding",
-      "default": "calc(var(--ui-unit) * 3)",
-      "description": "Content padding"
-    },
-    {
-      "token": "--ui-modal-max-width",
-      "default": "calc(var(--ui-unit) * 60)",
-      "description": "Max width (default)"
-    },
-    {
-      "token": "--ui-modal-max-width-sm",
-      "default": "calc(var(--ui-unit) * 40)",
-      "description": "Max width (small)"
-    },
-    {
-      "token": "--ui-modal-max-width-lg",
-      "default": "calc(var(--ui-unit) * 80)",
-      "description": "Max width (large)"
-    },
-    {
-      "token": "--ui-modal-max-height",
-      "default": "calc(100vh - var(--ui-unit) * 8)",
-      "description": "Max height"
-    },
-    { "token": "--ui-modal-z", "default": "var(--ui-z-modal)", "description": "Z-index" }
-  ]
-}

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

@@ -1,138 +0,0 @@
-{
-  "id": "overlay",
-  "type": "component",
-  "title": "Overlay",
-  "description": "Full viewport backdrop for modals, dialogs, and drawers. Controls visibility via state modifiers.",
-  "api": "./overlay.api.json",
-  "sections": [
-    {
-      "title": "Default",
-      "examples": [
-        {
-          "items": [
-            {
-              "tag": "div",
-              "attrs": {
-                "style": "position: relative; height: 120px; background: var(--ui-color-bg-subtle);"
-              },
-              "children": [
-                {
-                  "tag": "div",
-                  "class": "ui-overlay",
-                  "attrs": { "style": "position: absolute;" }
-                },
-                {
-                  "tag": "p",
-                  "attrs": { "style": "position: relative; padding: var(--ui-space-2);" },
-                  "text": "Content behind overlay"
-                }
-              ]
-            }
-          ],
-          "code": "<div class=\"ui-overlay\"></div>"
-        }
-      ]
-    },
-    {
-      "title": "Light Variant",
-      "examples": [
-        {
-          "items": [
-            {
-              "tag": "div",
-              "attrs": {
-                "style": "position: relative; height: 120px; background: var(--ui-color-text);"
-              },
-              "children": [
-                {
-                  "tag": "div",
-                  "class": "ui-overlay ui-overlay--light",
-                  "attrs": { "style": "position: absolute;" }
-                },
-                {
-                  "tag": "p",
-                  "attrs": {
-                    "style": "position: relative; padding: var(--ui-space-2); color: white;"
-                  },
-                  "text": "Dark content behind light overlay"
-                }
-              ]
-            }
-          ],
-          "code": "<div class=\"ui-overlay ui-overlay--light\"></div>"
-        }
-      ]
-    },
-    {
-      "title": "Blur Variant",
-      "examples": [
-        {
-          "items": [
-            {
-              "tag": "div",
-              "attrs": {
-                "style": "position: relative; height: 120px; background: linear-gradient(45deg, var(--ui-color-primary), var(--ui-color-success));"
-              },
-              "children": [
-                {
-                  "tag": "div",
-                  "class": "ui-overlay ui-overlay--blur",
-                  "attrs": { "style": "position: absolute;" }
-                },
-                {
-                  "tag": "p",
-                  "attrs": {
-                    "style": "position: relative; padding: var(--ui-space-2); color: white;"
-                  },
-                  "text": "Blurred backdrop"
-                }
-              ]
-            }
-          ],
-          "code": "<div class=\"ui-overlay ui-overlay--blur\"></div>"
-        }
-      ]
-    },
-    {
-      "title": "With Animation",
-      "examples": [
-        {
-          "items": [
-            {
-              "tag": "div",
-              "attrs": {
-                "style": "position: relative; height: 120px; background: var(--ui-color-bg-subtle);"
-              },
-              "children": [
-                {
-                  "tag": "div",
-                  "class": "ui-overlay ui-overlay--animate ui-overlay--visible",
-                  "attrs": { "style": "position: absolute;" }
-                }
-              ]
-            }
-          ],
-          "code": "<div class=\"ui-overlay ui-overlay--animate ui-overlay--visible\"></div>\n<!-- JS toggles between --visible and --hidden -->"
-        }
-      ]
-    }
-  ],
-  "customization": [
-    {
-      "token": "--ui-overlay-bg",
-      "default": "rgb(0 0 0 / 0.5)",
-      "description": "Default backdrop color"
-    },
-    {
-      "token": "--ui-overlay-bg-light",
-      "default": "rgb(255 255 255 / 0.7)",
-      "description": "Light variant backdrop color"
-    },
-    {
-      "token": "--ui-overlay-bg-blur",
-      "default": "rgb(0 0 0 / 0.3)",
-      "description": "Blur variant backdrop color"
-    },
-    { "token": "--ui-overlay-z", "default": "var(--ui-z-overlay)", "description": "Z-index layer" }
-  ]
-}