@teseor/css 1.14.3 → 1.15.0

package/src/components/data-display/image/image.docs.json

@@ -1,337 +0,0 @@
-{
-  "id": "image",
-  "type": "component",
-  "title": "Image",
-  "description": "Responsive image with fallback placeholder, optional caption, and shape modifiers.",
-  "api": "./image.api.json",
-  "sections": [
-    {
-      "title": "Default",
-      "examples": [
-        {
-          "items": [
-            {
-              "tag": "figure",
-              "class": "ui-image",
-              "children": [
-                {
-                  "tag": "img",
-                  "class": "ui-image__img",
-                  "attrs": {
-                    "src": "data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='192' height='160'%3E%3Crect fill='%23b0bec5' width='192' height='160'/%3E%3C/svg%3E",
-                    "alt": "Placeholder"
-                  }
-                }
-              ]
-            }
-          ],
-          "code": "<figure class=\"ui-image\">\n  <img class=\"ui-image__img\" src=\"...\" alt=\"Description\">\n</figure>"
-        }
-      ]
-    },
-    {
-      "title": "Sizes",
-      "examples": [
-        {
-          "layout": "row",
-          "items": [
-            {
-              "tag": "figure",
-              "class": "ui-image ui-image--sm",
-              "children": [
-                {
-                  "tag": "img",
-                  "class": "ui-image__img",
-                  "attrs": {
-                    "src": "data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='96' height='96'%3E%3Crect fill='%2390a4ae' width='96' height='96'/%3E%3C/svg%3E",
-                    "alt": "Small"
-                  }
-                }
-              ]
-            },
-            {
-              "tag": "figure",
-              "class": "ui-image ui-image--md",
-              "children": [
-                {
-                  "tag": "img",
-                  "class": "ui-image__img",
-                  "attrs": {
-                    "src": "data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='192' height='192'%3E%3Crect fill='%2378909c' width='192' height='192'/%3E%3C/svg%3E",
-                    "alt": "Medium"
-                  }
-                }
-              ]
-            },
-            {
-              "tag": "figure",
-              "class": "ui-image ui-image--lg",
-              "children": [
-                {
-                  "tag": "img",
-                  "class": "ui-image__img",
-                  "attrs": {
-                    "src": "data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='320' height='320'%3E%3Crect fill='%23607d8b' width='320' height='320'/%3E%3C/svg%3E",
-                    "alt": "Large"
-                  }
-                }
-              ]
-            }
-          ],
-          "code": "<figure class=\"ui-image ui-image--sm\">\n  <img class=\"ui-image__img\" src=\"...\" alt=\"Small\">\n</figure>\n<figure class=\"ui-image ui-image--md\">\n  <img class=\"ui-image__img\" src=\"...\" alt=\"Medium\">\n</figure>\n<figure class=\"ui-image ui-image--lg\">\n  <img class=\"ui-image__img\" src=\"...\" alt=\"Large\">\n</figure>\n<figure class=\"ui-image ui-image--xl\">\n  <img class=\"ui-image__img\" src=\"...\" alt=\"XL\">\n</figure>\n<figure class=\"ui-image ui-image--full\">\n  <img class=\"ui-image__img\" src=\"...\" alt=\"Full\">\n</figure>"
-        }
-      ]
-    },
-    {
-      "title": "Rounded",
-      "examples": [
-        {
-          "items": [
-            {
-              "tag": "figure",
-              "class": "ui-image ui-image--md ui-image--rounded",
-              "children": [
-                {
-                  "tag": "img",
-                  "class": "ui-image__img",
-                  "attrs": {
-                    "src": "data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='192' height='140'%3E%3Crect fill='%234db6ac' width='192' height='140'/%3E%3C/svg%3E",
-                    "alt": "Rounded"
-                  }
-                }
-              ]
-            }
-          ],
-          "code": "<figure class=\"ui-image ui-image--rounded\">\n  <img class=\"ui-image__img\" src=\"...\" alt=\"Rounded\">\n</figure>"
-        }
-      ]
-    },
-    {
-      "title": "Circle",
-      "examples": [
-        {
-          "layout": "row",
-          "items": [
-            {
-              "tag": "figure",
-              "class": "ui-image ui-image--sm ui-image--circle",
-              "children": [
-                {
-                  "tag": "img",
-                  "class": "ui-image__img",
-                  "attrs": {
-                    "src": "data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='96' height='96'%3E%3Crect fill='%23ce93d8' width='96' height='96'/%3E%3C/svg%3E",
-                    "alt": "Circle small"
-                  }
-                }
-              ]
-            },
-            {
-              "tag": "figure",
-              "class": "ui-image ui-image--md ui-image--circle",
-              "children": [
-                {
-                  "tag": "img",
-                  "class": "ui-image__img",
-                  "attrs": {
-                    "src": "data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='192' height='192'%3E%3Crect fill='%23ba68c8' width='192' height='192'/%3E%3C/svg%3E",
-                    "alt": "Circle medium"
-                  }
-                }
-              ]
-            }
-          ],
-          "code": "<figure class=\"ui-image ui-image--circle\">\n  <img class=\"ui-image__img\" src=\"...\" alt=\"Circle\">\n</figure>"
-        }
-      ]
-    },
-    {
-      "title": "Object Fit",
-      "examples": [
-        {
-          "layout": "row",
-          "items": [
-            {
-              "tag": "figure",
-              "class": "ui-image ui-image--md ui-image--cover",
-              "children": [
-                {
-                  "tag": "img",
-                  "class": "ui-image__img",
-                  "attrs": {
-                    "src": "data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='300' height='150'%3E%3Crect fill='%2364b5f6' width='300' height='150'/%3E%3Ctext x='150' y='80' text-anchor='middle' fill='%23fff' font-size='16'%3Ecover%3C/text%3E%3C/svg%3E",
-                    "alt": "Cover fit"
-                  }
-                }
-              ]
-            },
-            {
-              "tag": "figure",
-              "class": "ui-image ui-image--md ui-image--contain",
-              "children": [
-                {
-                  "tag": "img",
-                  "class": "ui-image__img",
-                  "attrs": {
-                    "src": "data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='300' height='150'%3E%3Crect fill='%2381c784' width='300' height='150'/%3E%3Ctext x='150' y='80' text-anchor='middle' fill='%23fff' font-size='16'%3Econtain%3C/text%3E%3C/svg%3E",
-                    "alt": "Contain fit"
-                  }
-                }
-              ]
-            }
-          ],
-          "code": "<figure class=\"ui-image ui-image--cover\">\n  <img class=\"ui-image__img\" src=\"...\" alt=\"Cover\">\n</figure>\n<figure class=\"ui-image ui-image--contain\">\n  <img class=\"ui-image__img\" src=\"...\" alt=\"Contain\">\n</figure>"
-        }
-      ]
-    },
-    {
-      "title": "Caption",
-      "examples": [
-        {
-          "items": [
-            {
-              "tag": "figure",
-              "class": "ui-image ui-image--md ui-image--rounded",
-              "children": [
-                {
-                  "tag": "img",
-                  "class": "ui-image__img",
-                  "attrs": {
-                    "src": "data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='192' height='140'%3E%3Crect fill='%23ffb74d' width='192' height='140'/%3E%3C/svg%3E",
-                    "alt": "With caption"
-                  }
-                },
-                {
-                  "tag": "figcaption",
-                  "class": "ui-image__caption",
-                  "text": "An optional image caption"
-                }
-              ]
-            }
-          ],
-          "code": "<figure class=\"ui-image\">\n  <img class=\"ui-image__img\" src=\"...\" alt=\"Description\">\n  <figcaption class=\"ui-image__caption\">Caption text</figcaption>\n</figure>"
-        }
-      ]
-    },
-    {
-      "title": "Fallback",
-      "examples": [
-        {
-          "layout": "row",
-          "items": [
-            {
-              "tag": "figure",
-              "class": "ui-image ui-image--sm",
-              "children": [
-                {
-                  "tag": "img",
-                  "class": "ui-image__img",
-                  "attrs": {
-                    "src": "",
-                    "alt": "Broken image"
-                  }
-                }
-              ]
-            },
-            {
-              "tag": "figure",
-              "class": "ui-image ui-image--sm ui-image--rounded",
-              "children": [
-                {
-                  "tag": "img",
-                  "class": "ui-image__img",
-                  "attrs": {
-                    "src": "",
-                    "alt": "Broken rounded"
-                  }
-                }
-              ]
-            },
-            {
-              "tag": "figure",
-              "class": "ui-image ui-image--sm ui-image--circle",
-              "children": [
-                {
-                  "tag": "img",
-                  "class": "ui-image__img",
-                  "attrs": {
-                    "src": "",
-                    "alt": "Broken circle"
-                  }
-                }
-              ]
-            }
-          ],
-          "code": "<figure class=\"ui-image\">\n  <img class=\"ui-image__img\" src=\"\" alt=\"Fallback shown\">\n</figure>"
-        }
-      ]
-    }
-  ],
-  "customization": [
-    {
-      "token": "--ui-image-size",
-      "default": "auto",
-      "description": "Default image dimensions"
-    },
-    {
-      "token": "--ui-image-size-sm",
-      "default": "calc(var(--ui-unit) * 12)",
-      "description": "Small size"
-    },
-    {
-      "token": "--ui-image-size-md",
-      "default": "calc(var(--ui-unit) * 24)",
-      "description": "Medium size"
-    },
-    {
-      "token": "--ui-image-size-lg",
-      "default": "calc(var(--ui-unit) * 40)",
-      "description": "Large size"
-    },
-    {
-      "token": "--ui-image-size-xl",
-      "default": "calc(var(--ui-unit) * 60)",
-      "description": "Extra large size"
-    },
-    {
-      "token": "--ui-image-bg",
-      "default": "var(--ui-color-bg-muted)",
-      "description": "Fallback background"
-    },
-    {
-      "token": "--ui-image-radius",
-      "default": "0",
-      "description": "Border radius"
-    },
-    {
-      "token": "--ui-image-radius-rounded",
-      "default": "var(--ui-radius-lg)",
-      "description": "Rounded variant radius"
-    },
-    {
-      "token": "--ui-image-radius-circle",
-      "default": "50%",
-      "description": "Circle variant radius"
-    },
-    {
-      "token": "--ui-image-object-fit",
-      "default": "cover",
-      "description": "Object-fit strategy"
-    },
-    {
-      "token": "--ui-image-caption-color",
-      "default": "var(--ui-color-text-muted)",
-      "description": "Caption text color"
-    },
-    {
-      "token": "--ui-image-caption-font-size",
-      "default": "var(--ui-font-size-sm)",
-      "description": "Caption font size"
-    },
-    {
-      "token": "--ui-image-caption-spacing",
-      "default": "var(--ui-space-1)",
-      "description": "Space between image and caption"
-    }
-  ]
-}

package/src/components/data-display/stat/stat.docs.json

@@ -1,114 +0,0 @@
-{
-  "id": "stat",
-  "type": "component",
-  "title": "Stat",
-  "description": "Statistic display with prominent value and descriptive label.",
-  "api": "./stat.api.json",
-  "sections": [
-    {
-      "title": "Default",
-      "examples": [
-        {
-          "items": [
-            {
-              "tag": "div",
-              "class": "ui-stat",
-              "children": [
-                { "tag": "span", "class": "ui-stat__value", "text": "2,847" },
-                { "tag": "span", "class": "ui-stat__label", "text": "Total users" }
-              ]
-            }
-          ]
-        }
-      ]
-    },
-    {
-      "title": "Multiple stats",
-      "examples": [
-        {
-          "items": [
-            {
-              "tag": "div",
-              "class": "ui-row ui-row--lg",
-              "children": [
-                {
-                  "tag": "div",
-                  "class": "ui-stat",
-                  "children": [
-                    { "tag": "span", "class": "ui-stat__value", "text": "12.5k" },
-                    { "tag": "span", "class": "ui-stat__label", "text": "Revenue" }
-                  ]
-                },
-                {
-                  "tag": "div",
-                  "class": "ui-stat",
-                  "children": [
-                    { "tag": "span", "class": "ui-stat__value", "text": "573" },
-                    { "tag": "span", "class": "ui-stat__label", "text": "Orders" }
-                  ]
-                },
-                {
-                  "tag": "div",
-                  "class": "ui-stat",
-                  "children": [
-                    { "tag": "span", "class": "ui-stat__value", "text": "98%" },
-                    { "tag": "span", "class": "ui-stat__label", "text": "Satisfaction" }
-                  ]
-                }
-              ]
-            }
-          ]
-        }
-      ]
-    },
-    {
-      "title": "Small",
-      "examples": [
-        {
-          "items": [
-            {
-              "tag": "div",
-              "class": "ui-stat ui-stat--sm",
-              "children": [
-                { "tag": "span", "class": "ui-stat__value", "text": "42" },
-                { "tag": "span", "class": "ui-stat__label", "text": "Active now" }
-              ]
-            }
-          ]
-        }
-      ]
-    }
-  ],
-  "customization": [
-    {
-      "token": "--ui-stat-gap",
-      "default": "var(--ui-space-1)",
-      "description": "Gap between value and label"
-    },
-    {
-      "token": "--ui-stat-value-font-size",
-      "default": "var(--ui-font-size-3xl)",
-      "description": "Value font size"
-    },
-    {
-      "token": "--ui-stat-value-font-weight",
-      "default": "var(--ui-weight-bold)",
-      "description": "Value font weight"
-    },
-    {
-      "token": "--ui-stat-value-color",
-      "default": "var(--ui-color-text)",
-      "description": "Value text color"
-    },
-    {
-      "token": "--ui-stat-label-font-size",
-      "default": "var(--ui-font-size-sm)",
-      "description": "Label font size"
-    },
-    {
-      "token": "--ui-stat-label-color",
-      "default": "var(--ui-color-text-muted)",
-      "description": "Label text color"
-    }
-  ]
-}

package/src/components/data-display/status/status.docs.json

@@ -1,147 +0,0 @@
-{
-  "id": "status",
-  "type": "component",
-  "title": "Status",
-  "description": "Visual status indicator with colored dot to show state.",
-  "api": "./status.api.json",
-  "sections": [
-    {
-      "title": "Variants",
-      "examples": [
-        {
-          "items": [
-            {
-              "tag": "div",
-              "attrs": {
-                "style": "display: flex; flex-direction: column; gap: var(--ui-space-2);"
-              },
-              "children": [
-                {
-                  "tag": "span",
-                  "class": "ui-status",
-                  "children": [{ "tag": "span", "class": "ui-status__dot" }, { "text": "Default" }]
-                },
-                {
-                  "tag": "span",
-                  "class": "ui-status ui-status--success",
-                  "children": [{ "tag": "span", "class": "ui-status__dot" }, { "text": "Online" }]
-                },
-                {
-                  "tag": "span",
-                  "class": "ui-status ui-status--warning",
-                  "children": [{ "tag": "span", "class": "ui-status__dot" }, { "text": "Away" }]
-                },
-                {
-                  "tag": "span",
-                  "class": "ui-status ui-status--danger",
-                  "children": [{ "tag": "span", "class": "ui-status__dot" }, { "text": "Busy" }]
-                },
-                {
-                  "tag": "span",
-                  "class": "ui-status ui-status--info",
-                  "children": [
-                    { "tag": "span", "class": "ui-status__dot" },
-                    { "text": "In a meeting" }
-                  ]
-                }
-              ]
-            }
-          ],
-          "code": "<span class=\"ui-status ui-status--success\">\n  <span class=\"ui-status__dot\"></span>\n  Online\n</span>"
-        }
-      ]
-    },
-    {
-      "title": "Sizes",
-      "examples": [
-        {
-          "items": [
-            {
-              "tag": "div",
-              "attrs": { "style": "display: flex; gap: var(--ui-space-4); align-items: center;" },
-              "children": [
-                {
-                  "tag": "span",
-                  "class": "ui-status ui-status--success ui-status--sm",
-                  "children": [{ "tag": "span", "class": "ui-status__dot" }, { "text": "Small" }]
-                },
-                {
-                  "tag": "span",
-                  "class": "ui-status ui-status--success",
-                  "children": [{ "tag": "span", "class": "ui-status__dot" }, { "text": "Default" }]
-                },
-                {
-                  "tag": "span",
-                  "class": "ui-status ui-status--success ui-status--lg",
-                  "children": [{ "tag": "span", "class": "ui-status__dot" }, { "text": "Large" }]
-                }
-              ]
-            }
-          ],
-          "code": "<span class=\"ui-status ui-status--sm\">...</span>\n<span class=\"ui-status\">...</span>\n<span class=\"ui-status ui-status--lg\">...</span>"
-        }
-      ]
-    },
-    {
-      "title": "Pulse Animation",
-      "description": "For live or active indicators",
-      "api": "./status.api.json",
-      "examples": [
-        {
-          "items": [
-            {
-              "tag": "span",
-              "class": "ui-status ui-status--success ui-status--pulse",
-              "children": [{ "tag": "span", "class": "ui-status__dot" }, { "text": "Live" }]
-            }
-          ],
-          "code": "<span class=\"ui-status ui-status--success ui-status--pulse\">\n  <span class=\"ui-status__dot\"></span>\n  Live\n</span>"
-        }
-      ]
-    },
-    {
-      "title": "Dot Only",
-      "examples": [
-        {
-          "items": [
-            {
-              "tag": "div",
-              "attrs": { "style": "display: flex; gap: var(--ui-space-2);" },
-              "children": [
-                {
-                  "tag": "span",
-                  "class": "ui-status ui-status--success",
-                  "children": [{ "tag": "span", "class": "ui-status__dot" }]
-                },
-                {
-                  "tag": "span",
-                  "class": "ui-status ui-status--warning",
-                  "children": [{ "tag": "span", "class": "ui-status__dot" }]
-                },
-                {
-                  "tag": "span",
-                  "class": "ui-status ui-status--danger",
-                  "children": [{ "tag": "span", "class": "ui-status__dot" }]
-                }
-              ]
-            }
-          ],
-          "code": "<span class=\"ui-status ui-status--success\">\n  <span class=\"ui-status__dot\"></span>\n</span>"
-        }
-      ]
-    }
-  ],
-  "customization": [
-    { "token": "--ui-status-size", "default": "var(--ui-unit)", "description": "Dot size" },
-    {
-      "token": "--ui-status-color",
-      "default": "var(--ui-color-text-muted)",
-      "description": "Default dot color"
-    },
-    {
-      "token": "--ui-status-gap",
-      "default": "var(--ui-unit)",
-      "description": "Gap between dot and text"
-    }
-  ]
-}