@teseor/css 1.14.2 → 1.15.0

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

@@ -1,307 +0,0 @@
-{
-  "id": "icon",
-  "type": "component",
-  "title": "Icon",
-  "description": "CSS classes for sizing and styling SVG icons. Works with any stroke-based icon set like Lucide, Heroicons, or Feather.",
-  "api": "./icon.api.json",
-  "sections": [
-    {
-      "title": "Basic Usage",
-      "description": "Add the `ui-icon` class to any SVG. Icons inherit color from their parent via `currentColor`.",
-      "api": "./icon.api.json",
-      "examples": [
-        {
-          "items": [
-            {
-              "tag": "svg",
-              "class": "ui-icon",
-              "attrs": { "xmlns": "http://www.w3.org/2000/svg", "viewBox": "0 0 24 24" },
-              "innerHTML": "<path d=\"M12 5v14M5 12h14\"/>"
-            }
-          ]
-        }
-      ]
-    },
-    {
-      "title": "With Lucide Icons",
-      "description": "Recommended icon set. Copy SVG from lucide.dev and add the ui-icon class.",
-      "api": "./icon.api.json",
-      "examples": [
-        {
-          "items": [
-            {
-              "tag": "div",
-              "class": "ui-row ui-row--gap-2",
-              "children": [
-                {
-                  "tag": "svg",
-                  "class": "ui-icon",
-                  "attrs": { "xmlns": "http://www.w3.org/2000/svg", "viewBox": "0 0 24 24" },
-                  "innerHTML": "<path d=\"m3 9 9-7 9 7v11a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2z\"/><polyline points=\"9 22 9 12 15 12 15 22\"/>"
-                },
-                {
-                  "tag": "svg",
-                  "class": "ui-icon",
-                  "attrs": { "xmlns": "http://www.w3.org/2000/svg", "viewBox": "0 0 24 24" },
-                  "innerHTML": "<circle cx=\"11\" cy=\"11\" r=\"8\"/><path d=\"m21 21-4.3-4.3\"/>"
-                },
-                {
-                  "tag": "svg",
-                  "class": "ui-icon",
-                  "attrs": { "xmlns": "http://www.w3.org/2000/svg", "viewBox": "0 0 24 24" },
-                  "innerHTML": "<path d=\"M6 8a6 6 0 0 1 12 0c0 7 3 9 3 9H3s3-2 3-9\"/><path d=\"M10.3 21a1.94 1.94 0 0 0 3.4 0\"/>"
-                },
-                {
-                  "tag": "svg",
-                  "class": "ui-icon",
-                  "attrs": { "xmlns": "http://www.w3.org/2000/svg", "viewBox": "0 0 24 24" },
-                  "innerHTML": "<path d=\"M19 21v-2a4 4 0 0 0-4-4H9a4 4 0 0 0-4 4v2\"/><circle cx=\"12\" cy=\"7\" r=\"4\"/>"
-                }
-              ]
-            }
-          ]
-        }
-      ]
-    },
-    {
-      "title": "Sizes",
-      "description": "Scale icons from extra small to extra large.",
-      "examples": [
-        {
-          "layout": "row",
-          "items": [
-            {
-              "tag": "div",
-              "class": "ui-column",
-              "style": { "align-items": "center", "gap": "var(--ui-space-1)" },
-              "children": [
-                {
-                  "tag": "svg",
-                  "class": "ui-icon ui-icon--xs",
-                  "attrs": { "xmlns": "http://www.w3.org/2000/svg", "viewBox": "0 0 24 24" },
-                  "innerHTML": "<circle cx=\"11\" cy=\"11\" r=\"8\"/><path d=\"m21 21-4.3-4.3\"/>"
-                },
-                { "tag": "small", "text": "xs" }
-              ]
-            },
-            {
-              "tag": "div",
-              "class": "ui-column",
-              "style": { "align-items": "center", "gap": "var(--ui-space-1)" },
-              "children": [
-                {
-                  "tag": "svg",
-                  "class": "ui-icon ui-icon--sm",
-                  "attrs": { "xmlns": "http://www.w3.org/2000/svg", "viewBox": "0 0 24 24" },
-                  "innerHTML": "<circle cx=\"11\" cy=\"11\" r=\"8\"/><path d=\"m21 21-4.3-4.3\"/>"
-                },
-                { "tag": "small", "text": "sm" }
-              ]
-            },
-            {
-              "tag": "div",
-              "class": "ui-column",
-              "style": { "align-items": "center", "gap": "var(--ui-space-1)" },
-              "children": [
-                {
-                  "tag": "svg",
-                  "class": "ui-icon ui-icon--md",
-                  "attrs": { "xmlns": "http://www.w3.org/2000/svg", "viewBox": "0 0 24 24" },
-                  "innerHTML": "<circle cx=\"11\" cy=\"11\" r=\"8\"/><path d=\"m21 21-4.3-4.3\"/>"
-                },
-                { "tag": "small", "text": "md" }
-              ]
-            },
-            {
-              "tag": "div",
-              "class": "ui-column",
-              "style": { "align-items": "center", "gap": "var(--ui-space-1)" },
-              "children": [
-                {
-                  "tag": "svg",
-                  "class": "ui-icon ui-icon--lg",
-                  "attrs": { "xmlns": "http://www.w3.org/2000/svg", "viewBox": "0 0 24 24" },
-                  "innerHTML": "<circle cx=\"11\" cy=\"11\" r=\"8\"/><path d=\"m21 21-4.3-4.3\"/>"
-                },
-                { "tag": "small", "text": "lg" }
-              ]
-            },
-            {
-              "tag": "div",
-              "class": "ui-column",
-              "style": { "align-items": "center", "gap": "var(--ui-space-1)" },
-              "children": [
-                {
-                  "tag": "svg",
-                  "class": "ui-icon ui-icon--xl",
-                  "attrs": { "xmlns": "http://www.w3.org/2000/svg", "viewBox": "0 0 24 24" },
-                  "innerHTML": "<circle cx=\"11\" cy=\"11\" r=\"8\"/><path d=\"m21 21-4.3-4.3\"/>"
-                },
-                { "tag": "small", "text": "xl" }
-              ]
-            }
-          ]
-        }
-      ]
-    },
-    {
-      "title": "Stroke Width",
-      "description": "Adjust stroke thickness for visual weight.",
-      "api": "./icon.api.json",
-      "examples": [
-        {
-          "items": [
-            {
-              "tag": "svg",
-              "class": "ui-icon ui-icon--lg ui-icon--stroke-thin",
-              "attrs": { "xmlns": "http://www.w3.org/2000/svg", "viewBox": "0 0 24 24" },
-              "innerHTML": "<circle cx=\"11\" cy=\"11\" r=\"8\"/><path d=\"m21 21-4.3-4.3\"/>"
-            },
-            {
-              "tag": "svg",
-              "class": "ui-icon ui-icon--lg",
-              "attrs": { "xmlns": "http://www.w3.org/2000/svg", "viewBox": "0 0 24 24" },
-              "innerHTML": "<circle cx=\"11\" cy=\"11\" r=\"8\"/><path d=\"m21 21-4.3-4.3\"/>"
-            },
-            {
-              "tag": "svg",
-              "class": "ui-icon ui-icon--lg ui-icon--stroke-thick",
-              "attrs": { "xmlns": "http://www.w3.org/2000/svg", "viewBox": "0 0 24 24" },
-              "innerHTML": "<circle cx=\"11\" cy=\"11\" r=\"8\"/><path d=\"m21 21-4.3-4.3\"/>"
-            }
-          ],
-          "layout": "row"
-        }
-      ]
-    },
-    {
-      "title": "Filled Icons",
-      "description": "For solid icons, use the `--filled` modifier.",
-      "api": "./icon.api.json",
-      "examples": [
-        {
-          "items": [
-            {
-              "tag": "svg",
-              "class": "ui-icon ui-icon--lg",
-              "attrs": { "xmlns": "http://www.w3.org/2000/svg", "viewBox": "0 0 24 24" },
-              "innerHTML": "<path d=\"M19 14c1.49-1.46 3-3.21 3-5.5A5.5 5.5 0 0 0 16.5 3c-1.76 0-3 .5-4.5 2-1.5-1.5-2.74-2-4.5-2A5.5 5.5 0 0 0 2 8.5c0 2.3 1.5 4.05 3 5.5l7 7Z\"/>"
-            },
-            {
-              "tag": "svg",
-              "class": "ui-icon ui-icon--lg ui-icon--filled",
-              "attrs": { "xmlns": "http://www.w3.org/2000/svg", "viewBox": "0 0 24 24" },
-              "innerHTML": "<path d=\"M19 14c1.49-1.46 3-3.21 3-5.5A5.5 5.5 0 0 0 16.5 3c-1.76 0-3 .5-4.5 2-1.5-1.5-2.74-2-4.5-2A5.5 5.5 0 0 0 2 8.5c0 2.3 1.5 4.05 3 5.5l7 7Z\"/>"
-            }
-          ],
-          "layout": "row"
-        }
-      ]
-    },
-    {
-      "title": "Spin Animation",
-      "description": "Use `--spin` for loading indicators.",
-      "api": "./icon.api.json",
-      "examples": [
-        {
-          "items": [
-            {
-              "tag": "svg",
-              "class": "ui-icon ui-icon--lg ui-icon--spin",
-              "attrs": { "xmlns": "http://www.w3.org/2000/svg", "viewBox": "0 0 24 24" },
-              "innerHTML": "<path d=\"M21 12a9 9 0 1 1-6.219-8.56\"/>"
-            }
-          ]
-        }
-      ]
-    },
-    {
-      "title": "Color Inheritance",
-      "description": "Icons inherit color from parent text color.",
-      "api": "./icon.api.json",
-      "examples": [
-        {
-          "items": [
-            {
-              "tag": "div",
-              "class": "ui-row ui-row--gap-2",
-              "children": [
-                {
-                  "tag": "span",
-                  "attrs": { "style": "color: var(--ui-color-primary)" },
-                  "children": [
-                    {
-                      "tag": "svg",
-                      "class": "ui-icon ui-icon--lg",
-                      "attrs": { "xmlns": "http://www.w3.org/2000/svg", "viewBox": "0 0 24 24" },
-                      "innerHTML": "<circle cx=\"11\" cy=\"11\" r=\"8\"/><path d=\"m21 21-4.3-4.3\"/>"
-                    }
-                  ]
-                },
-                {
-                  "tag": "span",
-                  "attrs": { "style": "color: var(--ui-color-success)" },
-                  "children": [
-                    {
-                      "tag": "svg",
-                      "class": "ui-icon ui-icon--lg",
-                      "attrs": { "xmlns": "http://www.w3.org/2000/svg", "viewBox": "0 0 24 24" },
-                      "innerHTML": "<circle cx=\"11\" cy=\"11\" r=\"8\"/><path d=\"m21 21-4.3-4.3\"/>"
-                    }
-                  ]
-                },
-                {
-                  "tag": "span",
-                  "attrs": { "style": "color: var(--ui-color-danger)" },
-                  "children": [
-                    {
-                      "tag": "svg",
-                      "class": "ui-icon ui-icon--lg",
-                      "attrs": { "xmlns": "http://www.w3.org/2000/svg", "viewBox": "0 0 24 24" },
-                      "innerHTML": "<circle cx=\"11\" cy=\"11\" r=\"8\"/><path d=\"m21 21-4.3-4.3\"/>"
-                    }
-                  ]
-                }
-              ]
-            }
-          ]
-        }
-      ]
-    }
-  ],
-  "customization": [
-    {
-      "token": "--ui-icon-size",
-      "default": "var(--ui-ctx-size, 1rem)",
-      "description": "3-tier: global > context > default"
-    },
-    {
-      "token": "--ui-icon-size-xs",
-      "default": "var(--ui-size-xs)",
-      "description": "Extra small size"
-    },
-    {
-      "token": "--ui-icon-size-sm",
-      "default": "var(--ui-size-sm)",
-      "description": "Small size"
-    },
-    {
-      "token": "--ui-icon-size-md",
-      "default": "var(--ui-size-md)",
-      "description": "Medium size"
-    },
-    {
-      "token": "--ui-icon-size-lg",
-      "default": "var(--ui-size-lg)",
-      "description": "Large size"
-    },
-    {
-      "token": "--ui-icon-size-xl",
-      "default": "var(--ui-size-xl)",
-      "description": "Extra large size"
-    },
-    { "token": "--ui-icon-stroke", "default": "2", "description": "Default stroke width" },
-    { "token": "--ui-icon-stroke-thin", "default": "1", "description": "Thin stroke width" },
-    { "token": "--ui-icon-stroke-thick", "default": "2.5", "description": "Thick stroke width" }
-  ]
-}

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"
-    }
-  ]
-}