@teseor/css 1.14.3 → 1.15.0

package/src/components/content/spacer/spacer.docs.json

@@ -1,102 +0,0 @@
-{
-  "id": "spacer",
-  "type": "component",
-  "title": "Spacer",
-  "description": "Flexible space filler that grows to fill available space in flex containers.",
-  "api": "./spacer.api.json",
-  "sections": [
-    {
-      "title": "Default",
-      "examples": [
-        {
-          "items": [
-            {
-              "tag": "div",
-              "class": "ui-row",
-              "style": {
-                "inline-size": "100%",
-                "background": "var(--ui-color-bg-subtle)",
-                "padding": "var(--ui-space-2)"
-              },
-              "children": [
-                {
-                  "tag": "span",
-                  "text": "Start",
-                  "style": {
-                    "background": "var(--ui-color-bg-muted)",
-                    "padding": "var(--ui-space-1)"
-                  }
-                },
-                { "tag": "div", "class": "ui-spacer" },
-                {
-                  "tag": "span",
-                  "text": "End",
-                  "style": {
-                    "background": "var(--ui-color-bg-muted)",
-                    "padding": "var(--ui-space-1)"
-                  }
-                }
-              ]
-            }
-          ]
-        }
-      ]
-    },
-    {
-      "title": "Between items",
-      "examples": [
-        {
-          "items": [
-            {
-              "tag": "div",
-              "class": "ui-row",
-              "style": {
-                "inline-size": "100%",
-                "background": "var(--ui-color-bg-subtle)",
-                "padding": "var(--ui-space-2)"
-              },
-              "children": [
-                {
-                  "tag": "span",
-                  "text": "Logo",
-                  "style": {
-                    "background": "var(--ui-color-bg-muted)",
-                    "padding": "var(--ui-space-1)"
-                  }
-                },
-                { "tag": "div", "class": "ui-spacer" },
-                {
-                  "tag": "span",
-                  "text": "Nav 1",
-                  "style": {
-                    "background": "var(--ui-color-bg-muted)",
-                    "padding": "var(--ui-space-1)"
-                  }
-                },
-                {
-                  "tag": "span",
-                  "text": "Nav 2",
-                  "style": {
-                    "background": "var(--ui-color-bg-muted)",
-                    "padding": "var(--ui-space-1)"
-                  }
-                },
-                {
-                  "tag": "span",
-                  "text": "Nav 3",
-                  "style": {
-                    "background": "var(--ui-color-bg-muted)",
-                    "padding": "var(--ui-space-1)"
-                  }
-                }
-              ]
-            }
-          ]
-        }
-      ]
-    }
-  ],
-  "customization": [
-    { "token": "--ui-spacer-size", "default": "1", "description": "Flex grow factor" }
-  ]
-}

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

@@ -1,245 +0,0 @@
-{
-  "id": "avatar",
-  "type": "component",
-  "title": "Avatar",
-  "description": "User or entity thumbnail representation. Supports image with fallback to initials.",
-  "api": "./avatar.api.json",
-  "sections": [
-    {
-      "title": "Default",
-      "examples": [
-        {
-          "layout": "row",
-          "items": [
-            {
-              "tag": "div",
-              "class": "ui-avatar",
-              "children": [{ "tag": "span", "class": "ui-avatar__fallback", "text": "JD" }]
-            },
-            {
-              "tag": "div",
-              "class": "ui-avatar",
-              "children": [
-                {
-                  "tag": "img",
-                  "class": "ui-avatar__image",
-                  "attrs": { "src": "https://i.pravatar.cc/80?u=1", "alt": "User" }
-                }
-              ]
-            }
-          ],
-          "code": "<div class=\"ui-avatar\">\n  <span class=\"ui-avatar__fallback\">JD</span>\n</div>\n\n<div class=\"ui-avatar\">\n  <img class=\"ui-avatar__image\" src=\"...\" alt=\"User\">\n</div>"
-        }
-      ]
-    },
-    {
-      "title": "Sizes",
-      "examples": [
-        {
-          "layout": "row",
-          "items": [
-            {
-              "tag": "div",
-              "class": "ui-avatar ui-avatar--xs",
-              "children": [{ "tag": "span", "class": "ui-avatar__fallback", "text": "XS" }]
-            },
-            {
-              "tag": "div",
-              "class": "ui-avatar ui-avatar--sm",
-              "children": [{ "tag": "span", "class": "ui-avatar__fallback", "text": "SM" }]
-            },
-            {
-              "tag": "div",
-              "class": "ui-avatar",
-              "children": [{ "tag": "span", "class": "ui-avatar__fallback", "text": "MD" }]
-            },
-            {
-              "tag": "div",
-              "class": "ui-avatar ui-avatar--lg",
-              "children": [{ "tag": "span", "class": "ui-avatar__fallback", "text": "LG" }]
-            },
-            {
-              "tag": "div",
-              "class": "ui-avatar ui-avatar--xl",
-              "children": [{ "tag": "span", "class": "ui-avatar__fallback", "text": "XL" }]
-            }
-          ],
-          "code": "<div class=\"ui-avatar ui-avatar--xs\"><span class=\"ui-avatar__fallback\">XS</span></div>\n<div class=\"ui-avatar ui-avatar--sm\"><span class=\"ui-avatar__fallback\">SM</span></div>\n<div class=\"ui-avatar\"><span class=\"ui-avatar__fallback\">MD</span></div>\n<div class=\"ui-avatar ui-avatar--lg\"><span class=\"ui-avatar__fallback\">LG</span></div>\n<div class=\"ui-avatar ui-avatar--xl\"><span class=\"ui-avatar__fallback\">XL</span></div>"
-        }
-      ]
-    },
-    {
-      "title": "Square Shape",
-      "examples": [
-        {
-          "layout": "row",
-          "items": [
-            {
-              "tag": "div",
-              "class": "ui-avatar ui-avatar--square",
-              "children": [{ "tag": "span", "class": "ui-avatar__fallback", "text": "ORG" }]
-            },
-            {
-              "tag": "div",
-              "class": "ui-avatar ui-avatar--square",
-              "children": [
-                {
-                  "tag": "img",
-                  "class": "ui-avatar__image",
-                  "attrs": { "src": "https://i.pravatar.cc/80?u=org", "alt": "Org" }
-                }
-              ]
-            }
-          ],
-          "code": "<div class=\"ui-avatar ui-avatar--square\">\n  <span class=\"ui-avatar__fallback\">ORG</span>\n</div>"
-        }
-      ]
-    },
-    {
-      "title": "With Images",
-      "examples": [
-        {
-          "layout": "row",
-          "items": [
-            {
-              "tag": "div",
-              "class": "ui-avatar ui-avatar--sm",
-              "children": [
-                {
-                  "tag": "img",
-                  "class": "ui-avatar__image",
-                  "attrs": { "src": "https://i.pravatar.cc/64?u=a", "alt": "User A" }
-                }
-              ]
-            },
-            {
-              "tag": "div",
-              "class": "ui-avatar",
-              "children": [
-                {
-                  "tag": "img",
-                  "class": "ui-avatar__image",
-                  "attrs": { "src": "https://i.pravatar.cc/80?u=b", "alt": "User B" }
-                }
-              ]
-            },
-            {
-              "tag": "div",
-              "class": "ui-avatar ui-avatar--lg",
-              "children": [
-                {
-                  "tag": "img",
-                  "class": "ui-avatar__image",
-                  "attrs": { "src": "https://i.pravatar.cc/96?u=c", "alt": "User C" }
-                }
-              ]
-            }
-          ],
-          "code": "<div class=\"ui-avatar\">\n  <img class=\"ui-avatar__image\" src=\"...\" alt=\"User\">\n</div>"
-        }
-      ]
-    },
-    {
-      "title": "Avatar Group",
-      "examples": [
-        {
-          "items": [
-            {
-              "tag": "div",
-              "class": "ui-avatar-group",
-              "children": [
-                {
-                  "tag": "div",
-                  "class": "ui-avatar",
-                  "children": [
-                    {
-                      "tag": "img",
-                      "class": "ui-avatar__image",
-                      "attrs": { "src": "https://i.pravatar.cc/80?u=g1", "alt": "" }
-                    }
-                  ]
-                },
-                {
-                  "tag": "div",
-                  "class": "ui-avatar",
-                  "children": [
-                    {
-                      "tag": "img",
-                      "class": "ui-avatar__image",
-                      "attrs": { "src": "https://i.pravatar.cc/80?u=g2", "alt": "" }
-                    }
-                  ]
-                },
-                {
-                  "tag": "div",
-                  "class": "ui-avatar",
-                  "children": [
-                    {
-                      "tag": "img",
-                      "class": "ui-avatar__image",
-                      "attrs": { "src": "https://i.pravatar.cc/80?u=g3", "alt": "" }
-                    }
-                  ]
-                },
-                {
-                  "tag": "div",
-                  "class": "ui-avatar",
-                  "children": [{ "tag": "span", "class": "ui-avatar__fallback", "text": "+5" }]
-                }
-              ]
-            }
-          ],
-          "code": "<div class=\"ui-avatar-group\">\n  <div class=\"ui-avatar\">\n    <img class=\"ui-avatar__image\" src=\"...\" alt=\"\">\n  </div>\n  <div class=\"ui-avatar\">\n    <img class=\"ui-avatar__image\" src=\"...\" alt=\"\">\n  </div>\n  <div class=\"ui-avatar\">\n    <span class=\"ui-avatar__fallback\">+5</span>\n  </div>\n</div>"
-        }
-      ]
-    }
-  ],
-  "customization": [
-    {
-      "token": "--ui-avatar-size",
-      "default": "calc(var(--ui-unit) * 5)",
-      "description": "Default size"
-    },
-    {
-      "token": "--ui-avatar-size-xs",
-      "default": "calc(var(--ui-unit) * 3)",
-      "description": "Extra small size"
-    },
-    {
-      "token": "--ui-avatar-size-sm",
-      "default": "calc(var(--ui-unit) * 4)",
-      "description": "Small size"
-    },
-    {
-      "token": "--ui-avatar-size-lg",
-      "default": "calc(var(--ui-unit) * 6)",
-      "description": "Large size"
-    },
-    {
-      "token": "--ui-avatar-size-xl",
-      "default": "calc(var(--ui-unit) * 8)",
-      "description": "Extra large size"
-    },
-    {
-      "token": "--ui-avatar-bg",
-      "default": "var(--ui-color-bg-subtle)",
-      "description": "Background color"
-    },
-    {
-      "token": "--ui-avatar-color",
-      "default": "var(--ui-color-text-muted)",
-      "description": "Text color"
-    },
-    {
-      "token": "--ui-avatar-font-size",
-      "default": "var(--ui-font-size-sm)",
-      "description": "Font size"
-    },
-    { "token": "--ui-avatar-radius", "default": "50%", "description": "Border radius" },
-    {
-      "token": "--ui-avatar-radius-square",
-      "default": "var(--ui-radius-md)",
-      "description": "Square variant radius"
-    }
-  ]
-}

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

@@ -1,114 +0,0 @@
-{
-  "id": "badge",
-  "type": "component",
-  "title": "Badge",
-  "description": "Inline labels for status indicators, counts, and categories",
-  "api": "./badge.api.json",
-  "sections": [
-    {
-      "title": "Default",
-      "examples": [
-        {
-          "items": [{ "tag": "span", "class": "ui-badge", "text": "Default" }]
-        }
-      ]
-    },
-    {
-      "title": "Variants",
-      "examples": [
-        {
-          "items": [
-            { "tag": "span", "class": "ui-badge", "text": "Default" },
-            { "tag": "span", "class": "ui-badge ui-badge--primary", "text": "Primary" },
-            { "tag": "span", "class": "ui-badge ui-badge--success", "text": "Success" },
-            { "tag": "span", "class": "ui-badge ui-badge--warning", "text": "Warning" },
-            { "tag": "span", "class": "ui-badge ui-badge--danger", "text": "Danger" }
-          ],
-          "layout": "row"
-        }
-      ]
-    },
-    {
-      "title": "Sizes",
-      "examples": [
-        {
-          "items": [
-            { "tag": "span", "class": "ui-badge ui-badge--sm", "text": "Small" },
-            { "tag": "span", "class": "ui-badge", "text": "Default" },
-            { "tag": "span", "class": "ui-badge ui-badge--lg", "text": "Large" }
-          ],
-          "layout": "row"
-        }
-      ]
-    },
-    {
-      "title": "Use Cases",
-      "examples": [
-        {
-          "items": [
-            {
-              "tag": "div",
-              "class": "ui-row",
-              "children": [
-                { "tag": "span", "text": "Notifications" },
-                { "tag": "span", "class": "ui-badge ui-badge--primary", "text": "5" }
-              ]
-            }
-          ]
-        },
-        {
-          "items": [
-            {
-              "tag": "div",
-              "class": "ui-row",
-              "children": [
-                { "tag": "span", "class": "ui-badge ui-badge--success", "text": "Published" },
-                { "tag": "span", "class": "ui-badge ui-badge--warning", "text": "Draft" },
-                { "tag": "span", "class": "ui-badge ui-badge--danger", "text": "Archived" }
-              ]
-            }
-          ]
-        }
-      ]
-    }
-  ],
-  "customization": [
-    {
-      "token": "--ui-badge-height",
-      "default": "calc(var(--ui-row) * 1.25)",
-      "description": "Default height"
-    },
-    { "token": "--ui-badge-height-sm", "default": "var(--ui-row)", "description": "Small height" },
-    {
-      "token": "--ui-badge-height-lg",
-      "default": "calc(var(--ui-row) * 1.5)",
-      "description": "Large height"
-    },
-    {
-      "token": "--ui-badge-padding-x",
-      "default": "var(--ui-space-1)",
-      "description": "Horizontal padding"
-    },
-    {
-      "token": "--ui-badge-font-size",
-      "default": "var(--ui-font-size-xs)",
-      "description": "Font size"
-    },
-    {
-      "token": "--ui-badge-font-weight",
-      "default": "var(--ui-weight-medium)",
-      "description": "Font weight"
-    },
-    {
-      "token": "--ui-badge-radius",
-      "default": "var(--ui-radius-full)",
-      "description": "Border radius"
-    },
-    {
-      "token": "--ui-badge-bg",
-      "default": "var(--ui-color-bg-muted)",
-      "description": "Background color"
-    },
-    { "token": "--ui-badge-color", "default": "var(--ui-color-text)", "description": "Text color" }
-  ]
-}

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

@@ -1,229 +0,0 @@
-{
-  "id": "card",
-  "type": "component",
-  "title": "Card",
-  "api": "./card.api.json",
-  "sections": [
-    {
-      "title": "Default",
-      "examples": [
-        {
-          "items": [
-            {
-              "tag": "div",
-              "class": "ui-card",
-              "text": "Default card with padding and border"
-            }
-          ],
-          "code": "<div class=\"ui-card\">Content</div>"
-        }
-      ]
-    },
-    {
-      "title": "Background Variants",
-      "data": {
-        "variants": [
-          {
-            "mod": "",
-            "label": "Default background"
-          },
-          {
-            "mod": "subtle",
-            "label": "Subtle background"
-          },
-          {
-            "mod": "muted",
-            "label": "Muted background"
-          }
-        ]
-      },
-      "examples": [
-        {
-          "layout": "column",
-          "items": [
-            {
-              "tag": "div",
-              "class": "ui-card",
-              "text": "Default background"
-            },
-            {
-              "tag": "div",
-              "class": "ui-card ui-card--subtle",
-              "text": "Subtle background"
-            },
-            {
-              "tag": "div",
-              "class": "ui-card ui-card--muted",
-              "text": "Muted background"
-            }
-          ],
-          "code": "{% for v in variants %}<div class=\"ui-card{% if v.mod %} ui-card--{{ v.mod }}{% endif %}\">{{ v.label }}</div>\n{% endfor %}"
-        }
-      ]
-    },
-    {
-      "title": "Padding Variants",
-      "data": {
-        "sizes": [
-          {
-            "mod": "sm",
-            "label": "Small padding"
-          },
-          {
-            "mod": "",
-            "label": "Default padding"
-          },
-          {
-            "mod": "lg",
-            "label": "Large padding"
-          },
-          {
-            "mod": "flush",
-            "label": "No padding (flush)"
-          }
-        ]
-      },
-      "examples": [
-        {
-          "layout": "column",
-          "items": [
-            {
-              "tag": "div",
-              "class": "ui-card ui-card--sm",
-              "text": "Small padding"
-            },
-            {
-              "tag": "div",
-              "class": "ui-card",
-              "text": "Default padding"
-            },
-            {
-              "tag": "div",
-              "class": "ui-card ui-card--lg",
-              "text": "Large padding"
-            },
-            {
-              "tag": "div",
-              "class": "ui-card ui-card--flush",
-              "text": "No padding (flush)"
-            }
-          ],
-          "code": "{% for s in sizes %}<div class=\"ui-card{% if s.mod %} ui-card--{{ s.mod }}{% endif %}\">{{ s.label }}</div>\n{% endfor %}"
-        }
-      ]
-    },
-    {
-      "title": "Interactive",
-      "examples": [
-        {
-          "layout": "column",
-          "items": [
-            {
-              "tag": "div",
-              "class": "ui-card ui-card--interactive",
-              "text": "Hover and click this card"
-            },
-            {
-              "tag": "div",
-              "class": "ui-card ui-card--interactive ui-card--subtle",
-              "text": "Interactive subtle card"
-            }
-          ],
-          "code": "<div class=\"ui-card ui-card--interactive\">Clickable card</div>"
-        }
-      ]
-    },
-    {
-      "title": "Responsive (Container Query)",
-      "description": "Switches to horizontal layout when container is wide enough. Requires a parent with container-type: inline-size (use ui-container-inline utility).",
-      "examples": [
-        {
-          "items": [
-            {
-              "tag": "div",
-              "class": "ui-container-inline",
-              "children": [
-                {
-                  "tag": "div",
-                  "class": "ui-card ui-card--responsive",
-                  "children": [
-                    {
-                      "tag": "div",
-                      "class": "ui-card__media",
-                      "style": {
-                        "background": "var(--ui-color-bg-muted)",
-                        "min-block-size": "6rem"
-                      }
-                    },
-                    {
-                      "tag": "div",
-                      "class": "ui-card__body",
-                      "children": [
-                        {
-                          "tag": "strong",
-                          "text": "Responsive Card"
-                        },
-                        {
-                          "tag": "p",
-                          "text": "Stacks vertically in narrow containers, switches to side-by-side at >= 30rem."
-                        }
-                      ]
-                    }
-                  ]
-                }
-              ]
-            }
-          ],
-          "code": "<div class=\"ui-container-inline\">\n  <div class=\"ui-card ui-card--responsive\">\n    <div class=\"ui-card__media\">Image</div>\n    <div class=\"ui-card__body\">Content</div>\n  </div>\n</div>"
-        }
-      ]
-    }
-  ],
-  "customization": [
-    {
-      "token": "--ui-card-padding",
-      "default": "var(--ui-space-4)",
-      "description": "Default padding"
-    },
-    {
-      "token": "--ui-card-padding-sm",
-      "default": "var(--ui-space-2)",
-      "description": "Small padding"
-    },
-    {
-      "token": "--ui-card-padding-lg",
-      "default": "var(--ui-space-6)",
-      "description": "Large padding"
-    },
-    {
-      "token": "--ui-card-border-width",
-      "default": "var(--ui-border-width-sm)",
-      "description": "Border width"
-    },
-    {
-      "token": "--ui-card-border-color",
-      "default": "var(--ui-color-border)",
-      "description": "Border color"
-    },
-    {
-      "token": "--ui-card-bg",
-      "default": "var(--ui-color-bg)",
-      "description": "Background color"
-    },
-    {
-      "token": "--ui-card-bg-subtle",
-      "default": "var(--ui-color-bg-subtle)",
-      "description": "Subtle background"
-    },
-    {
-      "token": "--ui-card-bg-muted",
-      "default": "var(--ui-color-bg-muted)",
-      "description": "Muted background"
-    },
-    {
-      "token": "--ui-card-radius",
-      "default": "var(--ui-radius-md)",
-      "description": "Border radius"
-    }
-  ]
-}