@teseor/css 1.14.2 → 1.15.0

package/src/components/forms/search-input/search-input.docs.json

@@ -1,293 +0,0 @@
-{
-  "id": "search-input",
-  "type": "component",
-  "title": "Search Input",
-  "description": "Search field with built-in search icon and optional clear button.",
-  "api": "./search-input.api.json",
-  "sections": [
-    {
-      "title": "Default",
-      "examples": [
-        {
-          "items": [
-            {
-              "tag": "div",
-              "class": "ui-search-input",
-              "children": [
-                {
-                  "tag": "span",
-                  "class": "ui-search-input__icon",
-                  "children": [
-                    {
-                      "tag": "svg",
-                      "attrs": { "viewBox": "0 0 24 24" },
-                      "children": [
-                        { "tag": "circle", "attrs": { "cx": "11", "cy": "11", "r": "8" } },
-                        { "tag": "path", "attrs": { "d": "m21 21-4.3-4.3" } }
-                      ]
-                    }
-                  ]
-                },
-                {
-                  "tag": "input",
-                  "class": "ui-search-input__field",
-                  "attrs": { "type": "search", "placeholder": "Search..." }
-                }
-              ]
-            }
-          ],
-          "code": "<div class=\"ui-search-input\">\n  <span class=\"ui-search-input__icon\"><svg>...</svg></span>\n  <input class=\"ui-search-input__field\" type=\"search\" placeholder=\"Search...\">\n</div>"
-        }
-      ]
-    },
-    {
-      "title": "With Clear Button",
-      "examples": [
-        {
-          "items": [
-            {
-              "tag": "div",
-              "class": "ui-search-input ui-search-input--has-clear",
-              "children": [
-                {
-                  "tag": "span",
-                  "class": "ui-search-input__icon",
-                  "children": [
-                    {
-                      "tag": "svg",
-                      "attrs": { "viewBox": "0 0 24 24" },
-                      "children": [
-                        { "tag": "circle", "attrs": { "cx": "11", "cy": "11", "r": "8" } },
-                        { "tag": "path", "attrs": { "d": "m21 21-4.3-4.3" } }
-                      ]
-                    }
-                  ]
-                },
-                {
-                  "tag": "input",
-                  "class": "ui-search-input__field",
-                  "attrs": { "type": "search", "value": "Design tokens" }
-                },
-                {
-                  "tag": "button",
-                  "class": "ui-search-input__clear",
-                  "attrs": { "type": "button", "aria-label": "Clear search" },
-                  "children": [
-                    {
-                      "tag": "svg",
-                      "attrs": { "viewBox": "0 0 24 24" },
-                      "children": [
-                        { "tag": "path", "attrs": { "d": "M18 6 6 18" } },
-                        { "tag": "path", "attrs": { "d": "m6 6 12 12" } }
-                      ]
-                    }
-                  ]
-                }
-              ]
-            }
-          ],
-          "code": "<div class=\"ui-search-input ui-search-input--has-clear\">\n  <span class=\"ui-search-input__icon\"><svg>...</svg></span>\n  <input class=\"ui-search-input__field\" type=\"search\" value=\"Design tokens\">\n  <button class=\"ui-search-input__clear\" aria-label=\"Clear search\"><svg>...</svg></button>\n</div>"
-        }
-      ]
-    },
-    {
-      "title": "Sizes",
-      "examples": [
-        {
-          "layout": "column",
-          "items": [
-            {
-              "tag": "div",
-              "class": "ui-search-input ui-search-input--sm",
-              "children": [
-                {
-                  "tag": "span",
-                  "class": "ui-search-input__icon",
-                  "children": [
-                    {
-                      "tag": "svg",
-                      "attrs": { "viewBox": "0 0 24 24" },
-                      "children": [
-                        { "tag": "circle", "attrs": { "cx": "11", "cy": "11", "r": "8" } },
-                        { "tag": "path", "attrs": { "d": "m21 21-4.3-4.3" } }
-                      ]
-                    }
-                  ]
-                },
-                {
-                  "tag": "input",
-                  "class": "ui-search-input__field",
-                  "attrs": { "type": "search", "placeholder": "Small" }
-                }
-              ]
-            },
-            {
-              "tag": "div",
-              "class": "ui-search-input",
-              "children": [
-                {
-                  "tag": "span",
-                  "class": "ui-search-input__icon",
-                  "children": [
-                    {
-                      "tag": "svg",
-                      "attrs": { "viewBox": "0 0 24 24" },
-                      "children": [
-                        { "tag": "circle", "attrs": { "cx": "11", "cy": "11", "r": "8" } },
-                        { "tag": "path", "attrs": { "d": "m21 21-4.3-4.3" } }
-                      ]
-                    }
-                  ]
-                },
-                {
-                  "tag": "input",
-                  "class": "ui-search-input__field",
-                  "attrs": { "type": "search", "placeholder": "Default" }
-                }
-              ]
-            },
-            {
-              "tag": "div",
-              "class": "ui-search-input ui-search-input--lg",
-              "children": [
-                {
-                  "tag": "span",
-                  "class": "ui-search-input__icon",
-                  "children": [
-                    {
-                      "tag": "svg",
-                      "attrs": { "viewBox": "0 0 24 24" },
-                      "children": [
-                        { "tag": "circle", "attrs": { "cx": "11", "cy": "11", "r": "8" } },
-                        { "tag": "path", "attrs": { "d": "m21 21-4.3-4.3" } }
-                      ]
-                    }
-                  ]
-                },
-                {
-                  "tag": "input",
-                  "class": "ui-search-input__field",
-                  "attrs": { "type": "search", "placeholder": "Large" }
-                }
-              ]
-            }
-          ],
-          "code": "<div class=\"ui-search-input ui-search-input--sm\">...</div>\n<div class=\"ui-search-input\">...</div>\n<div class=\"ui-search-input ui-search-input--lg\">...</div>"
-        }
-      ]
-    },
-    {
-      "title": "Block",
-      "description": "Full-width layout.",
-      "examples": [
-        {
-          "items": [
-            {
-              "tag": "div",
-              "class": "ui-search-input ui-search-input--block",
-              "children": [
-                {
-                  "tag": "span",
-                  "class": "ui-search-input__icon",
-                  "children": [
-                    {
-                      "tag": "svg",
-                      "attrs": { "viewBox": "0 0 24 24" },
-                      "children": [
-                        { "tag": "circle", "attrs": { "cx": "11", "cy": "11", "r": "8" } },
-                        { "tag": "path", "attrs": { "d": "m21 21-4.3-4.3" } }
-                      ]
-                    }
-                  ]
-                },
-                {
-                  "tag": "input",
-                  "class": "ui-search-input__field",
-                  "attrs": { "type": "search", "placeholder": "Full width search..." }
-                }
-              ]
-            }
-          ],
-          "code": "<div class=\"ui-search-input ui-search-input--block\">...</div>"
-        }
-      ]
-    },
-    {
-      "title": "Disabled",
-      "examples": [
-        {
-          "items": [
-            {
-              "tag": "div",
-              "class": "ui-search-input ui-search-input--disabled",
-              "children": [
-                {
-                  "tag": "span",
-                  "class": "ui-search-input__icon",
-                  "children": [
-                    {
-                      "tag": "svg",
-                      "attrs": { "viewBox": "0 0 24 24" },
-                      "children": [
-                        { "tag": "circle", "attrs": { "cx": "11", "cy": "11", "r": "8" } },
-                        { "tag": "path", "attrs": { "d": "m21 21-4.3-4.3" } }
-                      ]
-                    }
-                  ]
-                },
-                {
-                  "tag": "input",
-                  "class": "ui-search-input__field",
-                  "attrs": { "type": "search", "placeholder": "Disabled", "disabled": "" }
-                }
-              ]
-            }
-          ],
-          "code": "<div class=\"ui-search-input ui-search-input--disabled\">\n  <span class=\"ui-search-input__icon\"><svg>...</svg></span>\n  <input class=\"ui-search-input__field\" type=\"search\" disabled>\n</div>"
-        }
-      ]
-    }
-  ],
-  "customization": [
-    {
-      "token": "--ui-search-input-height",
-      "default": "var(--ui-row-2)",
-      "description": "Default height"
-    },
-    {
-      "token": "--ui-search-input-height-sm",
-      "default": "calc(var(--ui-row) * 1.5)",
-      "description": "Small height"
-    },
-    {
-      "token": "--ui-search-input-height-lg",
-      "default": "calc(var(--ui-row) * 2.5)",
-      "description": "Large height"
-    },
-    {
-      "token": "--ui-search-input-bg",
-      "default": "var(--ui-color-bg)",
-      "description": "Background color"
-    },
-    {
-      "token": "--ui-search-input-border-color",
-      "default": "var(--ui-color-border-strong)",
-      "description": "Border color"
-    },
-    {
-      "token": "--ui-search-input-border-color-focus",
-      "default": "var(--ui-color-primary)",
-      "description": "Focus border color"
-    },
-    {
-      "token": "--ui-search-input-icon-color",
-      "default": "var(--ui-color-text-muted)",
-      "description": "Search icon color"
-    },
-    {
-      "token": "--ui-search-input-clear-color",
-      "default": "var(--ui-color-text-muted)",
-      "description": "Clear button color"
-    }
-  ]
-}

package/src/components/forms/select/select.docs.json

@@ -1,231 +0,0 @@
-{
-  "id": "select",
-  "type": "component",
-  "title": "Select",
-  "description": "Native select dropdown with custom styling. Dropdown options use browser default styles.",
-  "api": "./select.api.json",
-  "sections": [
-    {
-      "title": "Default",
-      "examples": [
-        {
-          "items": [
-            {
-              "tag": "select",
-              "class": "ui-select",
-              "children": [
-                {
-                  "tag": "option",
-                  "text": "Choose option...",
-                  "attrs": { "value": "", "disabled": "", "selected": "" }
-                },
-                { "tag": "option", "text": "Option 1", "attrs": { "value": "1" } },
-                { "tag": "option", "text": "Option 2", "attrs": { "value": "2" } },
-                { "tag": "option", "text": "Option 3", "attrs": { "value": "3" } }
-              ]
-            }
-          ]
-        }
-      ]
-    },
-    {
-      "title": "Sizes",
-      "examples": [
-        {
-          "layout": "column",
-          "items": [
-            {
-              "tag": "select",
-              "class": "ui-select ui-select--sm",
-              "children": [
-                { "tag": "option", "text": "Small" },
-                { "tag": "option", "text": "Option 2" }
-              ]
-            },
-            {
-              "tag": "select",
-              "class": "ui-select",
-              "children": [
-                { "tag": "option", "text": "Default" },
-                { "tag": "option", "text": "Option 2" }
-              ]
-            },
-            {
-              "tag": "select",
-              "class": "ui-select ui-select--lg",
-              "children": [
-                { "tag": "option", "text": "Large" },
-                { "tag": "option", "text": "Option 2" }
-              ]
-            }
-          ],
-          "code": "<select class=\"ui-select ui-select--sm\">...</select>\n<select class=\"ui-select\">...</select>\n<select class=\"ui-select ui-select--lg\">...</select>"
-        }
-      ]
-    },
-    {
-      "title": "Variants",
-      "examples": [
-        {
-          "layout": "column",
-          "items": [
-            {
-              "tag": "select",
-              "class": "ui-select",
-              "children": [{ "tag": "option", "text": "Outline (default)" }]
-            },
-            {
-              "tag": "select",
-              "class": "ui-select ui-select--filled",
-              "children": [{ "tag": "option", "text": "Filled" }]
-            },
-            {
-              "tag": "select",
-              "class": "ui-select ui-select--ghost",
-              "children": [{ "tag": "option", "text": "Ghost" }]
-            }
-          ],
-          "code": "<select class=\"ui-select\">...</select>\n<select class=\"ui-select ui-select--filled\">...</select>\n<select class=\"ui-select ui-select--ghost\">...</select>"
-        }
-      ]
-    },
-    {
-      "title": "States",
-      "examples": [
-        {
-          "layout": "column",
-          "items": [
-            {
-              "tag": "select",
-              "class": "ui-select ui-select--error",
-              "children": [{ "tag": "option", "text": "Error state" }]
-            },
-            {
-              "tag": "select",
-              "class": "ui-select ui-select--success",
-              "children": [{ "tag": "option", "text": "Success state" }]
-            },
-            {
-              "tag": "select",
-              "class": "ui-select",
-              "attrs": { "disabled": "" },
-              "children": [{ "tag": "option", "text": "Disabled" }]
-            }
-          ],
-          "code": "<select class=\"ui-select ui-select--error\">...</select>\n<select class=\"ui-select ui-select--success\">...</select>\n<select class=\"ui-select\" disabled>...</select>"
-        }
-      ]
-    },
-    {
-      "title": "Full Width",
-      "examples": [
-        {
-          "items": [
-            {
-              "tag": "select",
-              "class": "ui-select ui-select--block",
-              "children": [
-                { "tag": "option", "text": "Full width select...", "attrs": { "value": "" } },
-                { "tag": "option", "text": "Option 1", "attrs": { "value": "1" } }
-              ]
-            }
-          ]
-        }
-      ]
-    },
-    {
-      "title": "With Option Groups",
-      "examples": [
-        {
-          "items": [
-            {
-              "tag": "select",
-              "class": "ui-select ui-select--block",
-              "children": [
-                {
-                  "tag": "option",
-                  "text": "Choose a fruit...",
-                  "attrs": { "value": "", "disabled": "", "selected": "" }
-                },
-                {
-                  "tag": "optgroup",
-                  "attrs": { "label": "Citrus" },
-                  "children": [
-                    { "tag": "option", "text": "Orange", "attrs": { "value": "orange" } },
-                    { "tag": "option", "text": "Lemon", "attrs": { "value": "lemon" } }
-                  ]
-                },
-                {
-                  "tag": "optgroup",
-                  "attrs": { "label": "Berries" },
-                  "children": [
-                    { "tag": "option", "text": "Strawberry", "attrs": { "value": "strawberry" } },
-                    { "tag": "option", "text": "Blueberry", "attrs": { "value": "blueberry" } }
-                  ]
-                }
-              ]
-            }
-          ],
-          "code": "<select class=\"ui-select\">\n  <optgroup label=\"Citrus\">\n    <option>Orange</option>\n    <option>Lemon</option>\n  </optgroup>\n  <optgroup label=\"Berries\">\n    <option>Strawberry</option>\n  </optgroup>\n</select>"
-        }
-      ]
-    }
-  ],
-  "customization": [
-    {
-      "token": "--ui-select-height",
-      "default": "var(--ui-row-2)",
-      "description": "Default height"
-    },
-    {
-      "token": "--ui-select-height-sm",
-      "default": "calc(var(--ui-row) * 1.5)",
-      "description": "Small height"
-    },
-    {
-      "token": "--ui-select-height-lg",
-      "default": "calc(var(--ui-row) * 2.5)",
-      "description": "Large height"
-    },
-    {
-      "token": "--ui-select-padding-x",
-      "default": "var(--ui-space-1)",
-      "description": "Horizontal padding"
-    },
-    {
-      "token": "--ui-select-font-size",
-      "default": "var(--ui-font-size-sm)",
-      "description": "Font size"
-    },
-    {
-      "token": "--ui-select-radius",
-      "default": "var(--ui-radius-md)",
-      "description": "Border radius"
-    },
-    {
-      "token": "--ui-select-bg",
-      "default": "var(--ui-color-bg)",
-      "description": "Background color"
-    },
-    {
-      "token": "--ui-select-border-color",
-      "default": "var(--ui-color-border-strong)",
-      "description": "Border color"
-    },
-    {
-      "token": "--ui-select-border-color-focus",
-      "default": "var(--ui-color-primary)",
-      "description": "Focus border color"
-    },
-    {
-      "token": "--ui-select-color",
-      "default": "var(--ui-color-text)",
-      "description": "Text color"
-    },
-    {
-      "token": "--ui-select-icon-color",
-      "default": "var(--ui-color-text-muted)",
-      "description": "Arrow icon color"
-    }
-  ]
-}

package/src/components/forms/slider/slider.docs.json

@@ -1,144 +0,0 @@
-{
-  "id": "slider",
-  "type": "component",
-  "title": "Slider",
-  "description": "Range value selection. Styles the native range input cross-browser for track and thumb.",
-  "api": "./slider.api.json",
-  "sections": [
-    {
-      "title": "Default",
-      "examples": [
-        {
-          "items": [
-            {
-              "tag": "input",
-              "class": "ui-slider",
-              "attrs": { "type": "range", "min": "0", "max": "100", "value": "50" }
-            }
-          ],
-          "code": "<input type=\"range\" class=\"ui-slider\" min=\"0\" max=\"100\" value=\"50\">"
-        }
-      ]
-    },
-    {
-      "title": "Sizes",
-      "examples": [
-        {
-          "layout": "column",
-          "items": [
-            {
-              "tag": "input",
-              "class": "ui-slider ui-slider--sm",
-              "attrs": { "type": "range", "min": "0", "max": "100", "value": "30" }
-            },
-            {
-              "tag": "input",
-              "class": "ui-slider",
-              "attrs": { "type": "range", "min": "0", "max": "100", "value": "50" }
-            },
-            {
-              "tag": "input",
-              "class": "ui-slider ui-slider--lg",
-              "attrs": { "type": "range", "min": "0", "max": "100", "value": "70" }
-            }
-          ],
-          "code": "<input type=\"range\" class=\"ui-slider ui-slider--sm\" value=\"30\">\n<input type=\"range\" class=\"ui-slider\" value=\"50\">\n<input type=\"range\" class=\"ui-slider ui-slider--lg\" value=\"70\">"
-        }
-      ]
-    },
-    {
-      "title": "Colors",
-      "examples": [
-        {
-          "layout": "column",
-          "items": [
-            {
-              "tag": "input",
-              "class": "ui-slider",
-              "attrs": { "type": "range", "min": "0", "max": "100", "value": "50" }
-            },
-            {
-              "tag": "input",
-              "class": "ui-slider ui-slider--success",
-              "attrs": { "type": "range", "min": "0", "max": "100", "value": "80" }
-            },
-            {
-              "tag": "input",
-              "class": "ui-slider ui-slider--warning",
-              "attrs": { "type": "range", "min": "0", "max": "100", "value": "60" }
-            },
-            {
-              "tag": "input",
-              "class": "ui-slider ui-slider--danger",
-              "attrs": { "type": "range", "min": "0", "max": "100", "value": "25" }
-            }
-          ],
-          "code": "<input type=\"range\" class=\"ui-slider\" value=\"50\">\n<input type=\"range\" class=\"ui-slider ui-slider--success\" value=\"80\">\n<input type=\"range\" class=\"ui-slider ui-slider--warning\" value=\"60\">\n<input type=\"range\" class=\"ui-slider ui-slider--danger\" value=\"25\">"
-        }
-      ]
-    },
-    {
-      "title": "Disabled",
-      "examples": [
-        {
-          "layout": "column",
-          "items": [
-            {
-              "tag": "input",
-              "class": "ui-slider",
-              "attrs": { "type": "range", "min": "0", "max": "100", "value": "40", "disabled": "" }
-            },
-            {
-              "tag": "input",
-              "class": "ui-slider ui-slider--success",
-              "attrs": { "type": "range", "min": "0", "max": "100", "value": "70", "disabled": "" }
-            }
-          ],
-          "code": "<input type=\"range\" class=\"ui-slider\" value=\"40\" disabled>\n<input type=\"range\" class=\"ui-slider ui-slider--success\" value=\"70\" disabled>"
-        }
-      ]
-    }
-  ],
-  "customization": [
-    {
-      "token": "--ui-slider-height",
-      "default": "var(--ui-row-2)",
-      "description": "Component height (clickable area)"
-    },
-    {
-      "token": "--ui-slider-track-height",
-      "default": "var(--ui-unit)",
-      "description": "Track bar height"
-    },
-    {
-      "token": "--ui-slider-track-bg",
-      "default": "var(--ui-color-bg-subtle)",
-      "description": "Track background"
-    },
-    {
-      "token": "--ui-slider-track-fill",
-      "default": "var(--ui-color-primary)",
-      "description": "Filled portion color (Firefox)"
-    },
-    {
-      "token": "--ui-slider-thumb-size",
-      "default": "calc(var(--ui-unit) * 2.5)",
-      "description": "Thumb diameter"
-    },
-    {
-      "token": "--ui-slider-thumb-bg",
-      "default": "var(--ui-color-bg)",
-      "description": "Thumb background"
-    },
-    {
-      "token": "--ui-slider-thumb-border-color",
-      "default": "var(--ui-color-primary)",
-      "description": "Thumb border color"
-    },
-    {
-      "token": "--ui-slider-focus-ring",
-      "default": "var(--ui-color-focus)",
-      "description": "Focus ring color"
-    }
-  ]
-}