@teseor/css 1.14.3 → 1.15.1

package/src/components/typography/code-block/code-block.docs.json

@@ -1,308 +0,0 @@
-{
-  "id": "code-block",
-  "type": "component",
-  "mergeInto": "code",
-  "title": "Code Block",
-  "description": "Multi-line code display with monospace font, horizontal scroll, and optional line numbers.",
-  "api": "./code-block.api.json",
-  "sections": [
-    {
-      "title": "Default",
-      "examples": [
-        {
-          "items": [
-            {
-              "tag": "pre",
-              "class": "ui-code-block",
-              "children": [
-                {
-                  "tag": "code",
-                  "class": "ui-code-block__code",
-                  "text": ".button {\n  display: inline-flex;\n  align-items: center;\n  gap: var(--ui-space-1);\n}"
-                }
-              ]
-            }
-          ]
-        }
-      ]
-    },
-    {
-      "title": "Horizontal overflow",
-      "examples": [
-        {
-          "items": [
-            {
-              "tag": "pre",
-              "class": "ui-code-block",
-              "children": [
-                {
-                  "tag": "code",
-                  "class": "ui-code-block__code",
-                  "text": "export function calculateGridRhythm(element: HTMLElement, unit: number): { violations: string[]; totalHeight: number } {\n  const computed = getComputedStyle(element);\n  return { violations: [], totalHeight: parseFloat(computed.height) };\n}"
-                }
-              ]
-            }
-          ]
-        }
-      ]
-    },
-    {
-      "title": "Compact",
-      "examples": [
-        {
-          "items": [
-            {
-              "tag": "pre",
-              "class": "ui-code-block ui-code-block--compact",
-              "children": [
-                {
-                  "tag": "code",
-                  "class": "ui-code-block__code",
-                  "text": "npm install @teseor/css\nimport \"@teseor/css/dist/index.css\";"
-                }
-              ]
-            }
-          ]
-        }
-      ]
-    },
-    {
-      "title": "Line numbers",
-      "examples": [
-        {
-          "items": [
-            {
-              "tag": "pre",
-              "class": "ui-code-block ui-code-block--line-numbers",
-              "children": [
-                {
-                  "tag": "code",
-                  "class": "ui-code-block__code",
-                  "children": [
-                    {
-                      "tag": "span",
-                      "class": "ui-code-block__line",
-                      "children": [
-                        {
-                          "tag": "span",
-                          "class": "ui-code-block__line-number"
-                        },
-                        {
-                          "tag": "span",
-                          "text": "@layer components {"
-                        }
-                      ]
-                    },
-                    {
-                      "tag": "span",
-                      "class": "ui-code-block__line",
-                      "children": [
-                        {
-                          "tag": "span",
-                          "class": "ui-code-block__line-number"
-                        },
-                        {
-                          "tag": "span",
-                          "text": "  .card {"
-                        }
-                      ]
-                    },
-                    {
-                      "tag": "span",
-                      "class": "ui-code-block__line",
-                      "children": [
-                        {
-                          "tag": "span",
-                          "class": "ui-code-block__line-number"
-                        },
-                        {
-                          "tag": "span",
-                          "text": "    padding: var(--_padding);"
-                        }
-                      ]
-                    },
-                    {
-                      "tag": "span",
-                      "class": "ui-code-block__line",
-                      "children": [
-                        {
-                          "tag": "span",
-                          "class": "ui-code-block__line-number"
-                        },
-                        {
-                          "tag": "span",
-                          "text": "    background: var(--_bg);"
-                        }
-                      ]
-                    },
-                    {
-                      "tag": "span",
-                      "class": "ui-code-block__line",
-                      "children": [
-                        {
-                          "tag": "span",
-                          "class": "ui-code-block__line-number"
-                        },
-                        {
-                          "tag": "span",
-                          "text": "    border-radius: var(--_radius);"
-                        }
-                      ]
-                    },
-                    {
-                      "tag": "span",
-                      "class": "ui-code-block__line",
-                      "children": [
-                        {
-                          "tag": "span",
-                          "class": "ui-code-block__line-number"
-                        },
-                        {
-                          "tag": "span",
-                          "text": "  }"
-                        }
-                      ]
-                    },
-                    {
-                      "tag": "span",
-                      "class": "ui-code-block__line",
-                      "children": [
-                        {
-                          "tag": "span",
-                          "class": "ui-code-block__line-number"
-                        },
-                        {
-                          "tag": "span",
-                          "text": "}"
-                        }
-                      ]
-                    }
-                  ]
-                }
-              ]
-            }
-          ]
-        }
-      ]
-    },
-    {
-      "title": "Inline code",
-      "description": "Use the related ui-code class for inline snippets.",
-      "examples": [
-        {
-          "items": [
-            {
-              "tag": "p",
-              "children": [
-                { "tag": "span", "text": "Use " },
-                { "tag": "code", "class": "ui-code", "text": "var(--ui-space-2)" },
-                { "tag": "span", "text": " for consistent spacing." }
-              ]
-            }
-          ]
-        }
-      ]
-    },
-    {
-      "title": "Compact with line numbers",
-      "examples": [
-        {
-          "items": [
-            {
-              "tag": "pre",
-              "class": "ui-code-block ui-code-block--compact ui-code-block--line-numbers",
-              "children": [
-                {
-                  "tag": "code",
-                  "class": "ui-code-block__code",
-                  "children": [
-                    {
-                      "tag": "span",
-                      "class": "ui-code-block__line",
-                      "children": [
-                        {
-                          "tag": "span",
-                          "class": "ui-code-block__line-number"
-                        },
-                        {
-                          "tag": "span",
-                          "text": "const name = \"world\";"
-                        }
-                      ]
-                    },
-                    {
-                      "tag": "span",
-                      "class": "ui-code-block__line",
-                      "children": [
-                        {
-                          "tag": "span",
-                          "class": "ui-code-block__line-number"
-                        },
-                        {
-                          "tag": "span",
-                          "text": "console.log(`Hello, ${name}`);"
-                        }
-                      ]
-                    }
-                  ]
-                }
-              ]
-            }
-          ]
-        }
-      ]
-    }
-  ],
-  "customization": [
-    {
-      "token": "--ui-code-block-bg",
-      "default": "var(--ui-color-bg-muted)",
-      "description": "Background color"
-    },
-    {
-      "token": "--ui-code-block-color",
-      "default": "var(--ui-color-text)",
-      "description": "Text color"
-    },
-    {
-      "token": "--ui-code-block-border-color",
-      "default": "var(--ui-color-border)",
-      "description": "Border color"
-    },
-    {
-      "token": "--ui-code-block-padding",
-      "default": "var(--ui-space-3)",
-      "description": "Content padding"
-    },
-    {
-      "token": "--ui-code-block-font-size",
-      "default": "var(--ui-font-size-sm)",
-      "description": "Font size"
-    },
-    {
-      "token": "--ui-code-block-line-height",
-      "default": "var(--ui-leading-tight-sm)",
-      "description": "Line height"
-    },
-    {
-      "token": "--ui-code-block-radius",
-      "default": "var(--ui-radius-md)",
-      "description": "Border radius"
-    },
-    {
-      "token": "--ui-code-block-padding-compact",
-      "default": "var(--ui-space-1)",
-      "description": "Padding for compact variant"
-    },
-    {
-      "token": "--ui-code-block-line-number-color",
-      "default": "var(--ui-color-text-muted)",
-      "description": "Line number text color"
-    },
-    {
-      "token": "--ui-code-block-line-number-border-color",
-      "default": "var(--ui-color-border)",
-      "description": "Line number separator color"
-    }
-  ]
-}

package/src/components/typography/heading/heading.docs.json

@@ -1,120 +0,0 @@
-{
-  "id": "heading",
-  "type": "component",
-  "title": "Heading",
-  "description": "Semantic headings with visual size control. Use semantic level (h1-h6) for structure, size modifier for visual styling.",
-  "api": "./heading.api.json",
-  "sections": [
-    {
-      "title": "Sizes",
-      "examples": [
-        {
-          "layout": "column",
-          "items": [
-            { "tag": "h1", "class": "ui-heading ui-heading--4xl", "text": "Heading 4xl" },
-            { "tag": "h2", "class": "ui-heading ui-heading--3xl", "text": "Heading 3xl" },
-            { "tag": "h3", "class": "ui-heading ui-heading--2xl", "text": "Heading 2xl" },
-            { "tag": "h4", "class": "ui-heading ui-heading--xl", "text": "Heading xl" },
-            { "tag": "h5", "class": "ui-heading ui-heading--lg", "text": "Heading lg" },
-            { "tag": "h6", "class": "ui-heading ui-heading--md", "text": "Heading md" },
-            { "tag": "p", "class": "ui-heading ui-heading--sm", "text": "Heading sm" }
-          ],
-          "code": "<h1 class=\"ui-heading ui-heading--4xl\">4xl</h1>\n<h2 class=\"ui-heading ui-heading--3xl\">3xl</h2>\n<h3 class=\"ui-heading ui-heading--2xl\">2xl</h3>\n<h4 class=\"ui-heading ui-heading--xl\">xl</h4>\n<h5 class=\"ui-heading ui-heading--lg\">lg</h5>\n<h6 class=\"ui-heading ui-heading--md\">md</h6>\n<p class=\"ui-heading ui-heading--sm\">sm</p>"
-        }
-      ]
-    },
-    {
-      "title": "Decoupled Sizing",
-      "description": "Use any size with any semantic level.",
-      "examples": [
-        {
-          "layout": "column",
-          "items": [
-            { "tag": "h2", "class": "ui-heading ui-heading--3xl", "text": "h2 styled as 3xl" },
-            { "tag": "h1", "class": "ui-heading ui-heading--lg", "text": "h1 styled as lg" }
-          ],
-          "code": "<h2 class=\"ui-heading ui-heading--3xl\">h2 as 3xl</h2>\n<h1 class=\"ui-heading ui-heading--lg\">h1 as lg</h1>"
-        }
-      ]
-    },
-    {
-      "title": "With Text Utilities",
-      "description": "Combine with text utilities for color and other styles.",
-      "examples": [
-        {
-          "layout": "column",
-          "items": [
-            {
-              "tag": "h2",
-              "class": "ui-heading ui-heading--2xl ui-text-muted",
-              "text": "Muted heading"
-            },
-            {
-              "tag": "h2",
-              "class": "ui-heading ui-heading--2xl ui-text-primary",
-              "text": "Primary heading"
-            }
-          ],
-          "code": "<h2 class=\"ui-heading ui-text-muted\">Muted</h2>\n<h2 class=\"ui-heading ui-text-primary\">Primary</h2>"
-        }
-      ]
-    }
-  ],
-  "customization": [
-    {
-      "token": "--ui-heading-font-size",
-      "default": "var(--ui-font-size-xl)",
-      "description": "Default font size"
-    },
-    {
-      "token": "--ui-heading-line-height",
-      "default": "var(--ui-leading-xl)",
-      "description": "Default line height"
-    },
-    {
-      "token": "--ui-heading-weight",
-      "default": "var(--ui-weight-bold)",
-      "description": "Font weight"
-    },
-    {
-      "token": "--ui-heading-color",
-      "default": "var(--ui-color-text)",
-      "description": "Text color"
-    },
-    {
-      "token": "--ui-heading-font-size-4xl",
-      "default": "var(--ui-font-size-4xl)",
-      "description": "4xl size"
-    },
-    {
-      "token": "--ui-heading-font-size-3xl",
-      "default": "var(--ui-font-size-3xl)",
-      "description": "3xl size"
-    },
-    {
-      "token": "--ui-heading-font-size-2xl",
-      "default": "var(--ui-font-size-2xl)",
-      "description": "2xl size"
-    },
-    {
-      "token": "--ui-heading-font-size-xl",
-      "default": "var(--ui-font-size-xl)",
-      "description": "xl size"
-    },
-    {
-      "token": "--ui-heading-font-size-lg",
-      "default": "var(--ui-font-size-lg)",
-      "description": "lg size"
-    },
-    {
-      "token": "--ui-heading-font-size-md",
-      "default": "var(--ui-font-size-md)",
-      "description": "md size"
-    },
-    {
-      "token": "--ui-heading-font-size-sm",
-      "default": "var(--ui-font-size-sm)",
-      "description": "sm size"
-    }
-  ]
-}

package/src/components/typography/kbd/kbd.docs.json

@@ -1,61 +0,0 @@
-{
-  "id": "kbd",
-  "type": "component",
-  "title": "Kbd",
-  "description": "Keyboard shortcut display with monospace font and key-cap styling.",
-  "api": "./kbd.api.json",
-  "sections": [
-    {
-      "title": "Default",
-      "examples": [
-        {
-          "items": [
-            {
-              "tag": "p",
-              "children": [
-                { "tag": "span", "text": "Press " },
-                { "tag": "kbd", "class": "ui-kbd", "text": "Ctrl" },
-                { "tag": "span", "text": " + " },
-                { "tag": "kbd", "class": "ui-kbd", "text": "S" },
-                { "tag": "span", "text": " to save" }
-              ]
-            }
-          ]
-        }
-      ]
-    },
-    {
-      "title": "Variations",
-      "examples": [
-        {
-          "items": [
-            { "tag": "kbd", "class": "ui-kbd", "text": "Esc" },
-            { "tag": "kbd", "class": "ui-kbd", "text": "Enter" },
-            { "tag": "kbd", "class": "ui-kbd", "text": "Tab" },
-            { "tag": "kbd", "class": "ui-kbd", "text": "Shift" },
-            { "tag": "kbd", "class": "ui-kbd", "text": "Space" }
-          ],
-          "layout": "row"
-        }
-      ]
-    }
-  ],
-  "customization": [
-    {
-      "token": "--ui-kbd-font-size",
-      "default": "var(--ui-font-size-sm)",
-      "description": "Font size"
-    },
-    {
-      "token": "--ui-kbd-bg",
-      "default": "var(--ui-color-bg-subtle)",
-      "description": "Background color"
-    },
-    {
-      "token": "--ui-kbd-border-color",
-      "default": "var(--ui-color-border)",
-      "description": "Border color"
-    },
-    { "token": "--ui-kbd-radius", "default": "var(--ui-radius-sm)", "description": "Border radius" }
-  ]
-}

package/src/components/typography/link/link.docs.json

@@ -1,149 +0,0 @@
-{
-  "id": "link",
-  "type": "component",
-  "title": "Link",
-  "description": "Styled anchor element for text links with consistent hover and focus states.",
-  "api": "./link.api.json",
-  "sections": [
-    {
-      "title": "Default",
-      "examples": [
-        {
-          "items": [
-            { "tag": "a", "class": "ui-link", "attrs": { "href": "#" }, "text": "Default link" }
-          ],
-          "code": "<a href=\"#\" class=\"ui-link\">Default link</a>"
-        }
-      ]
-    },
-    {
-      "title": "Muted Variant",
-      "description": "For secondary or less prominent links",
-      "api": "./link.api.json",
-      "examples": [
-        {
-          "items": [
-            {
-              "tag": "a",
-              "class": "ui-link ui-link--muted",
-              "attrs": { "href": "#" },
-              "text": "Muted link"
-            }
-          ],
-          "code": "<a href=\"#\" class=\"ui-link ui-link--muted\">Muted link</a>"
-        }
-      ]
-    },
-    {
-      "title": "Subtle Variant",
-      "description": "No underline by default, shows on hover",
-      "api": "./link.api.json",
-      "examples": [
-        {
-          "items": [
-            {
-              "tag": "a",
-              "class": "ui-link ui-link--subtle",
-              "attrs": { "href": "#" },
-              "text": "Subtle link"
-            }
-          ],
-          "code": "<a href=\"#\" class=\"ui-link ui-link--subtle\">Subtle link</a>"
-        }
-      ]
-    },
-    {
-      "title": "External Link",
-      "description": "Adds arrow indicator for external links",
-      "api": "./link.api.json",
-      "examples": [
-        {
-          "items": [
-            {
-              "tag": "a",
-              "class": "ui-link ui-link--external",
-              "attrs": { "href": "#" },
-              "text": "External link"
-            }
-          ],
-          "code": "<a href=\"#\" class=\"ui-link ui-link--external\">External link</a>"
-        }
-      ]
-    },
-    {
-      "title": "Disabled",
-      "examples": [
-        {
-          "items": [
-            {
-              "tag": "a",
-              "class": "ui-link ui-link--disabled",
-              "attrs": { "href": "#", "aria-disabled": "true" },
-              "text": "Disabled link"
-            }
-          ],
-          "code": "<a href=\"#\" class=\"ui-link ui-link--disabled\" aria-disabled=\"true\">\n  Disabled link\n</a>"
-        }
-      ]
-    },
-    {
-      "title": "In Context",
-      "description": "Links inherit text size from context",
-      "api": "./link.api.json",
-      "examples": [
-        {
-          "items": [
-            {
-              "tag": "p",
-              "attrs": { "style": "font-size: var(--ui-size-sm);" },
-              "children": [
-                { "text": "Read our " },
-                {
-                  "tag": "a",
-                  "class": "ui-link",
-                  "attrs": { "href": "#" },
-                  "text": "privacy policy"
-                },
-                { "text": " for more information." }
-              ]
-            }
-          ],
-          "code": "<p>\n  Read our <a href=\"#\" class=\"ui-link\">privacy policy</a>\n  for more information.\n</p>"
-        }
-      ]
-    }
-  ],
-  "customization": [
-    {
-      "token": "--ui-link-color",
-      "default": "var(--ui-color-primary)",
-      "description": "Default link color"
-    },
-    {
-      "token": "--ui-link-color-hover",
-      "default": "var(--ui-color-primary-hover)",
-      "description": "Hover color"
-    },
-    {
-      "token": "--ui-link-color-visited",
-      "default": "var(--ui-link-color)",
-      "description": "Visited link color"
-    },
-    { "token": "--ui-link-decoration", "default": "underline", "description": "Text decoration" },
-    {
-      "token": "--ui-link-decoration-hover",
-      "default": "underline",
-      "description": "Hover text decoration"
-    },
-    {
-      "token": "--ui-link-color-muted",
-      "default": "var(--ui-color-text-muted)",
-      "description": "Muted variant color"
-    },
-    {
-      "token": "--ui-link-color-muted-hover",
-      "default": "var(--ui-color-text)",
-      "description": "Muted variant hover color"
-    }
-  ]
-}