@teseor/css 1.14.3 → 1.15.0

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

@@ -1,259 +0,0 @@
-{
-  "id": "data-list",
-  "type": "component",
-  "title": "Data List",
-  "api": "./data-list.api.json",
-  "sections": [
-    {
-      "title": "Default",
-      "examples": [
-        {
-          "items": [
-            {
-              "tag": "dl",
-              "class": "ui-data-list",
-              "children": [
-                {
-                  "tag": "div",
-                  "class": "ui-data-list__item",
-                  "children": [
-                    { "tag": "dt", "class": "ui-data-list__label", "text": "Name" },
-                    { "tag": "dd", "class": "ui-data-list__value", "text": "John Doe" }
-                  ]
-                },
-                {
-                  "tag": "div",
-                  "class": "ui-data-list__item",
-                  "children": [
-                    { "tag": "dt", "class": "ui-data-list__label", "text": "Email" },
-                    { "tag": "dd", "class": "ui-data-list__value", "text": "john@example.com" }
-                  ]
-                },
-                {
-                  "tag": "div",
-                  "class": "ui-data-list__item",
-                  "children": [
-                    { "tag": "dt", "class": "ui-data-list__label", "text": "Role" },
-                    { "tag": "dd", "class": "ui-data-list__value", "text": "Administrator" }
-                  ]
-                }
-              ]
-            }
-          ]
-        }
-      ]
-    },
-    {
-      "title": "Horizontal Layout",
-      "description": "Side-by-side label and value",
-      "examples": [
-        {
-          "items": [
-            {
-              "tag": "dl",
-              "class": "ui-data-list ui-data-list--horizontal",
-              "children": [
-                {
-                  "tag": "div",
-                  "class": "ui-data-list__item",
-                  "children": [
-                    { "tag": "dt", "class": "ui-data-list__label", "text": "Status" },
-                    { "tag": "dd", "class": "ui-data-list__value", "text": "Active" }
-                  ]
-                },
-                {
-                  "tag": "div",
-                  "class": "ui-data-list__item",
-                  "children": [
-                    { "tag": "dt", "class": "ui-data-list__label", "text": "Created" },
-                    { "tag": "dd", "class": "ui-data-list__value", "text": "Dec 8, 2025" }
-                  ]
-                },
-                {
-                  "tag": "div",
-                  "class": "ui-data-list__item",
-                  "children": [
-                    { "tag": "dt", "class": "ui-data-list__label", "text": "Updated" },
-                    { "tag": "dd", "class": "ui-data-list__value", "text": "Dec 8, 2025" }
-                  ]
-                }
-              ]
-            }
-          ]
-        }
-      ]
-    },
-    {
-      "title": "Divided",
-      "description": "With separator lines between items",
-      "examples": [
-        {
-          "items": [
-            {
-              "tag": "dl",
-              "class": "ui-data-list ui-data-list--divided",
-              "children": [
-                {
-                  "tag": "div",
-                  "class": "ui-data-list__item",
-                  "children": [
-                    { "tag": "dt", "class": "ui-data-list__label", "text": "Order ID" },
-                    { "tag": "dd", "class": "ui-data-list__value", "text": "#12345" }
-                  ]
-                },
-                {
-                  "tag": "div",
-                  "class": "ui-data-list__item",
-                  "children": [
-                    { "tag": "dt", "class": "ui-data-list__label", "text": "Total" },
-                    { "tag": "dd", "class": "ui-data-list__value", "text": "$99.00" }
-                  ]
-                },
-                {
-                  "tag": "div",
-                  "class": "ui-data-list__item",
-                  "children": [
-                    { "tag": "dt", "class": "ui-data-list__label", "text": "Payment" },
-                    { "tag": "dd", "class": "ui-data-list__value", "text": "Credit Card" }
-                  ]
-                }
-              ]
-            }
-          ]
-        }
-      ]
-    },
-    {
-      "title": "Striped",
-      "description": "Alternating background for readability",
-      "examples": [
-        {
-          "items": [
-            {
-              "tag": "dl",
-              "class": "ui-data-list ui-data-list--striped",
-              "children": [
-                {
-                  "tag": "div",
-                  "class": "ui-data-list__item",
-                  "children": [
-                    { "tag": "dt", "class": "ui-data-list__label", "text": "CPU" },
-                    { "tag": "dd", "class": "ui-data-list__value", "text": "Intel i7" }
-                  ]
-                },
-                {
-                  "tag": "div",
-                  "class": "ui-data-list__item",
-                  "children": [
-                    { "tag": "dt", "class": "ui-data-list__label", "text": "Memory" },
-                    { "tag": "dd", "class": "ui-data-list__value", "text": "16 GB" }
-                  ]
-                },
-                {
-                  "tag": "div",
-                  "class": "ui-data-list__item",
-                  "children": [
-                    { "tag": "dt", "class": "ui-data-list__label", "text": "Storage" },
-                    { "tag": "dd", "class": "ui-data-list__value", "text": "512 GB SSD" }
-                  ]
-                },
-                {
-                  "tag": "div",
-                  "class": "ui-data-list__item",
-                  "children": [
-                    { "tag": "dt", "class": "ui-data-list__label", "text": "Display" },
-                    { "tag": "dd", "class": "ui-data-list__value", "text": "14\" Retina" }
-                  ]
-                }
-              ]
-            }
-          ]
-        }
-      ]
-    },
-    {
-      "title": "Sizes",
-      "examples": [
-        {
-          "items": [
-            {
-              "tag": "dl",
-              "class": "ui-data-list ui-data-list--sm",
-              "children": [
-                {
-                  "tag": "div",
-                  "class": "ui-data-list__item",
-                  "children": [
-                    { "tag": "dt", "class": "ui-data-list__label", "text": "Small" },
-                    { "tag": "dd", "class": "ui-data-list__value", "text": "Compact display" }
-                  ]
-                }
-              ]
-            }
-          ],
-          "layout": "column"
-        },
-        {
-          "items": [
-            {
-              "tag": "dl",
-              "class": "ui-data-list",
-              "children": [
-                {
-                  "tag": "div",
-                  "class": "ui-data-list__item",
-                  "children": [
-                    { "tag": "dt", "class": "ui-data-list__label", "text": "Default" },
-                    { "tag": "dd", "class": "ui-data-list__value", "text": "Standard display" }
-                  ]
-                }
-              ]
-            }
-          ],
-          "layout": "column"
-        },
-        {
-          "items": [
-            {
-              "tag": "dl",
-              "class": "ui-data-list ui-data-list--lg",
-              "children": [
-                {
-                  "tag": "div",
-                  "class": "ui-data-list__item",
-                  "children": [
-                    { "tag": "dt", "class": "ui-data-list__label", "text": "Large" },
-                    { "tag": "dd", "class": "ui-data-list__value", "text": "Spacious display" }
-                  ]
-                }
-              ]
-            }
-          ],
-          "layout": "column"
-        }
-      ]
-    }
-  ],
-  "customization": [
-    {
-      "token": "--ui-data-list-gap",
-      "default": "calc(var(--ui-unit) * 2)",
-      "description": "Gap between items"
-    },
-    {
-      "token": "--ui-data-list-item-gap",
-      "default": "var(--ui-unit)",
-      "description": "Gap between label and value"
-    },
-    {
-      "token": "--ui-data-list-label-color",
-      "default": "var(--ui-color-text-muted)",
-      "description": "Label color"
-    },
-    {
-      "token": "--ui-data-list-value-color",
-      "default": "var(--ui-color-text)",
-      "description": "Value color"
-    }
-  ]
-}

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