├── .gitattributes ├── .gitignore ├── .idea └── .idea.Spark.UI │ └── .idea │ ├── .gitignore │ ├── encodings.xml │ ├── indexLayout.xml │ └── vcs.xml ├── LICENSE.txt ├── README.md ├── Spark.UI.Docs ├── App.razor ├── Pages │ ├── ComponentBasics.razor │ ├── Components │ │ ├── Alerts.razor │ │ ├── AvatarPage.razor │ │ ├── Badges.razor │ │ ├── Blockquotes.razor │ │ ├── BreadcrumbPage.razor │ │ ├── Buttons.razor │ │ ├── CardPage.razor │ │ ├── Form │ │ │ ├── Checkbox.razor │ │ │ ├── FormDescriptionPage.razor │ │ │ ├── Forms.razor │ │ │ ├── InputGroupPage.razor │ │ │ ├── Inputs.razor │ │ │ ├── LabelPage.razor │ │ │ ├── SelectPage.razor │ │ │ ├── TextAreaPage.razor │ │ │ └── ValidationMessagePage.razor │ │ ├── Heading1.razor │ │ ├── Heading2.razor │ │ ├── Heading3.razor │ │ ├── Heading4.razor │ │ ├── Hero.razor │ │ ├── InlineCodePage.razor │ │ ├── InlineLinkPage.razor │ │ ├── Large.razor │ │ ├── Lead.razor │ │ ├── List.razor │ │ ├── Muted.razor │ │ ├── NavigationBarPage.razor │ │ ├── Paragraph.razor │ │ ├── Small.razor │ │ ├── Table.razor │ │ └── Typography.razor │ ├── Customization.razor │ ├── Index.razor │ ├── Installation.razor │ └── Introduction.razor ├── Program.cs ├── Properties │ └── launchSettings.json ├── README.md ├── Shared │ ├── Code.razor │ ├── CodeExample.razor │ ├── ComponentPreview.razor │ ├── ComponentPreviewCode.razor │ ├── ComponentPreviewRendered.razor │ ├── DocsLayout.razor │ ├── Footer.razor │ ├── MainLayout.razor │ └── NavBar.razor ├── Spark.UI.Docs.csproj ├── Styles │ └── globals.css ├── _Imports.razor ├── appsettings.Development.json ├── appsettings.json ├── package-lock.json ├── package.json ├── postcss.config.js ├── tailwind.config.js └── wwwroot │ ├── css │ └── styles.css │ ├── favicon.png │ └── spark-ui.zip ├── Spark.UI.sln └── Spark.UI ├── Components ├── Alert.razor ├── AlertDescription.razor ├── AlertTitle.razor ├── Avatar.razor ├── AvatarImage.razor ├── Badge.razor ├── Breadcrumb.razor ├── BreadcrumbItem.razor ├── BreadcrumbLinkItem.razor ├── Button.razor ├── ButtonLink.razor ├── Card.razor ├── CardContent.razor ├── CardDescription.razor ├── CardFooter.razor ├── CardHeader.razor ├── CardTitle.razor ├── FormDescription.razor ├── Icons │ ├── ChevronRight.razor │ ├── IconAlertTriangle.razor │ ├── IconCheckCircle.razor │ ├── IconChevronDown.razor │ ├── IconInfo.razor │ ├── IconMenu.razor │ ├── IconX.razor │ └── IconXCircle.razor ├── InputGroup.razor ├── Label.razor ├── NavigationBar.razor ├── NavigationLink.razor ├── SparkComponent.razor ├── Typography │ ├── Blockquote.razor │ ├── InlineCode.razor │ ├── InlineLink.razor │ ├── TypographyH1.razor │ ├── TypographyH2.razor │ ├── TypographyH3.razor │ ├── TypographyH4.razor │ ├── TypographyHero.razor │ ├── TypographyLarge.razor │ ├── TypographyLead.razor │ ├── TypographyList.razor │ ├── TypographyMuted.razor │ ├── TypographyP.razor │ ├── TypographySmall.razor │ └── TypographyTable.razor └── Variants.cs ├── Spark.UI.csproj ├── Styles └── globals.css ├── postcss.config.js └── tailwind.config.js /.gitattributes: -------------------------------------------------------------------------------- 1 | ############################################################################### 2 | # Set default behavior to automatically normalize line endings. 3 | ############################################################################### 4 | * text=auto 5 | 6 | ############################################################################### 7 | # Set default behavior for command prompt diff. 8 | # 9 | # This is need for earlier builds of msysgit that does not have it on by 10 | # default for csharp files. 11 | # Note: This is only used by command line 12 | ############################################################################### 13 | #*.cs diff=csharp 14 | 15 | ############################################################################### 16 | # Set the merge driver for project and solution files 17 | # 18 | # Merging from the command prompt will add diff markers to the files if there 19 | # are conflicts (Merging from VS is not affected by the settings below, in VS 20 | # the diff markers are never inserted). Diff markers may cause the following 21 | # file extensions to fail to load in VS. An alternative would be to treat 22 | # these files as binary and thus will always conflict and require user 23 | # intervention with every merge. To do so, just uncomment the entries below 24 | ############################################################################### 25 | #*.sln merge=binary 26 | #*.csproj merge=binary 27 | #*.vbproj merge=binary 28 | #*.vcxproj merge=binary 29 | #*.vcproj merge=binary 30 | #*.dbproj merge=binary 31 | #*.fsproj merge=binary 32 | #*.lsproj merge=binary 33 | #*.wixproj merge=binary 34 | #*.modelproj merge=binary 35 | #*.sqlproj merge=binary 36 | #*.wwaproj merge=binary 37 | 38 | ############################################################################### 39 | # behavior for image files 40 | # 41 | # image files are treated as binary by default. 42 | ############################################################################### 43 | #*.jpg binary 44 | #*.png binary 45 | #*.gif binary 46 | 47 | ############################################################################### 48 | # diff behavior for common document formats 49 | # 50 | # Convert binary document formats to text before diffing them. This feature 51 | # is only available from the command line. Turn it on by uncommenting the 52 | # entries below. 53 | ############################################################################### 54 | #*.doc diff=astextplain 55 | #*.DOC diff=astextplain 56 | #*.docx diff=astextplain 57 | #*.DOCX diff=astextplain 58 | #*.dot diff=astextplain 59 | #*.DOT diff=astextplain 60 | #*.pdf diff=astextplain 61 | #*.PDF diff=astextplain 62 | #*.rtf diff=astextplain 63 | #*.RTF diff=astextplain 64 | -------------------------------------------------------------------------------- /.gitignore: -------------------------------------------------------------------------------- 1 | ## Ignore Visual Studio temporary files, build results, and 2 | ## files generated by popular Visual Studio add-ons. 3 | ## 4 | ## Get latest from https://github.com/github/gitignore/blob/master/VisualStudio.gitignore 5 | 6 | # User-specific files 7 | *.rsuser 8 | *.suo 9 | *.user 10 | *.userosscache 11 | *.sln.docstates 12 | 13 | # User-specific files (MonoDevelop/Xamarin Studio) 14 | *.userprefs 15 | 16 | # Mono auto generated files 17 | mono_crash.* 18 | 19 | # Build results 20 | [Dd]ebug/ 21 | [Dd]ebugPublic/ 22 | [Rr]elease/ 23 | [Rr]eleases/ 24 | x64/ 25 | x86/ 26 | [Ww][Ii][Nn]32/ 27 | [Aa][Rr][Mm]/ 28 | [Aa][Rr][Mm]64/ 29 | bld/ 30 | [Bb]in/ 31 | [Oo]bj/ 32 | [Oo]ut/ 33 | [Ll]og/ 34 | [Ll]ogs/ 35 | 36 | # Visual Studio 2015/2017 cache/options directory 37 | .vs/ 38 | # Uncomment if you have tasks that create the project's static files in wwwroot 39 | #wwwroot/ 40 | 41 | # Visual Studio 2017 auto generated files 42 | Generated\ Files/ 43 | 44 | # MSTest test Results 45 | [Tt]est[Rr]esult*/ 46 | [Bb]uild[Ll]og.* 47 | 48 | # NUnit 49 | *.VisualState.xml 50 | TestResult.xml 51 | nunit-*.xml 52 | 53 | # Build Results of an ATL Project 54 | [Dd]ebugPS/ 55 | [Rr]eleasePS/ 56 | dlldata.c 57 | 58 | # Benchmark Results 59 | BenchmarkDotNet.Artifacts/ 60 | 61 | # .NET Core 62 | project.lock.json 63 | project.fragment.lock.json 64 | artifacts/ 65 | 66 | # ASP.NET Scaffolding 67 | ScaffoldingReadMe.txt 68 | 69 | # StyleCop 70 | StyleCopReport.xml 71 | 72 | # Files built by Visual Studio 73 | *_i.c 74 | *_p.c 75 | *_h.h 76 | *.ilk 77 | *.meta 78 | *.obj 79 | *.iobj 80 | *.pch 81 | *.pdb 82 | *.ipdb 83 | *.pgc 84 | *.pgd 85 | *.rsp 86 | *.sbr 87 | *.tlb 88 | *.tli 89 | *.tlh 90 | *.tmp 91 | *.tmp_proj 92 | *_wpftmp.csproj 93 | *.log 94 | *.vspscc 95 | *.vssscc 96 | .builds 97 | *.pidb 98 | *.svclog 99 | *.scc 100 | 101 | # Chutzpah Test files 102 | _Chutzpah* 103 | 104 | # Visual C++ cache files 105 | ipch/ 106 | *.aps 107 | *.ncb 108 | *.opendb 109 | *.opensdf 110 | *.sdf 111 | *.cachefile 112 | *.VC.db 113 | *.VC.VC.opendb 114 | 115 | # Visual Studio profiler 116 | *.psess 117 | *.vsp 118 | *.vspx 119 | *.sap 120 | 121 | # Visual Studio Trace Files 122 | *.e2e 123 | 124 | # TFS 2012 Local Workspace 125 | $tf/ 126 | 127 | # Guidance Automation Toolkit 128 | *.gpState 129 | 130 | # ReSharper is a .NET coding add-in 131 | _ReSharper*/ 132 | *.[Rr]e[Ss]harper 133 | *.DotSettings.user 134 | 135 | # TeamCity is a build add-in 136 | _TeamCity* 137 | 138 | # DotCover is a Code Coverage Tool 139 | *.dotCover 140 | 141 | # AxoCover is a Code Coverage Tool 142 | .axoCover/* 143 | !.axoCover/settings.json 144 | 145 | # Coverlet is a free, cross platform Code Coverage Tool 146 | coverage*.json 147 | coverage*.xml 148 | coverage*.info 149 | 150 | # Visual Studio code coverage results 151 | *.coverage 152 | *.coveragexml 153 | 154 | # NCrunch 155 | _NCrunch_* 156 | .*crunch*.local.xml 157 | nCrunchTemp_* 158 | 159 | # MightyMoose 160 | *.mm.* 161 | AutoTest.Net/ 162 | 163 | # Web workbench (sass) 164 | .sass-cache/ 165 | 166 | # Installshield output folder 167 | [Ee]xpress/ 168 | 169 | # DocProject is a documentation generator add-in 170 | DocProject/buildhelp/ 171 | DocProject/Help/*.HxT 172 | DocProject/Help/*.HxC 173 | DocProject/Help/*.hhc 174 | DocProject/Help/*.hhk 175 | DocProject/Help/*.hhp 176 | DocProject/Help/Html2 177 | DocProject/Help/html 178 | 179 | # Click-Once directory 180 | publish/ 181 | 182 | # Publish Web Output 183 | *.[Pp]ublish.xml 184 | *.azurePubxml 185 | # Note: Comment the next line if you want to checkin your web deploy settings, 186 | # but database connection strings (with potential passwords) will be unencrypted 187 | *.pubxml 188 | *.publishproj 189 | 190 | # Microsoft Azure Web App publish settings. Comment the next line if you want to 191 | # checkin your Azure Web App publish settings, but sensitive information contained 192 | # in these scripts will be unencrypted 193 | PublishScripts/ 194 | 195 | # NuGet Packages 196 | *.nupkg 197 | # NuGet Symbol Packages 198 | *.snupkg 199 | # The packages folder can be ignored because of Package Restore 200 | **/[Pp]ackages/* 201 | # except build/, which is used as an MSBuild target. 202 | !**/[Pp]ackages/build/ 203 | # Uncomment if necessary however generally it will be regenerated when needed 204 | #!**/[Pp]ackages/repositories.config 205 | # NuGet v3's project.json files produces more ignorable files 206 | *.nuget.props 207 | *.nuget.targets 208 | 209 | # Microsoft Azure Build Output 210 | csx/ 211 | *.build.csdef 212 | 213 | # Microsoft Azure Emulator 214 | ecf/ 215 | rcf/ 216 | 217 | # Windows Store app package directories and files 218 | AppPackages/ 219 | BundleArtifacts/ 220 | Package.StoreAssociation.xml 221 | _pkginfo.txt 222 | *.appx 223 | *.appxbundle 224 | *.appxupload 225 | 226 | # Visual Studio cache files 227 | # files ending in .cache can be ignored 228 | *.[Cc]ache 229 | # but keep track of directories ending in .cache 230 | !?*.[Cc]ache/ 231 | 232 | # Others 233 | ClientBin/ 234 | ~$* 235 | *~ 236 | *.dbmdl 237 | *.dbproj.schemaview 238 | *.jfm 239 | *.pfx 240 | *.publishsettings 241 | orleans.codegen.cs 242 | 243 | # Including strong name files can present a security risk 244 | # (https://github.com/github/gitignore/pull/2483#issue-259490424) 245 | #*.snk 246 | 247 | # Since there are multiple workflows, uncomment next line to ignore bower_components 248 | # (https://github.com/github/gitignore/pull/1529#issuecomment-104372622) 249 | #bower_components/ 250 | 251 | # RIA/Silverlight projects 252 | Generated_Code/ 253 | 254 | # Backup & report files from converting an old project file 255 | # to a newer Visual Studio version. Backup files are not needed, 256 | # because we have git ;-) 257 | _UpgradeReport_Files/ 258 | Backup*/ 259 | UpgradeLog*.XML 260 | UpgradeLog*.htm 261 | ServiceFabricBackup/ 262 | *.rptproj.bak 263 | 264 | # SQL Server files 265 | *.mdf 266 | *.ldf 267 | *.ndf 268 | 269 | # Business Intelligence projects 270 | *.rdl.data 271 | *.bim.layout 272 | *.bim_*.settings 273 | *.rptproj.rsuser 274 | *- [Bb]ackup.rdl 275 | *- [Bb]ackup ([0-9]).rdl 276 | *- [Bb]ackup ([0-9][0-9]).rdl 277 | 278 | # Microsoft Fakes 279 | FakesAssemblies/ 280 | 281 | # GhostDoc plugin setting file 282 | *.GhostDoc.xml 283 | 284 | # Node.js Tools for Visual Studio 285 | .ntvs_analysis.dat 286 | node_modules/ 287 | 288 | # Visual Studio 6 build log 289 | *.plg 290 | 291 | # Visual Studio 6 workspace options file 292 | *.opt 293 | 294 | # Visual Studio 6 auto-generated workspace file (contains which files were open etc.) 295 | *.vbw 296 | 297 | # Visual Studio LightSwitch build output 298 | **/*.HTMLClient/GeneratedArtifacts 299 | **/*.DesktopClient/GeneratedArtifacts 300 | **/*.DesktopClient/ModelManifest.xml 301 | **/*.Server/GeneratedArtifacts 302 | **/*.Server/ModelManifest.xml 303 | _Pvt_Extensions 304 | 305 | # Paket dependency manager 306 | .paket/paket.exe 307 | paket-files/ 308 | 309 | # FAKE - F# Make 310 | .fake/ 311 | 312 | # CodeRush personal settings 313 | .cr/personal 314 | 315 | # Python Tools for Visual Studio (PTVS) 316 | __pycache__/ 317 | *.pyc 318 | 319 | # Cake - Uncomment if you are using it 320 | # tools/** 321 | # !tools/packages.config 322 | 323 | # Tabs Studio 324 | *.tss 325 | 326 | # Telerik's JustMock configuration file 327 | *.jmconfig 328 | 329 | # BizTalk build output 330 | *.btp.cs 331 | *.btm.cs 332 | *.odx.cs 333 | *.xsd.cs 334 | 335 | # OpenCover UI analysis results 336 | OpenCover/ 337 | 338 | # Azure Stream Analytics local run output 339 | ASALocalRun/ 340 | 341 | # MSBuild Binary and Structured Log 342 | *.binlog 343 | 344 | # NVidia Nsight GPU debugger configuration file 345 | *.nvuser 346 | 347 | # MFractors (Xamarin productivity tool) working folder 348 | .mfractor/ 349 | 350 | # Local History for Visual Studio 351 | .localhistory/ 352 | 353 | # BeatPulse healthcheck temp database 354 | healthchecksdb 355 | 356 | # Backup folder for Package Reference Convert tool in Visual Studio 2017 357 | MigrationBackup/ 358 | 359 | # Ionide (cross platform F# VS Code tools) working folder 360 | .ionide/ 361 | 362 | # Fody - auto-generated XML schema 363 | FodyWeavers.xsd -------------------------------------------------------------------------------- /.idea/.idea.Spark.UI/.idea/.gitignore: -------------------------------------------------------------------------------- 1 | # Default ignored files 2 | /shelf/ 3 | /workspace.xml 4 | # Rider ignored files 5 | /modules.xml 6 | /contentModel.xml 7 | /.idea.Spark.UI.iml 8 | /projectSettingsUpdater.xml 9 | # Editor-based HTTP Client requests 10 | /httpRequests/ 11 | # Datasource local storage ignored files 12 | /dataSources/ 13 | /dataSources.local.xml 14 | -------------------------------------------------------------------------------- /.idea/.idea.Spark.UI/.idea/encodings.xml: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | -------------------------------------------------------------------------------- /.idea/.idea.Spark.UI/.idea/indexLayout.xml: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | -------------------------------------------------------------------------------- /.idea/.idea.Spark.UI/.idea/vcs.xml: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | -------------------------------------------------------------------------------- /LICENSE.txt: -------------------------------------------------------------------------------- 1 | MIT License 2 | 3 | Copyright (c) [year] [fullname] 4 | 5 | Permission is hereby granted, free of charge, to any person obtaining a copy 6 | of this software and associated documentation files (the "Software"), to deal 7 | in the Software without restriction, including without limitation the rights 8 | to use, copy, modify, merge, publish, distribute, sublicense, and/or sell 9 | copies of the Software, and to permit persons to whom the Software is 10 | furnished to do so, subject to the following conditions: 11 | 12 | The above copyright notice and this permission notice shall be included in all 13 | copies or substantial portions of the Software. 14 | 15 | THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR 16 | IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, 17 | FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE 18 | AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER 19 | LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, 20 | OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE 21 | SOFTWARE. 22 | -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | # spark.ui 2 | Beautiful Blazor components made with Tailwind CSS. 3 | 4 | ## How to use 5 | spark.ui components are meant to be copy and pasted into your Blazor project. This way you own the code and customize them as you see fit. 6 | 7 | ## Install spark.ui with Blazor or Spark.NET 8 | 9 | Check out the docs for installation [instructions](https://ui.spark-framework.net/docs/installation) 10 | -------------------------------------------------------------------------------- /Spark.UI.Docs/App.razor: -------------------------------------------------------------------------------- 1 |  2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 | 15 | 16 | 17 | 18 | 19 | 20 | 21 | 22 | 23 | 24 | Not found 25 | 26 |

Sorry, there's nothing at this address.

27 | 28 | 29 | 30 | 31 | @* 32 | *@ 33 | 34 | 35 | 36 | @* 37 | *@ 38 | 39 | 40 | 41 | -------------------------------------------------------------------------------- /Spark.UI.Docs/Pages/ComponentBasics.razor: -------------------------------------------------------------------------------- 1 | @page "/docs/component-basics" 2 | @layout DocsLayout 3 | 4 | 5 | Using spark.ui components - spark.ui 6 | 7 | 8 | 9 | 10 | Docs 11 | 12 | 13 | 14 | Component Basics 15 | 16 | 17 |
18 | 19 | Component Basics 20 | 21 | 22 | About spark.ui components 23 | 24 |
25 |
26 | 27 | spark.ui components are normal Razor components meant to be used in Blazor projects. 28 | 29 | 30 | They're' purpose is to give you a great design base with Tailwind CSS. They do no implement functionality for you. 31 | 32 | 33 | The majority of the components in the library inherit from SparkComponent.razor 34 | 35 | 36 | SparkComponent.razor Anatomy 37 | 38 | 39 | The SparkComponent has 2 parameters which are applicable to any component who inherits from it. 40 | 41 | 42 |
  • ChildContent
    • 43 |
  • AdditionalAttributes
    • 44 |     45 |
    46 |
    47 | 48 | ChildContent 49 | 50 | 51 | ChildContent is a RenderFragment and is set to anything inside your components tags. 52 | 53 | 54 | For example, the text between the below TypographyP component will be set to the ChildContent and displayed. 55 | 56 | 57 | @(@" 58 | This text is set to the ChildContent parameter. 59 | 60 | ") 61 | 62 | 63 | This makes components extremely flexible as you can make any markup or other components children of a component. 64 | 65 |
    66 |
    67 | 68 | AdditionalAttributes 69 | 70 | 71 | AdditionalAttributes is a Dictionary that will pickup any html attribute you pass into the component outside of it's normal parameters. 72 | 73 | 74 | For example, you want to set the type of a button. Passing the html attribute type="submit" to the Button component will be picked up by this dictionary and display it correctly in the rendered output. 75 | 76 | 77 | @(@" 80 | ") 81 | 82 |
    83 |
    84 | 85 | Variants 86 | 87 | 88 | Some components, such as the Button component, will have a Variant enum parameter. 89 | 90 | 91 | Variant parameters change the Tailwind CSS classes applied to the rendered element, making it easy to implement multiple styles for 1 component. 92 | 93 | 94 | Any component using a Variant parameter will use the default variant if none are provided. 95 | 96 |
    97 | Default Variant 98 | 99 | @($@"") 100 | 101 | 102 |
    103 |
    104 | Outline Variant 105 | 106 | @($@"") 107 | 108 | 109 |
    110 |
    -------------------------------------------------------------------------------- /Spark.UI.Docs/Pages/Components/Alerts.razor: -------------------------------------------------------------------------------- 1 | @page "/docs/components/alerts" 2 | @layout DocsLayout 3 | 4 | Alert component for Blazor - spark.ui 5 | 6 | 7 | 8 | Docs 9 | 10 | 11 | 12 | Alerts 13 | 14 | 15 |
    16 | 17 | Alerts 18 | 19 | 20 | Displays a callout for user attention 21 | 22 |
    23 |
    24 | 25 | Default 26 | 27 | 28 | 29 | 30 | 31 | Heads up! 32 | 33 | Donec eu tellus eu urna dignissim iaculis vel eget nisl. 34 | 35 | 36 | 37 | 38 | 39 | @($@" 40 | 41 | Heads up! 42 | 43 | Donec eu tellus eu urna dignissim iaculis vel eget nisl. 44 | 45 | ") 46 | 47 | 48 | 49 | 50 | Success 51 | 52 | 53 | 54 | 55 | 56 | Heads up! 57 | 58 | Donec eu tellus eu urna dignissim iaculis vel eget nisl. 59 | 60 | 61 | 62 | 63 | 64 | @($@" 65 | 66 | Success! 67 | 68 | Donec eu tellus eu urna dignissim iaculis vel eget nisl. 69 | 70 | ") 71 | 72 | 73 | 74 | 75 | Info 76 | 77 | 78 | 79 | 80 | 81 | Heads up! 82 | 83 | Donec eu tellus eu urna dignissim iaculis vel eget nisl. 84 | 85 | 86 | 87 | 88 | 89 | @($@" 90 | 91 | Heads up! 92 | 93 | Donec eu tellus eu urna dignissim iaculis vel eget nisl. 94 | 95 | ") 96 | 97 | 98 | 99 | 100 | Warning 101 | 102 | 103 | 104 | 105 | 106 | Heads up! 107 | 108 | Donec eu tellus eu urna dignissim iaculis vel eget nisl. 109 | 110 | 111 | 112 | 113 | 114 | @($@" 115 | 116 | Warning! 117 | 118 | Donec eu tellus eu urna dignissim iaculis vel eget nisl. 119 | 120 | ") 121 | 122 | 123 | 124 | 125 | Destructive 126 | 127 | 128 | 129 | 130 | 131 | Danger! 132 | 133 | Donec eu tellus eu urna dignissim iaculis vel eget nisl. 134 | 135 | 136 | 137 | 138 | 139 | @($@" 140 | 141 | Danger! 142 | 143 | Donec eu tellus eu urna dignissim iaculis vel eget nisl. 144 | 145 | ") 146 | 147 | 148 | 149 |
    -------------------------------------------------------------------------------- /Spark.UI.Docs/Pages/Components/AvatarPage.razor: -------------------------------------------------------------------------------- 1 | @page "/docs/components/avatar" 2 | @layout DocsLayout 3 | 4 | Avatar component for Blazor - spark.ui 5 | 6 | 7 | 8 | Docs 9 | 10 | 11 | 12 | Avatar 13 | 14 | 15 |
    16 | 17 | Avatar 18 | 19 | 20 | An image element to display a user's avatar 21 | 22 |
    23 |
    24 | 25 | Example 26 | 27 | 28 | 29 | 30 | 31 | 32 | 33 | 34 | 35 | @($@" 36 | 37 | ") 38 | 39 | 40 | 41 |
    -------------------------------------------------------------------------------- /Spark.UI.Docs/Pages/Components/Badges.razor: -------------------------------------------------------------------------------- 1 | @page "/docs/components/badges" 2 | @layout DocsLayout 3 | 4 | Badge component for Blazor - spark.ui 5 | 6 | 7 | 8 | Docs 9 | 10 | 11 | 12 | Badges 13 | 14 | 15 |
    16 | 17 | Badges 18 | 19 | 20 | Displays a badge component 21 | 22 |
    23 |
    24 | 25 | Default 26 | 27 | 28 | 29 | Badge 30 | 31 | 32 | 33 | @($@"Badge") 34 | 35 | 36 | 37 | 38 | Secondary 39 | 40 | 41 | 42 | Secondary 43 | 44 | 45 | 46 | @($@"Secondary") 47 | 48 | 49 | 50 | 51 | Outline 52 | 53 | 54 | 55 | Outline 56 | 57 | 58 | 59 | @($@"Outline") 60 | 61 | 62 | 63 | 64 | Success 65 | 66 | 67 | 68 | Success 69 | 70 | 71 | 72 | @($@"Success") 73 | 74 | 75 | 76 | 77 | Info 78 | 79 | 80 | 81 | Info 82 | 83 | 84 | 85 | @($@"Info") 86 | 87 | 88 | 89 | 90 | Warning 91 | 92 | 93 | 94 | Warning 95 | 96 | 97 | 98 | @($@"Warning") 99 | 100 | 101 | 102 | 103 | Destructive 104 | 105 | 106 | 107 | Destructive 108 | 109 | 110 | 111 | @($@"Destructive") 112 | 113 | 114 | 115 |
    -------------------------------------------------------------------------------- /Spark.UI.Docs/Pages/Components/Blockquotes.razor: -------------------------------------------------------------------------------- 1 | @page "/docs/components/blockquote" 2 | @layout DocsLayout 3 | 4 | Blockquote component for Blazor - spark.ui 5 | 6 | 7 | 8 | Docs 9 | 10 | 11 | 12 | Blockquote 13 | 14 | 15 |
    16 | 17 | Blockquote 18 | 19 | 20 | Style for the blockquote element 21 | 22 |
    23 |
    24 | 25 | 26 |
    27 | "Proin vel risus pharetra, cursus mauris id, facilisis nisl. Nulla facilisi. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas." 28 |
    29 |     30 | 31 | 32 | @($@"
    33 | ""Proin vel risus pharetra, cursus mauris id, facilisis nisl. Nulla facilisi. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas."" 34 |
    ") 35 |     36 |     37 |     38 |
    -------------------------------------------------------------------------------- /Spark.UI.Docs/Pages/Components/BreadcrumbPage.razor: -------------------------------------------------------------------------------- 1 | @page "/docs/components/breadcrumb" 2 | @layout DocsLayout 3 | 4 | Breadcrumb component for Blazor - spark.ui 5 | 6 | 7 | 8 | Docs 9 | 10 | 11 | 12 | Breadcrumb 13 | 14 | 15 |
    16 | 17 | Breadcrumb 18 | 19 | 20 | Displays a breadcrumb component 21 | 22 |
    23 |
    24 | 25 | Example 26 | 27 | 28 | 29 | 30 | 31 | Profile 32 | 33 | 34 | 35 | Edit 36 | 37 | 38 | 39 | 40 | 41 | @($@" 42 | 43 | Profile 44 | 45 | 46 | 47 | Edit 48 | 49 | ") 50 | 51 | 52 | 53 | 54 | Breadcrumb with Links 55 | 56 | 57 | 58 | 59 | 60 | Dashboard 61 | 62 | 63 | 64 | Profile 65 | 66 | 67 | 68 | Settings 69 | 70 | 71 | 72 | 73 | 74 | @($@" 75 | 76 | Dashboard 77 | 78 | 79 | 80 | Profile 81 | 82 | 83 | 84 | Settings 85 | 86 | ") 87 | 88 | 89 | 90 |
    -------------------------------------------------------------------------------- /Spark.UI.Docs/Pages/Components/Buttons.razor: -------------------------------------------------------------------------------- 1 | @page "/docs/components/buttons" 2 | @layout DocsLayout 3 | 4 | Button component for Blazor - spark.ui 5 | 6 | 7 | 8 | Docs 9 | 10 | 11 | 12 | Buttons 13 | 14 | 15 |
    16 | 17 | Buttons 18 | 19 | 20 | Displays a button or link that looks like a button 21 | 22 |
    23 |
    24 | 25 | Primary 26 | 27 | 28 | 29 | 30 | 31 | 32 | 33 | @($@"") 34 | 35 | 36 | 37 | 38 | Link 39 | 40 | 41 | The ButtonLink component is a link styled as a button. 42 | 43 | 44 | 45 | Link 46 | 47 | 48 | 49 | @($@"Link") 50 | 51 | 52 | 53 | 54 | Secondary 55 | 56 | 57 | 58 | 59 | 60 | 61 | 62 | @($@"") 63 | 64 | 65 | 66 | 67 | Destructive 68 | 69 | 70 | 71 | 72 | 73 | 74 | 75 | @($@"") 76 | 77 | 78 | 79 | 80 | Outline 81 | 82 | 83 | 84 | 85 | 86 | 87 | 88 | @($@"") 89 | 90 | 91 | 92 | 93 | Ghost 94 | 95 | 96 | 97 | 98 | 99 | 100 | 101 | @($@"") 102 | 103 | 104 | 105 | 106 | Icon 107 | 108 | 109 | 110 | 113 | 114 | 115 | 116 | @($@"") 119 | 120 | 121 | 122 |
    -------------------------------------------------------------------------------- /Spark.UI.Docs/Pages/Components/CardPage.razor: -------------------------------------------------------------------------------- 1 | @page "/docs/components/card" 2 | @layout DocsLayout 3 | 4 | Card component for Blazor - spark.ui 5 | 6 | 7 | 8 | Docs 9 | 10 | 11 | 12 | Card 13 | 14 | 15 |
    16 | 17 | Card 18 | 19 | 20 | Displays a card with header, content, and footer. 21 | 22 |
    23 |
    24 | 25 | Example 26 | 27 | 28 | 29 | 30 | 31 | 32 | Sign in to your account 33 | 34 | 35 | Not a member? Start a 7 day free trial 36 | 37 | 38 | 39 |
    40 |
    41 |
    42 | 43 | 44 |
    45 |
    46 | 47 | 48 |
    49 |
    50 |
    51 | 52 |
    53 |
    54 |     55 | 56 | Don't' have an account?  57 | Sign up 58 | 59 |     60 |     61 | 62 | 63 | @($@" 64 | 65 | 66 | Sign in to your account 67 | 68 | 69 | Not a member? Start a 7 day free trial 70 | 71 | 72 | 73 |
    74 |
    75 |
    76 | 77 | 78 |
    79 |
    80 | 81 | 82 |
    83 |
    84 |
    85 | 86 |
    87 |
    88 |     89 | 90 | Don't' have an account?  91 | Sign up 92 | 93 |     ") 94 |     95 |     96 |     97 |
    98 | 99 | @code { 100 | public string Test { get; set; } = ""; 101 | } -------------------------------------------------------------------------------- /Spark.UI.Docs/Pages/Components/Form/Checkbox.razor: -------------------------------------------------------------------------------- 1 | @page "/docs/components/checkbox" 2 | @layout DocsLayout 3 | 4 | Checkbox component for Blazor - spark.ui 5 | 6 | 7 | 8 | Docs 9 | 10 | 11 | 12 | Checkbox 13 | 14 | 15 |
    16 | 17 | Checkbox 18 | 19 | 20 | Checkbox form control that toggles between checked and not checked 21 | 22 |
    23 |
    24 | 25 | Example 26 | 27 | 28 | 29 |
    30 | 31 | 34 |
    35 |     36 | 37 | 38 | @($@"
    39 | 40 | 43 |
    44 | 45 | @code {{ 46 | private bool IsSelected = false; 47 | }}") 48 |     49 |     50 |     51 | 52 | With Description 53 | 54 | 55 | 56 |
    57 | 58 |
    59 | 62 | 63 | You agree to our Terms of Service 64 | 65 |
    66 |
    67 |     68 | 69 | 70 | @($@"
    71 | 72 |
    73 | 76 | 77 | You agree to our Terms of Service 78 | 79 |
    80 |
    81 | 82 | @code {{ 83 | private bool IsSelected = false; 84 | }}") 85 |     86 |     87 |     88 | 89 | Disabled 90 | 91 | 92 | 93 |
    94 | 95 | 98 |
    99 |     100 | 101 | 102 | @($@"
    103 | 104 | 107 |
    108 | 109 | @code {{ 110 | private bool IsSelected = false; 111 | }}") 112 |     113 |     114 |     115 |
    116 | 117 | @code { 118 | private bool IsSelected = false; 119 | } -------------------------------------------------------------------------------- /Spark.UI.Docs/Pages/Components/Form/FormDescriptionPage.razor: -------------------------------------------------------------------------------- 1 | @page "/docs/components/form-description" 2 | @layout DocsLayout 3 | 4 | Form description component for Blazor - spark.ui 5 | 6 | 7 | 8 | Docs 9 | 10 | 11 | 12 | Form Description 13 | 14 | 15 |
    16 | 17 | Form Description 18 | 19 | 20 | Displays a description for a form input control 21 | 22 |
    23 |
    24 | 25 | Example 26 | 27 | 28 | 29 |
    30 | 31 | 32 | Enter your business email address 33 |
    34 |     35 | 36 | 37 | @($@"
    38 | 39 | 40 | Enter your business email address 41 |
    ") 42 |     43 |     44 |     45 |
    46 | 47 | 48 | @code { 49 | private string Email = ""; 50 | } -------------------------------------------------------------------------------- /Spark.UI.Docs/Pages/Components/Form/Forms.razor: -------------------------------------------------------------------------------- 1 | @page "/docs/components/forms" 2 | @layout DocsLayout 3 | 4 | Form component for Blazor - spark.ui 5 | 6 | 7 | 8 | Docs 9 | 10 | 11 | 12 | Forms 13 | 14 | 15 |
    16 | 17 | Forms 18 | 19 | 20 | Styles for forms, inputs, selects, etc... 21 | 22 | 23 | Unlike the rest of the components in spark.ui, there are no custom form or input components. 24 | 25 | 26 | Instead, we use the custom form and input components provided by Microsoft and style them in the globals.css file. 27 | 28 |
    29 |
    30 | 31 | Example 32 | 33 | 34 | 35 | 36 | 37 |
    38 | 39 | 40 | 41 |
    42 |
    43 | 44 |
    45 |     46 |     47 | 48 | 49 | @($@" 50 | 51 |
    52 | 53 | 54 | Form.Name"" /> 55 |
    56 |
    57 | 58 |
    59 |     ") 60 |     61 |     62 |     63 | 64 | With Input Groups 65 | 66 | 67 | Input groups will create a Label and Validation Message for you based on the For parameter. 68 | 69 | 70 | 71 | 72 | 73 | 74 | 75 | 76 |
    77 | 78 |
    79 |     80 |     81 | 82 | 83 | @($@" 84 | 85 | Form.Name"" Description=""Provide your full legal name""> 86 | 87 | 88 |
    89 | 90 |
    91 |     ") 92 |     93 |     94 |     95 | 96 | With Cancel Link 97 | 98 | 99 | 100 | 101 | 102 | 103 | 104 | 105 |
    106 | Cancel 107 | 108 |
    109 |     110 |     111 | 112 | 113 | @($@" 114 | 115 | Form.Name"" Description=""Provide your full legal name""> 116 | 117 | 118 |
    119 | Cancel 120 | 121 |
    122 |     ") 123 |     124 |     125 |     126 |
    127 | 128 | @code { 129 | [SupplyParameterFromForm] public ProfileForm Form { get; set; } 130 | 131 | protected override void OnInitialized() => Form ??= new(); 132 | 133 | bool submitted = false; 134 | 135 | public void Submit() { 136 | Form = new(); 137 | } 138 | 139 | public class ProfileForm 140 | { 141 | [Required] 142 | public string Name { get; set; } 143 | } 144 | } -------------------------------------------------------------------------------- /Spark.UI.Docs/Pages/Components/Form/InputGroupPage.razor: -------------------------------------------------------------------------------- 1 | @page "/docs/components/input-group" 2 | @layout DocsLayout 3 | 4 | 5 | Input group component for Blazor - spark.ui 6 | 7 | 8 | 9 | Docs 10 | 11 | 12 | 13 | Input Group 14 | 15 | 16 |
    17 | 18 | Input Group 19 | 20 | 21 | A component to display a form input field with a label and validation message 22 | 23 | 24 | Input groups will create a Label and Validation Message for you. 25 | 26 | 27 | The For parameter is used to set up the Label and ValidationMessage. 28 | 29 |
    30 |
    31 | 32 | Example 33 | 34 | 35 | 36 | 37 | 38 | 39 | 40 | 41 | 42 | 43 | 44 |
    45 | 46 |
    47 |     48 |     49 | 50 | 51 | @($@" 52 | 53 | Form.Name""> 54 | 55 | 56 | Form.Email""> 57 | 58 | 59 |
    60 | 61 |
    62 |     ") 63 |     64 |     65 |     66 | 67 | With Custom Labels 68 | 69 | 70 | The Label parameter is optional. If provided, it will override the derived label from the For parameter. 71 | 72 | 73 | 74 | 75 | 76 | 77 | 78 | 79 | 80 | 81 | 82 |
    83 | 84 |
    85 |     86 |     87 | 88 | 89 | @($@" 90 | 91 | Form.Name"" Label=""Fullname""> 92 | 93 | 94 | Form.Email"" Label=""Email Address""> 95 | 96 | 97 |
    98 | 99 |
    100 |     ") 101 |     102 |     103 |     104 | 105 | With Descriptions 106 | 107 | 108 | The Description parameter is optional. If provided, a description will be displayed under the form control. 109 | 110 | 111 | 112 | 113 | 114 | 115 | 116 | 117 | 118 | 119 | 120 |
    121 | 122 |
    123 |     124 |     125 | 126 | 127 | @($@" 128 | 129 | Form.Name"" Description=""Provide your full name""> 130 | 131 | 132 | Form.Email"" Description=""Provide your business email""> 133 | 134 | 135 |
    136 | 137 |
    138 |     ") 139 |     140 |     141 |     142 |
    143 | 144 | @code { 145 | [SupplyParameterFromForm] public ProfileForm Form { get; set; } 146 | 147 | protected override void OnInitialized() => Form ??= new(); 148 | 149 | bool submitted = false; 150 | 151 | public void Submit() 152 | { 153 | Form = new(); 154 | } 155 | 156 | public class ProfileForm 157 | { 158 | [Required] 159 | public string Name { get; set; } 160 | [Required] 161 | public string Email { get; set; } 162 | } 163 | } -------------------------------------------------------------------------------- /Spark.UI.Docs/Pages/Components/Form/Inputs.razor: -------------------------------------------------------------------------------- 1 | @page "/docs/components/inputs" 2 | @layout DocsLayout 3 | 4 | Input component for Blazor - spark.ui 5 | 6 | 7 | 8 | Docs 9 | 10 | 11 | 12 | Input 13 | 14 | 15 |
    16 | 17 | Input 18 | 19 | 20 | Displays a form input control 21 | 22 |
    23 |
    24 | 25 | Text 26 | 27 | 28 | 29 | Gotchya Warning! 30 | 31 | The InputText component does not set the type attribute for you. It is required for you to set this yourself or spark.ui styles will not apply. 32 | 33 | 34 | Example: type="text" 35 | 36 | 37 | 38 | 39 |
    40 | 41 |
    42 |     43 | 44 | 45 | @($@" 46 | 47 | @code {{ 48 | private string Name = """"; 49 | }}") 50 | 51 | 52 |     53 | 54 | With Label 55 | 56 | 57 | 58 |
    59 |
    60 | 61 | 62 |
    63 |
    64 |     65 | 66 | 67 | @($@"
    68 | 69 | 70 |
    71 | 72 | @code {{ 73 | private string Name = """"; 74 | }}") 75 |     76 |     77 |     78 | 79 | With Input Group 80 | 81 | 82 | 83 | 84 |
    85 |
    86 | 87 | 88 |

    89 | Provide your fullname 90 |

    91 |
    92 |
    93 |     94 |     95 | 96 | 97 | @($@" 98 | Name"" Description=""Provide your fullname""> 99 | 100 | 101 | ") 102 | 103 | 104 |     105 | 106 | Date 107 | 108 | 109 | 110 |
    111 | 112 |
    113 |     114 | 115 | 116 | @($@" 117 | 118 | @code {{ 119 | private DateTime Date = DateTime.Now; 120 | }}") 121 | 122 | 123 |     124 | 125 | File 126 | 127 | 128 | 129 |
    130 | 131 |
    132 |     133 | 134 | 135 | @($@"") 136 | 137 | 138 |     139 | 140 | Email 141 | 142 | 143 | 144 |
    145 | 146 |
    147 |     148 | 149 | 150 | @($@" 151 | 152 | @code {{ 153 | private string Email = """"; 154 | }}") 155 | 156 | 157 |     158 | 159 | Password 160 | 161 | 162 | 163 |
    164 | 165 |
    166 |     167 | 168 | 169 | @($@" 170 | 171 | @code {{ 172 | private string Password = """"; 173 | }}") 174 | 175 | 176 |     177 | 178 | Disabled 179 | 180 | 181 | 182 |
    183 | 184 |
    185 |     186 | 187 | 188 | @($@" 189 | 190 | @code {{ 191 | private string Name = """"; 192 | }}") 193 | 194 | 195 |     196 |
    197 | 198 | @code { 199 | private string Name = ""; 200 | private string Email = ""; 201 | private string Password = ""; 202 | private DateTime Date = DateTime.Now; 203 | } -------------------------------------------------------------------------------- /Spark.UI.Docs/Pages/Components/Form/LabelPage.razor: -------------------------------------------------------------------------------- 1 | @page "/docs/components/label" 2 | @layout DocsLayout 3 | 4 | Label component for Blazor - spark.ui 5 | 6 | 7 | 8 | Docs 9 | 10 | 11 | 12 | Label 13 | 14 | 15 |
    16 | 17 | Label 18 | 19 | 20 | Displays a label associated with controls 21 | 22 |
    23 |
    24 | 25 | Example 26 | 27 | 28 | 29 |
    30 | 33 | 34 |
    35 |     36 | 37 | 38 | @($@"
    39 | 42 | 43 |
    44 | 45 | @code {{ 46 | private string Name = """"; 47 | }}") 48 |     49 |     50 |     51 | 52 | Input Group 53 | 54 | 55 | The InputGroup component will display a label for you based on the For parameter. 56 | 57 | 58 | 59 | 60 | 61 | 62 | 63 | 64 |
    65 | 66 |
    67 |     68 |     69 | 70 | 71 | @($@" 72 | 73 | Form.Name""> 74 | 75 | 76 |
    77 | 78 |
    79 |     ") 80 |     81 |     82 |     83 | 84 | Checkbox Label 85 | 86 | 87 | Checkbox labels typically come after the InputCheckbox component. 88 | 89 | 90 | 91 |
    92 | 93 | 96 |
    97 |     98 | 99 | 100 | @($@"
    101 | 102 | 105 |
    106 | 107 | @code {{ 108 | private bool IsSelected = false; 109 | }}") 110 |     111 |     112 |     113 |
    114 | 115 | @code { 116 | private string Name = ""; 117 | private bool IsSelected = false; 118 | [SupplyParameterFromForm] public ProfileForm Form { get; set; } 119 | protected override void OnInitialized() => Form ??= new(); 120 | 121 | public void Submit() 122 | { 123 | Form = new(); 124 | } 125 | 126 | public class ProfileForm 127 | { 128 | [Required] 129 | public string Name { get; set; } 130 | [Required] 131 | public string Email { get; set; } 132 | } 133 | } -------------------------------------------------------------------------------- /Spark.UI.Docs/Pages/Components/Form/SelectPage.razor: -------------------------------------------------------------------------------- 1 | @page "/docs/components/select" 2 | @layout DocsLayout 3 | 4 | Select component for Blazor - spark.ui 5 | 6 | 7 | 8 | Docs 9 | 10 | 11 | 12 | Select 13 | 14 | 15 |
    16 | 17 | Select 18 | 19 | 20 | Displays a list of options for the user to pick from. 21 | 22 |
    23 |
    24 | 25 | Example 26 | 27 | 28 | 29 |
    30 | 31 | 32 | @foreach (var pizza in Pizzas) 33 | { 34 | 35 | } 36 | 37 |
    38 |     39 | 40 | 41 | @($@"
    42 | 43 | 44 | @foreach (var pizza in Pizzas) 45 | {{ 46 | 47 | }} 48 | 49 |
    50 | 51 | @code {{ 52 | private Dictionary Pizzas = new Dictionary() 53 | {{ 54 | {{ 55 | ""bbq_chicken"", ""Bbq Chicken"" 56 | }}, 57 | {{ 58 | ""cheese"", ""Cheese"" 59 | }}, 60 | {{ 61 | ""hawaiian"", ""Hawaiian"" 62 | }}, 63 | {{ 64 | ""pepperoni"", ""Pepperoni"" 65 | }}, 66 | {{ 67 | ""supreme"", ""Supreme"" 68 | }} 69 | }}; 70 | private string FavoritePizza {{ get; set; }} 71 | }}") 72 |     73 |     74 |     75 | 76 | With Label 77 | 78 | 79 | 80 |
    81 | 82 | 83 | 84 | @foreach (var pizza in Pizzas) 85 | { 86 | 87 | } 88 | 89 |
    90 |     91 | 92 | 93 | @($@"
    94 | 95 | 96 | 97 | @foreach (var pizza in Pizzas) 98 | {{ 99 | 100 | }} 101 | 102 |
    103 | 104 | @code {{ 105 | private Dictionary Pizzas = new Dictionary() 106 | {{ 107 | {{ 108 | ""bbq_chicken"", ""Bbq Chicken"" 109 | }}, 110 | {{ 111 | ""cheese"", ""Cheese"" 112 | }}, 113 | {{ 114 | ""hawaiian"", ""Hawaiian"" 115 | }}, 116 | {{ 117 | ""pepperoni"", ""Pepperoni"" 118 | }}, 119 | {{ 120 | ""supreme"", ""Supreme"" 121 | }} 122 | }}; 123 | private string FavoritePizza {{ get; set; }} 124 | }}") 125 |     126 |     127 |     128 | 129 | Input Group 130 | 131 | 132 | The InputGroup component will display a label for you based on the For parameter. 133 | 134 | 135 | 136 | 137 | 138 | 139 | 140 | 141 | @foreach (var pizza in Pizzas) 142 | { 143 | 144 | } 145 | 146 | 147 |
    148 | 149 |
    150 |     151 |     152 | 153 | 154 | @($@" 155 | 156 | Form.FavoritePizza"" Label=""Pizza"" Description=""Select your favorite pizza""> 157 | 158 | 159 | @foreach (var pizza in Pizzas) 160 | {{ 161 | 162 | }} 163 | 164 | 165 |
    166 | 167 |
    168 |     169 | 170 | @code {{ 171 | 172 | public PizzaForm Form {{ get; set; }} = new(); 173 | 174 | private Dictionary Pizzas = new Dictionary() 175 | {{ 176 | {{ 177 | ""bbq_chicken"", ""Bbq Chicken"" 178 | }}, 179 | {{ 180 | ""cheese"", ""Cheese"" 181 | }}, 182 | {{ 183 | ""hawaiian"", ""Hawaiian"" 184 | }}, 185 | {{ 186 | ""pepperoni"", ""Pepperoni"" 187 | }}, 188 | {{ 189 | ""supreme"", ""Supreme"" 190 | }} 191 | }}; 192 | 193 | public class PizzaForm 194 | {{ 195 | [Required] 196 | public string FavoritePizza {{ get; set; }} 197 | }} 198 | }}") 199 |     200 |     201 |     202 | 203 | Disabled 204 | 205 | 206 | 207 |
    208 | 209 | 210 | @foreach (var pizza in Pizzas) 211 | { 212 | 213 | } 214 | 215 |
    216 |     217 | 218 | 219 | @($@"
    220 | 221 | 222 | @foreach (var pizza in Pizzas) 223 | {{ 224 | 225 | }} 226 | 227 |
    228 | 229 | @code {{ 230 | private Dictionary Pizzas = new Dictionary() 231 | {{ 232 | {{ 233 | ""bbq_chicken"", ""Bbq Chicken"" 234 | }}, 235 | {{ 236 | ""cheese"", ""Cheese"" 237 | }}, 238 | {{ 239 | ""hawaiian"", ""Hawaiian"" 240 | }}, 241 | {{ 242 | ""pepperoni"", ""Pepperoni"" 243 | }}, 244 | {{ 245 | ""supreme"", ""Supreme"" 246 | }} 247 | }}; 248 | private string FavoritePizza {{ get; set; }} 249 | }}") 250 |     251 |     252 |     253 |
    254 | 255 | @code { 256 | private Dictionary Pizzas = new Dictionary() 257 | { 258 | { 259 | "bbq_chicken", "Bbq Chicken" 260 | }, 261 | { 262 | "cheese", "Cheese" 263 | }, 264 | { 265 | "hawaiian", "Hawaiian" 266 | }, 267 | { 268 | "pepperoni", "Pepperoni" 269 | }, 270 | { 271 | "supreme", "Supreme" 272 | } 273 | }; 274 | private string FavoritePizza { get; set; } 275 | private string Name = ""; 276 | [SupplyParameterFromForm] public PizzaForm Form { get; set; } 277 | protected override void OnInitialized() => Form ??= new(); 278 | 279 | public void Submit() 280 | { 281 | Form = new(); 282 | } 283 | 284 | public class PizzaForm 285 | { 286 | [Required] 287 | public string FavoritePizza { get; set; } 288 | } 289 | } -------------------------------------------------------------------------------- /Spark.UI.Docs/Pages/Components/Form/TextAreaPage.razor: -------------------------------------------------------------------------------- 1 | @page "/docs/components/textarea" 2 | @layout DocsLayout 3 | 4 | Textarea component for Blazor - spark.ui 5 | 6 | 7 | 8 | Docs 9 | 10 | 11 | 12 | Textarea 13 | 14 | 15 |
    16 | 17 | Textarea 18 | 19 | 20 | Displays a form textarea control 21 | 22 |
    23 |
    24 | 25 | Example 26 | 27 | 28 | 29 |
    30 | 31 |
    32 |     33 | 34 | 35 | @($@"
    36 | 37 |
    38 | 39 | @code {{ 40 | private string Message = ""; 41 | }}") 42 |     43 |     44 |     45 | 46 | Label 47 | 48 | 49 | 50 |
    51 | 52 | 53 |
    54 |     55 | 56 | 57 | @($@"
    58 | 59 | 60 |
    61 | 62 | @code {{ 63 | private string Message = ""; 64 | }}") 65 |     66 |     67 |     68 | 69 | Input Group 70 | 71 | 72 | 73 | 74 | 75 | 76 | 77 | 78 |
    79 | 82 |
    83 |     84 |     85 | 86 | 87 | @($@" 88 | 89 | Form.Message"" Description=""Tell us why you love our pizza so much""> 90 | 91 | 92 |
    93 | 96 |
    97 |     ") 98 |     99 |     100 |     101 | 102 | Disabled 103 | 104 | 105 | 106 |
    107 | 108 |
    109 |     110 | 111 | 112 | @($@"
    113 | 114 |
    ") 115 |     116 |     117 |     118 |
    119 | 120 | @code { 121 | private string Message = ""; 122 | private PizzaForm Form { get; set; } = new(); 123 | 124 | private void Submit() 125 | { 126 | 127 | } 128 | 129 | private class PizzaForm 130 | { 131 | [Required] 132 | public string Message { get; set; } 133 | } 134 | } -------------------------------------------------------------------------------- /Spark.UI.Docs/Pages/Components/Form/ValidationMessagePage.razor: -------------------------------------------------------------------------------- 1 | @page "/docs/components/validation-message" 2 | @layout DocsLayout 3 | 4 | Validation message component for Blazor - spark.ui 5 | 6 | 7 | 8 | Docs 9 | 10 | 11 | 12 | Validation Message 13 | 14 | 15 |
    16 | 17 | Validation Message 18 | 19 | 20 | Displays a validation message for a input control 21 | 22 |
    23 |
    24 | 25 | Example 26 | 27 | 28 | 29 |
    30 |
    31 | 32 | 33 |
    34 | Required 35 |
    36 |
    37 | 38 |
    39 |     40 | 41 | 42 | @($@" 43 | 44 |
    45 | 46 | 47 | Email"" 48 |
    49 | 50 |
    51 | 52 | @code {{ 53 | private string Email = """"; 54 | }} 55 | ") 56 | 57 | 58 | 59 | 60 | 61 | 62 | @code { 63 | private string Email = ""; 64 | } -------------------------------------------------------------------------------- /Spark.UI.Docs/Pages/Components/Heading1.razor: -------------------------------------------------------------------------------- 1 | @page "/docs/components/heading1" 2 | @layout DocsLayout 3 | 4 | H1 component for Blazor - spark.ui 5 | 6 | 7 | 8 | Docs 9 | 10 | 11 | 12 | Heading 1 13 | 14 | 15 |
    16 | 17 | Heading1 18 | 19 | 20 | Style for the h1 element 21 | 22 |
    23 |
    24 | 25 | 26 | 27 | Lorem Ipsum 28 | 29 | 30 | 31 | 32 | @($@" 33 | Lorem Ipsum 34 | ") 35 | 36 | 37 | 38 |
    -------------------------------------------------------------------------------- /Spark.UI.Docs/Pages/Components/Heading2.razor: -------------------------------------------------------------------------------- 1 | @page "/docs/components/heading2" 2 | @layout DocsLayout 3 | 4 | H2 component for Blazor - spark.ui 5 | 6 | 7 | 8 | Docs 9 | 10 | 11 | 12 | Heading 2 13 | 14 | 15 |
    16 | 17 | Heading 2 18 | 19 | 20 | Style for the h2 element 21 | 22 |
    23 |
    24 | 25 | 26 | 27 | 28 | Lorem Ipsum 29 | 30 | 31 | 32 | 33 | @($@" 34 | Lorem Ipsum 35 | ") 36 | 37 | 38 | 39 |
    -------------------------------------------------------------------------------- /Spark.UI.Docs/Pages/Components/Heading3.razor: -------------------------------------------------------------------------------- 1 | @page "/docs/components/heading3" 2 | @layout DocsLayout 3 | 4 | H3 component for Blazor - spark.ui 5 | 6 | 7 | 8 | Docs 9 | 10 | 11 | 12 | Heading 3 13 | 14 | 15 |
    16 | 17 | Heading 3 18 | 19 | 20 | Style for the h3 element 21 | 22 |
    23 |
    24 | 25 | 26 | 27 | Lorem Ipsum 28 | 29 | 30 | 31 | 32 | @($@" 33 | Lorem Ipsum 34 | ") 35 | 36 | 37 | 38 |
    -------------------------------------------------------------------------------- /Spark.UI.Docs/Pages/Components/Heading4.razor: -------------------------------------------------------------------------------- 1 | @page "/docs/components/heading4" 2 | @layout DocsLayout 3 | 4 | H4 component for Blazor - spark.ui 5 | 6 | 7 | 8 | Docs 9 | 10 | 11 | 12 | Heading 4 13 | 14 | 15 |
    16 | 17 | Heading 4 18 | 19 | 20 | Style for the h4 element 21 | 22 |
    23 |
    24 | 25 | 26 | 27 | Phasellus Placerat Nibh A Orci Tristique 28 | 29 | 30 | 31 | 32 | @($@" 33 | Phasellus Placerat Nibh A Orci Tristique 34 | ") 35 | 36 | 37 | 38 |
    -------------------------------------------------------------------------------- /Spark.UI.Docs/Pages/Components/Hero.razor: -------------------------------------------------------------------------------- 1 | @page "/docs/components/hero" 2 | @layout DocsLayout 3 | 4 | Hero component for Blazor - spark.ui 5 | 6 | 7 | 8 | Docs 9 | 10 | 11 | 12 | Hero 13 | 14 | 15 |
    16 | 17 | Hero 18 | 19 | 20 | Style for the h1 element meant to be used as a hero 21 | 22 |
    23 |
    24 | 25 | 26 | 27 | Lorem Ipsum 28 | 29 | 30 | 31 | 32 | @($@" 33 | Lorem Ipsum 34 | ") 35 | 36 | 37 | 38 |
    -------------------------------------------------------------------------------- /Spark.UI.Docs/Pages/Components/InlineCodePage.razor: -------------------------------------------------------------------------------- 1 | @page "/docs/components/inline-code" 2 | @layout DocsLayout 3 | 4 | Inline code component for Blazor - spark.ui 5 | 6 | 7 | 8 | Docs 9 | 10 | 11 | 12 | Inline Code 13 | 14 | 15 |
    16 | 17 | Inline Code 18 | 19 | 20 | Style for the code element 21 | 22 |
    23 |
    24 | 25 | 26 | 27 | Run 28 | 29 | dotnet build 30 | 31 | to get started 32 | 33 | 34 | 35 | 36 | @($@" 37 | Run 38 | 39 | dotnet build 40 | 41 | to get started 42 | ") 43 | 44 | 45 | 46 |
    -------------------------------------------------------------------------------- /Spark.UI.Docs/Pages/Components/InlineLinkPage.razor: -------------------------------------------------------------------------------- 1 | @page "/docs/components/inline-link" 2 | @layout DocsLayout 3 | 4 | Inline link component for Blazor - spark.ui 5 | 6 | 7 | 8 | Docs 9 | 10 | 11 | 12 | Inline Link 13 | 14 | 15 |
    16 | 17 | Inline Link 18 | 19 | 20 | Style for a inline link 21 | 22 |
    23 |
    24 | 25 | 26 | 27 | Donec eu tellus eu urna 28 | 29 | dignissim 30 | 31 | iaculis vel eget nisl. 32 | 33 | 34 | 35 | 36 | @($@" 37 | Donec eu tellus eu urna 38 | 39 | dignissim 40 | 41 | iaculis vel eget nisl. 42 | ") 43 | 44 | 45 | 46 |
    -------------------------------------------------------------------------------- /Spark.UI.Docs/Pages/Components/Large.razor: -------------------------------------------------------------------------------- 1 | @page "/docs/components/large" 2 | @layout DocsLayout 3 | 4 | Large text component for Blazor - spark.ui 5 | 6 | 7 | 8 | Docs 9 | 10 | 11 | 12 | Large 13 | 14 | 15 |
    16 | 17 | Large 18 | 19 | 20 | Style for a text element with bolded larger text 21 | 22 |
    23 |
    24 | 25 | 26 | 27 | Etiam sodales arcu vel lacinia cursus? 28 | 29 | 30 | 31 | 32 | @($@" 33 | Etiam sodales arcu vel lacinia cursus? 34 | ") 35 | 36 | 37 | 38 |
    -------------------------------------------------------------------------------- /Spark.UI.Docs/Pages/Components/Lead.razor: -------------------------------------------------------------------------------- 1 | @page "/docs/components/lead" 2 | @layout DocsLayout 3 | 4 | Lead text component for Blazor - spark.ui 5 | 6 | 7 | 8 | Docs 9 | 10 | 11 | 12 | Lead 13 | 14 | 15 |
    16 | 17 | Lead 18 | 19 | 20 | Style for the p element with muted color and larger text 21 | 22 |
    23 |
    24 | 25 | 26 | 27 | Etiam sodales arcu vel lacinia cursus. Sed malesuada, lorem non. 28 | 29 | 30 | 31 | 32 | @($@" 33 | Etiam sodales arcu vel lacinia cursus. Sed malesuada, lorem non. 34 | ") 35 | 36 | 37 | 38 |
    -------------------------------------------------------------------------------- /Spark.UI.Docs/Pages/Components/List.razor: -------------------------------------------------------------------------------- 1 | @page "/docs/components/list" 2 | @layout DocsLayout 3 | 4 | List component for Blazor - spark.ui 5 | 6 | 7 | 8 | Docs 9 | 10 | 11 | 12 | List 13 | 14 | 15 |
    16 | 17 | List 18 | 19 | 20 | Style for the ul element 21 | 22 |
    23 |
    24 | 25 | 26 | 27 |
  • 28 | Cras non purus 29 |
    • 30 |
  • 31 | Vivamus varius ultricies 32 |
    • 33 |
  • 34 | Ut ullamcorper 35 |
    • 36 |     37 |     38 | 39 | 40 | @($@" 41 |
  • 42 | Cras non purus 43 |
    • 44 |
  • 45 | Vivamus varius ultricies 46 |
    • 47 |
  • 48 | Ut ullamcorper 49 |
    • 50 |     ") 51 |     52 |     53 |     54 |
    -------------------------------------------------------------------------------- /Spark.UI.Docs/Pages/Components/Muted.razor: -------------------------------------------------------------------------------- 1 | @page "/docs/components/muted" 2 | @layout DocsLayout 3 | 4 | Muted text component for Blazor - spark.ui 5 | 6 | 7 | 8 | Docs 9 | 10 | 11 | 12 | Muted 13 | 14 | 15 |
    16 | 17 | Muted 18 | 19 | 20 | Style for a p element with light colors and small text 21 | 22 |
    23 |
    24 | 25 | 26 | 27 | Etiam sodales arcu vel lacinia cursus. 28 | 29 | 30 | 31 | 32 | @($@" 33 | Etiam sodales arcu vel lacinia cursus. 34 | ") 35 | 36 | 37 | 38 |
    -------------------------------------------------------------------------------- /Spark.UI.Docs/Pages/Components/NavigationBarPage.razor: -------------------------------------------------------------------------------- 1 | @page "/docs/components/navbar" 2 | @layout DocsLayout 3 | 4 | Navbar and nav links components for Blazor - spark.ui 5 | 6 | 7 | 8 | Docs 9 | 10 | 11 | 12 | Navigation Bar 13 | 14 | 15 |
    16 | 17 | Navigation Bar 18 | 19 | 20 | Displays a Navbar 21 | 22 |
    23 |
    24 | 25 | 26 | 27 | 41 |
    42 | 43 | Login 44 | 45 | 46 | Signup 47 | 48 |
    49 |     50 |     51 | 52 | 53 | @($@" 54 | 68 |
    69 | 70 | Login 71 | 72 | 73 | Signup 74 | 75 |
    76 |     ") 77 |     78 |     79 |     80 |
    -------------------------------------------------------------------------------- /Spark.UI.Docs/Pages/Components/Paragraph.razor: -------------------------------------------------------------------------------- 1 | @page "/docs/components/paragraph" 2 | @layout DocsLayout 3 | 4 | Paragraph component for Blazor - spark.ui 5 | 6 | 7 | 8 | Docs 9 | 10 | 11 | 12 | Paragraph 13 | 14 | 15 |
    16 | 17 | Paragraph 18 | 19 | 20 | Style for the p element 21 | 22 |
    23 |
    24 | 25 | 26 | 27 | Proin vel risus pharetra, cursus mauris id, facilisis nisl. Nulla facilisi. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. 28 | 29 | 30 | 31 | 32 | @($@" 33 | Proin vel risus pharetra, cursus mauris id, facilisis nisl. Nulla facilisi. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. 34 | ") 35 | 36 | 37 | 38 |
    -------------------------------------------------------------------------------- /Spark.UI.Docs/Pages/Components/Small.razor: -------------------------------------------------------------------------------- 1 | @page "/docs/components/small" 2 | @layout DocsLayout 3 | 4 | Small text component for Blazor - spark.ui 5 | 6 | 7 | 8 | Docs 9 | 10 | 11 | 12 | Small 13 | 14 | 15 |
    16 | 17 | Small 18 | 19 | 20 | Style for the small element 21 | 22 |
    23 |
    24 | 25 | 26 | 27 | Etiam sodales arcu vel lacinia cursus? 28 | 29 | 30 | 31 | 32 | @($@" 33 | Etiam sodales arcu vel lacinia cursus? 34 | ") 35 | 36 | 37 | 38 |
    -------------------------------------------------------------------------------- /Spark.UI.Docs/Pages/Components/Table.razor: -------------------------------------------------------------------------------- 1 | @page "/docs/components/table" 2 | @layout DocsLayout 3 | 4 | Table component for Blazor - spark.ui 5 | 6 | 7 | 8 | Docs 9 | 10 | 11 | 12 | Table 13 | 14 | 15 |
    16 | 17 | Table 18 | 19 | 20 | Style for the table element 21 | 22 |
    23 |
    24 | 25 | 26 | 27 | 28 | 29 | 30 | @($@"") 31 | 32 | 33 | 34 |
    -------------------------------------------------------------------------------- /Spark.UI.Docs/Pages/Components/Typography.razor: -------------------------------------------------------------------------------- 1 | @page "/docs/components/typography" 2 | @layout DocsLayout 3 | 4 | Typography example for Blazor - spark.ui 5 | 6 | 7 | 8 | Docs 9 | 10 | 11 | 12 | Typography 13 | 14 | 15 |
    16 | 17 | Typography 18 | 19 | 20 | Styles for headings, paragraphs, lists, etc... 21 | 22 |
    23 |
    24 | 25 | Example 26 | 27 | 28 | 29 |
    30 | 31 | Lorem Ipsum 32 | 33 | 34 | Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce vehicula viverra aliquet. Nam vel dolor nec nisl volutpat fringilla. 35 | 36 | 37 | Etiam Mollis 38 | 39 | 40 | Etiam mollis purus eu orci venenatis, vitae finibus tortor viverra. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Sed et venenatis felis. 41 | 42 |
    43 | "Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas." 44 |
    45 | 46 | Suspendisse Potenti 47 | 48 | 49 | Nulla at tincidunt ex. Integer sed nulla justo. Vestibulum a tortor a est vehicula laoreet id vel arcu. 50 | 51 | 52 |
  • 53 | Cras non purus 54 |
    • 55 |
  • 56 | Vivamus varius ultricies 57 |
    • 58 |
  • 59 | Ut ullamcorper 60 |
    • 61 |     62 | 63 | Etiam mollis purus eu orci venenatis, vitae finibus tortor viverra. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Sed et venenatis felis. 64 | 65 | 66 | Nulla At Tincidunt 67 | 68 | 69 | Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce vehicula viverra aliquet. Nam vel dolor nec nisl volutpat fringilla. 70 | 71 | 72 |
    73 |     74 | 75 | 76 | @(@"
    77 | 78 | Lorem Ipsum 79 | 80 | 81 | Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce vehicula viverra aliquet. Nam vel dolor nec nisl volutpat fringilla. 82 | 83 | 84 | Etiam Mollis 85 | 86 | 87 | Etiam mollis purus eu orci venenatis, vitae finibus tortor viverra. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Sed et venenatis felis. 88 | 89 |
    90 | ""Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas."" 91 |
    92 | 93 | Suspendisse Potenti 94 | 95 | 96 | Nulla at tincidunt ex. Integer sed nulla justo. Vestibulum a tortor a est vehicula laoreet id vel arcu. 97 | 98 | 99 |
  • 100 | Cras non purus 101 |
    • 102 |
  • 103 | Vivamus varius ultricies 104 |
    • 105 |
  • 106 | Ut ullamcorper 107 |
    • 108 |     109 | 110 | Etiam mollis purus eu orci venenatis, vitae finibus tortor viverra. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Sed et venenatis felis. 111 | 112 | 113 | Nulla At Tincidunt 114 | 115 | 116 | Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce vehicula viverra aliquet. Nam vel dolor nec nisl volutpat fringilla. 117 | 118 | 119 |
    "); 120 |     121 |     122 |     123 |
    -------------------------------------------------------------------------------- /Spark.UI.Docs/Pages/Customization.razor: -------------------------------------------------------------------------------- 1 | @page "/docs/customization" 2 | @layout DocsLayout 3 | 4 | 5 | Customizing spark.ui components - spark.ui 6 | 7 | 8 | 9 | 10 | Docs 11 | 12 | 13 | 14 | Customization 15 | 16 | 17 |
    18 | 19 | Customization 20 | 21 | 22 | How to customize spark.ui components 23 | 24 |
    25 |
    26 | 27 | We purposefully made our components easy to customize. 28 | 29 | 30 | This is why you install the source code of the components rather than downloading a Nuget of compiled code. 31 | 32 | 33 | Customizing Styles 34 | 35 | 36 | TODO 37 | 38 |
    -------------------------------------------------------------------------------- /Spark.UI.Docs/Pages/Index.razor: -------------------------------------------------------------------------------- 1 | @page "/" 2 | 3 | Beautiful Blazor Components based on the Shadcn Component Library - spark.ui 4 | 5 |
    6 | 7 | Beautiful Blazor Components 8 | 9 | Blazor components you can copy and paste into your apps. Simple. Customizable. Open Source. 10 |
    11 | 12 | Get Started 13 | 14 | 15 | GitHub 16 | 17 |
    18 |
    -------------------------------------------------------------------------------- /Spark.UI.Docs/Pages/Installation.razor: -------------------------------------------------------------------------------- 1 | @page "/docs/installation" 2 | @layout DocsLayout 3 | 4 | 5 | How to install the library in your Blazor or Spark.NET app - spark.ui 6 | 7 | 8 | 9 | 10 | Docs 11 | 12 | 13 | 14 | Installation 15 | 16 | 17 |
    18 | 19 | Installation 20 | 21 | 22 | How to install spark.ui 23 | 24 |
    25 |
    26 | @* 27 | Install spark.ui with Spark.NET 28 | 29 | 30 | 1. Create a new Spark project 31 | 32 | 33 | Spark.NET Blazor projects come with spark.ui already installed. Simply run the Spark CLI `new` command to create a fresh project. 34 | 35 | 36 | @($@"spark new MyApp") 37 | 38 | 39 | 2. Start the Tailwind CLI build process 40 | 41 | 42 | Run the Tailwind CLI tool to scan your template files for classes and build your public CSS file. 43 | 44 | 45 | @($@"npx tailwindcss -i ./Styles/globals.css -o ./wwwroot/css/styles.css --watch") 46 | *@ 47 | 48 | Install spark.ui with Blazor or Spark.NET 49 | 50 | 51 | 1. Add Tailwind CSS to your project 52 | 53 | 54 | Components are styled using Tailwind CSS. You will need to install Tailwind CSS in your Blazor projects root directory. 55 | 56 | 57 | @($@"npm install -D tailwindcss @tailwindcss/forms") 58 | 59 | 60 | 2. Add configs and components 61 | 62 | 63 | Download the configs and components. Then unzip and paste them into the root of your project. 64 | 65 |
    66 | 67 | Download 68 | 69 |
    70 | 71 | The following is what you should have pasted in the root of your project. 72 | 73 | 74 |
  • Components/**/*
    • 75 |
  • Styles/globals.css
    • 76 |
  • postcss.config.js
    • 77 |
  • tailwind.config.js
    • 78 |     79 | 80 | 81 | Why not a Nuget package? 82 | 83 | spark.ui is meant to be a lightweight, customizable, starting point for your next apps design. The code is yours. Copy, Paste, and Edit as you need. 84 | 85 | 86 | 87 | 3. Add css file reference 88 | 89 | 90 | The Styles/globals.css file gets compiled into /wwwroot/css/styles.css. 91 | 92 | 93 | You need to add a reference to the styles.css in the head tag of your layout file. 94 | 95 | 96 | We also recommend to add a reference to the inter font family. It's what is used in the examples on this website. 97 | 98 | 99 | @($@" 100 | ... 101 | 102 | 103 | ... 104 | ") 105 | 106 | 107 | 4. Add namespaces to your projects _Imports.razor 108 | 109 | 110 | @($@"@using Spark.UI.Components 111 | @using [YourNamespace].Components 112 | @using [YourNamespace].Components.Icons 113 | @using [YourNamespace].Components.Typography") 114 | 115 | 116 | 5. Start the Tailwind CLI build process 117 | 118 | 119 | Run the Tailwind CLI tool to scan your template files for classes and build your public CSS file. 120 | 121 | 122 | @($@"npx tailwindcss -i ./Styles/globals.css -o ./wwwroot/css/styles.css --watch") 123 | 124 |
    125 | -------------------------------------------------------------------------------- /Spark.UI.Docs/Pages/Introduction.razor: -------------------------------------------------------------------------------- 1 | @page "/docs/introduction" 2 | @layout DocsLayout 3 | 4 | 5 | Component library for Blazor - spark.ui 6 | 7 | 8 | 9 | 10 | Docs 11 | 12 | 13 | 14 | Introduction 15 | 16 | 17 |
    18 | 19 | Introduction 20 | 21 | 22 | Re-usable Blazor components built using Tailwind CSS 23 | 24 |
    25 |
    26 | 27 | spark.ui is a collection of re-usable Razor components that you can copy and paste into your Blazor applications. 28 | 29 | 30 | Built using Tailwind CSS and heavily inspired by the shadcn component library. 31 | 32 | 33 | Our Philosophy 34 | 35 | 36 | Most Blazor component libraries compile their components and then make you learn their APIs to use them. 37 | 38 | 39 | spark.ui doesn't do that. 40 | 41 | 42 | Instead, the source code is meant to be copied into your project. From there, you own the code. 43 | 44 | 45 | Installing spark.ui 46 | 47 | 48 | Follow the installation guide to get started. 49 | 50 |
    -------------------------------------------------------------------------------- /Spark.UI.Docs/Program.cs: -------------------------------------------------------------------------------- 1 | using Microsoft.AspNetCore.Server.Kestrel.Core; 2 | using Spark.UI.Docs; 3 | 4 | var builder = WebApplication.CreateBuilder(args); 5 | 6 | // Add services to the container. 7 | builder.Services.AddRazorComponents(); 8 | 9 | // If using Kestrel: 10 | builder.Services.Configure(options => 11 | { 12 | options.AllowSynchronousIO = true; 13 | }); 14 | 15 | var app = builder.Build(); 16 | 17 | // Configure the HTTP request pipeline. 18 | if (!app.Environment.IsDevelopment()) 19 | { 20 | app.UseExceptionHandler("/Error"); 21 | // The default HSTS value is 30 days. You may want to change this for production scenarios, see https://aka.ms/aspnetcore-hsts. 22 | app.UseHsts(); 23 | } 24 | 25 | app.UseHttpsRedirection(); 26 | 27 | app.UseStaticFiles(); 28 | 29 | app.MapRazorComponents(); 30 | 31 | app.Run(); 32 | -------------------------------------------------------------------------------- /Spark.UI.Docs/Properties/launchSettings.json: -------------------------------------------------------------------------------- 1 | { 2 | "$schema": "http://json.schemastore.org/launchsettings.json", 3 | "iisSettings": { 4 | "windowsAuthentication": false, 5 | "anonymousAuthentication": true, 6 | "iisExpress": { 7 | "applicationUrl": "http://localhost:32302", 8 | "sslPort": 44384 9 | } 10 | }, 11 | "profiles": { 12 | "http": { 13 | "commandName": "Project", 14 | "dotnetRunMessages": true, 15 | "launchBrowser": true, 16 | "applicationUrl": "http://localhost:5280", 17 | "environmentVariables": { 18 | "ASPNETCORE_ENVIRONMENT": "Development" 19 | } 20 | }, 21 | "https": { 22 | "commandName": "Project", 23 | "dotnetRunMessages": true, 24 | "launchBrowser": true, 25 | "applicationUrl": "https://localhost:7218;http://localhost:5280", 26 | "environmentVariables": { 27 | "ASPNETCORE_ENVIRONMENT": "Development" 28 | } 29 | }, 30 | "IIS Express": { 31 | "commandName": "IISExpress", 32 | "launchBrowser": true, 33 | "environmentVariables": { 34 | "ASPNETCORE_ENVIRONMENT": "Development" 35 | } 36 | } 37 | } 38 | } 39 | -------------------------------------------------------------------------------- /Spark.UI.Docs/README.md: -------------------------------------------------------------------------------- 1 | # spark.ui 2 | Beautiful Blazor Components 3 | 4 | ## Getting Started 5 | 1. npm install 6 | 2. npx tailwindcss -i ./Styles/globals.css -o ./wwwroot/css/styles.css --watch 7 | 3. dotnet watch -------------------------------------------------------------------------------- /Spark.UI.Docs/Shared/Code.razor: -------------------------------------------------------------------------------- 1 | @ChildContent.ToString() 2 | 3 | @code { 4 | [Parameter] public required RenderFragment ChildContent { get; set; } 5 | protected override bool ShouldRender() 6 | { 7 | return false; 8 | } 9 | } 10 | -------------------------------------------------------------------------------- /Spark.UI.Docs/Shared/CodeExample.razor: -------------------------------------------------------------------------------- 1 | 
     2 | 
 3 | 	@ChildContent
 4 | 
 5 |
    6 | 7 | @code { 8 | [Parameter] public required RenderFragment ChildContent { get; set; } 9 | [Parameter] public string Language { get; set; } = "language-html"; 10 | } -------------------------------------------------------------------------------- /Spark.UI.Docs/Shared/ComponentPreview.razor: -------------------------------------------------------------------------------- 1 | 
    2 |
    3 |
    4 |
    5 | 13 | 20 |
    21 |
    22 | @ChildContent 23 |
    24 |
    25 | 26 | @code { 27 | [Parameter] public required RenderFragment ChildContent { get; set; } 28 | 29 | [Parameter] public string AlpinePropertyName { get; set; } = "viewer"; 30 | } -------------------------------------------------------------------------------- /Spark.UI.Docs/Shared/ComponentPreviewCode.razor: -------------------------------------------------------------------------------- 1 | 
    6 | @ChildContent 7 |
    8 | 9 | @code { 10 | [Parameter] public required RenderFragment ChildContent { get; set; } 11 | 12 | [Parameter] public string AlpinePropertyName { get; set; } = "viewer"; 13 | } -------------------------------------------------------------------------------- /Spark.UI.Docs/Shared/ComponentPreviewRendered.razor: -------------------------------------------------------------------------------- 1 | 
    4 |
    5 |
    6 | @ChildContent 7 |
    8 |
    9 |
    10 | 11 | @code { 12 | [Parameter] public required RenderFragment ChildContent { get; set; } 13 | 14 | [Parameter] public string AlpinePropertyName { get; set; } = "viewer"; 15 | } -------------------------------------------------------------------------------- /Spark.UI.Docs/Shared/DocsLayout.razor: -------------------------------------------------------------------------------- 1 | @inherits LayoutComponentBase 2 | @inject NavigationManager navManager 3 | 4 |
    5 |
    6 | 7 |
    8 |
    9 | 94 |
    95 |
    96 | @Body 97 |
    98 |
    99 |
    100 |
    101 |
    102 | 103 | @code { 104 | public string currentRoute { get; set; } = default!; 105 | 106 | protected override void OnParametersSet() 107 | { 108 | base.OnParametersSet(); 109 | 110 | currentRoute = navManager.ToBaseRelativePath(navManager.Uri); 111 | } 112 | 113 | private string GetActiveCss(string route) 114 | { 115 | return currentRoute.Contains(route) ? "font-medium text-foreground" : "text-muted-foreground"; 116 | } 117 | } -------------------------------------------------------------------------------- /Spark.UI.Docs/Shared/Footer.razor: -------------------------------------------------------------------------------- 1 | 
    2 | 3 | Built by Weston Walker. Source code available on GitHub . 4 | 5 |
    -------------------------------------------------------------------------------- /Spark.UI.Docs/Shared/MainLayout.razor: -------------------------------------------------------------------------------- 1 | @inherits LayoutComponentBase 2 | 3 |
    4 |
    5 | 6 |
    7 |
    8 |
    9 | @Body 10 |
    11 |
    12 |
    13 |
    -------------------------------------------------------------------------------- /Spark.UI.Docs/Shared/NavBar.razor: -------------------------------------------------------------------------------- 1 | @inject NavigationManager navManager 2 | 3 |
    4 |
    5 |
    6 | 14 |
    15 | 16 | spark.ui 17 | 18 | 29 |
    30 |
    31 | 49 |
    50 |
    51 | 52 | @code { 53 | public string currentRoute { get; set; } = default!; 54 | 55 | protected override void OnParametersSet() 56 | { 57 | base.OnParametersSet(); 58 | 59 | currentRoute = navManager.ToBaseRelativePath(navManager.Uri); 60 | } 61 | } -------------------------------------------------------------------------------- /Spark.UI.Docs/Spark.UI.Docs.csproj: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | net8.0 5 | enable 6 | enable 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 | 15 | 16 | 17 | 18 | 19 | Never 20 | 21 | 22 | 23 | 24 | -------------------------------------------------------------------------------- /Spark.UI.Docs/Styles/globals.css: -------------------------------------------------------------------------------- 1 | @tailwind base; 2 | @tailwind components; 3 | @tailwind utilities; 4 | 5 | @layer base { 6 | :root { 7 | --background: 0 0% 100%; 8 | --foreground: 222.2 47.4% 11.2%; 9 | --muted: 210 40% 96.1%; 10 | --muted-foreground: 215.4 16.3% 46.9%; 11 | --popover: 0 0% 100%; 12 | --popover-foreground: 222.2 47.4% 11.2%; 13 | --border: 214.3 31.8% 91.4%; 14 | --input: 214.3 31.8% 91.4%; 15 | --card: 0 0% 100%; 16 | --card-foreground: 222.2 47.4% 11.2%; 17 | --primary: 222.2 47.4% 11.2%; 18 | --primary-foreground: 210 40% 98%; 19 | --secondary: 210 40% 96.1%; 20 | --secondary-foreground: 222.2 47.4% 11.2%; 21 | --accent: 210 40% 96.1%; 22 | --accent-foreground: 222.2 47.4% 11.2%; 23 | --destructive: 0 84.2% 60.2%; 24 | --destructive-foreground: 0 0% 98%; 25 | --ring: 215 20.2% 65.1%; 26 | --radius: 0.5rem; 27 | --font-sans: 'Inter var'; 28 | } 29 | 30 | .dark { 31 | --background: 224 71% 4%; 32 | --foreground: 213 31% 91%; 33 | --muted: 223 47% 11%; 34 | --muted-foreground: 215.4 16.3% 56.9%; 35 | --accent: 216 34% 17%; 36 | --accent-foreground: 210 40% 98%; 37 | --popover: 224 71% 4%; 38 | --popover-foreground: 215 20.2% 65.1%; 39 | --border: 216 34% 17%; 40 | --input: 216 34% 17%; 41 | --card: 224 71% 4%; 42 | --card-foreground: 213 31% 91%; 43 | --primary: 210 40% 98%; 44 | --primary-foreground: 222.2 47.4% 1.2%; 45 | --secondary: 222.2 47.4% 11.2%; 46 | --secondary-foreground: 210 40% 98%; 47 | --destructive: 0 63% 31%; 48 | --destructive-foreground: 210 40% 98%; 49 | --ring: 216 34% 17%; 50 | --radius: 0.5rem; 51 | } 52 | } 53 | 54 | @layer base { 55 | * { 56 | @apply border-border; 57 | } 58 | 59 | body { 60 | @apply bg-background text-foreground; 61 | font-feature-settings: "rlig" 1, "calt" 1; 62 | } 63 | } 64 | 65 | .validation-message { 66 | @apply text-sm font-medium text-destructive; 67 | } 68 | 69 | [x-cloak] { 70 | display: none !important; 71 | } 72 | 73 | input[type=text], 74 | input[type=email], 75 | input[type=date], 76 | input[type=file], 77 | input[type=datetime-local], 78 | input[type=month], 79 | input[type=number], 80 | input[type=password], 81 | input[type=search], 82 | input[type=tel], 83 | input[type=time], 84 | input[type=url], 85 | input[type=week] { 86 | @apply flex h-10 w-full rounded-md border border-input bg-background px-3 py-2 text-sm ring-offset-background file:border-0 file:bg-transparent file:text-sm file:font-medium placeholder:text-muted-foreground focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50 focus:border-input focus:ring-ring; 87 | } 88 | 89 | textarea { 90 | @apply flex min-h-[80px] w-full rounded-md border border-input bg-background px-3 py-2 text-sm ring-offset-background placeholder:text-muted-foreground focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50; 91 | } 92 | 93 | input[type=checkbox] { 94 | @apply h-4 w-4 shrink-0 rounded-sm border border-primary ring-offset-background focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50 text-primary focus:ring-primary; 95 | } 96 | 97 | select { 98 | @apply h-10 w-full rounded-md border border-input bg-background px-3 py-2 text-sm ring-offset-background placeholder:text-muted-foreground focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50; 99 | } 100 | 101 | option { 102 | @apply relative flex w-full cursor-default select-none items-center text-sm outline-none focus:bg-accent focus:text-accent-foreground disabled:pointer-events-none disabled:opacity-50; 103 | } -------------------------------------------------------------------------------- /Spark.UI.Docs/_Imports.razor: -------------------------------------------------------------------------------- 1 | @using System.Net.Http 2 | @using System.Net.Http.Json 3 | @using Microsoft.AspNetCore.Components.Forms 4 | @using Microsoft.AspNetCore.Components.Routing 5 | @using Microsoft.AspNetCore.Components.Web 6 | @using Microsoft.AspNetCore.Components.Web.Virtualization 7 | @using Microsoft.JSInterop 8 | @using Spark.UI.Docs 9 | @using Spark.UI.Docs.Shared 10 | @using Spark.UI.Components 11 | @using Spark.UI.Components.Typography 12 | @using Spark.UI.Components.Icons 13 | @using System.ComponentModel.DataAnnotations -------------------------------------------------------------------------------- /Spark.UI.Docs/appsettings.Development.json: -------------------------------------------------------------------------------- 1 | { 2 | "Logging": { 3 | "LogLevel": { 4 | "Default": "Information", 5 | "Microsoft.AspNetCore": "Warning" 6 | } 7 | } 8 | } 9 | -------------------------------------------------------------------------------- /Spark.UI.Docs/appsettings.json: -------------------------------------------------------------------------------- 1 | { 2 | "Logging": { 3 | "LogLevel": { 4 | "Default": "Information", 5 | "Microsoft.AspNetCore": "Warning" 6 | } 7 | }, 8 | "AllowedHosts": "*" 9 | } 10 | -------------------------------------------------------------------------------- /Spark.UI.Docs/package-lock.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "dotnetjobs", 3 | "lockfileVersion": 3, 4 | "requires": true, 5 | "packages": { 6 | "": { 7 | "name": "dotnetjobs", 8 | "devDependencies": { 9 | "@tailwindcss/forms": "^0.5.4", 10 | "tailwindcss": "^3.3.3" 11 | } 12 | }, 13 | "node_modules/@alloc/quick-lru": { 14 | "version": "5.2.0", 15 | "resolved": "https://registry.npmjs.org/@alloc/quick-lru/-/quick-lru-5.2.0.tgz", 16 | "integrity": "sha512-UrcABB+4bUrFABwbluTIBErXwvbsU/V7TZWfmbgJfbkwiBuziS9gxdODUyuiecfdGQ85jglMW6juS3+z5TsKLw==", 17 | "dev": true, 18 | "engines": { 19 | "node": ">=10" 20 | }, 21 | "funding": { 22 | "url": "https://github.com/sponsors/sindresorhus" 23 | } 24 | }, 25 | "node_modules/@jridgewell/gen-mapping": { 26 | "version": "0.3.3", 27 | "resolved": "https://registry.npmjs.org/@jridgewell/gen-mapping/-/gen-mapping-0.3.3.tgz", 28 | "integrity": "sha512-HLhSWOLRi875zjjMG/r+Nv0oCW8umGb0BgEhyX3dDX3egwZtB8PqLnjz3yedt8R5StBrzcg4aBpnh8UA9D1BoQ==", 29 | "dev": true, 30 | "dependencies": { 31 | "@jridgewell/set-array": "^1.0.1", 32 | "@jridgewell/sourcemap-codec": "^1.4.10", 33 | "@jridgewell/trace-mapping": "^0.3.9" 34 | }, 35 | "engines": { 36 | "node": ">=6.0.0" 37 | } 38 | }, 39 | "node_modules/@jridgewell/resolve-uri": { 40 | "version": "3.1.1", 41 | "resolved": "https://registry.npmjs.org/@jridgewell/resolve-uri/-/resolve-uri-3.1.1.tgz", 42 | "integrity": "sha512-dSYZh7HhCDtCKm4QakX0xFpsRDqjjtZf/kjI/v3T3Nwt5r8/qz/M19F9ySyOqU94SXBmeG9ttTul+YnR4LOxFA==", 43 | "dev": true, 44 | "engines": { 45 | "node": ">=6.0.0" 46 | } 47 | }, 48 | "node_modules/@jridgewell/set-array": { 49 | "version": "1.1.2", 50 | "resolved": "https://registry.npmjs.org/@jridgewell/set-array/-/set-array-1.1.2.tgz", 51 | "integrity": "sha512-xnkseuNADM0gt2bs+BvhO0p78Mk762YnZdsuzFV018NoG1Sj1SCQvpSqa7XUaTam5vAGasABV9qXASMKnFMwMw==", 52 | "dev": true, 53 | "engines": { 54 | "node": ">=6.0.0" 55 | } 56 | }, 57 | "node_modules/@jridgewell/sourcemap-codec": { 58 | "version": "1.4.15", 59 | "resolved": "https://registry.npmjs.org/@jridgewell/sourcemap-codec/-/sourcemap-codec-1.4.15.tgz", 60 | "integrity": "sha512-eF2rxCRulEKXHTRiDrDy6erMYWqNw4LPdQ8UQA4huuxaQsVeRPFl2oM8oDGxMFhJUWZf9McpLtJasDDZb/Bpeg==", 61 | "dev": true 62 | }, 63 | "node_modules/@jridgewell/trace-mapping": { 64 | "version": "0.3.19", 65 | "resolved": "https://registry.npmjs.org/@jridgewell/trace-mapping/-/trace-mapping-0.3.19.tgz", 66 | "integrity": "sha512-kf37QtfW+Hwx/buWGMPcR60iF9ziHa6r/CZJIHbmcm4+0qrXiVdxegAH0F6yddEVQ7zdkjcGCgCzUu+BcbhQxw==", 67 | "dev": true, 68 | "dependencies": { 69 | "@jridgewell/resolve-uri": "^3.1.0", 70 | "@jridgewell/sourcemap-codec": "^1.4.14" 71 | } 72 | }, 73 | "node_modules/@nodelib/fs.scandir": { 74 | "version": "2.1.5", 75 | "resolved": "https://registry.npmjs.org/@nodelib/fs.scandir/-/fs.scandir-2.1.5.tgz", 76 | "integrity": "sha512-vq24Bq3ym5HEQm2NKCr3yXDwjc7vTsEThRDnkp2DK9p1uqLR+DHurm/NOTo0KG7HYHU7eppKZj3MyqYuMBf62g==", 77 | "dev": true, 78 | "dependencies": { 79 | "@nodelib/fs.stat": "2.0.5", 80 | "run-parallel": "^1.1.9" 81 | }, 82 | "engines": { 83 | "node": ">= 8" 84 | } 85 | }, 86 | "node_modules/@nodelib/fs.stat": { 87 | "version": "2.0.5", 88 | "resolved": "https://registry.npmjs.org/@nodelib/fs.stat/-/fs.stat-2.0.5.tgz", 89 | "integrity": "sha512-RkhPPp2zrqDAQA/2jNhnztcPAlv64XdhIp7a7454A5ovI7Bukxgt7MX7udwAu3zg1DcpPU0rz3VV1SeaqvY4+A==", 90 | "dev": true, 91 | "engines": { 92 | "node": ">= 8" 93 | } 94 | }, 95 | "node_modules/@nodelib/fs.walk": { 96 | "version": "1.2.8", 97 | "resolved": "https://registry.npmjs.org/@nodelib/fs.walk/-/fs.walk-1.2.8.tgz", 98 | "integrity": "sha512-oGB+UxlgWcgQkgwo8GcEGwemoTFt3FIO9ababBmaGwXIoBKZ+GTy0pP185beGg7Llih/NSHSV2XAs1lnznocSg==", 99 | "dev": true, 100 | "dependencies": { 101 | "@nodelib/fs.scandir": "2.1.5", 102 | "fastq": "^1.6.0" 103 | }, 104 | "engines": { 105 | "node": ">= 8" 106 | } 107 | }, 108 | "node_modules/@tailwindcss/forms": { 109 | "version": "0.5.6", 110 | "resolved": "https://registry.npmjs.org/@tailwindcss/forms/-/forms-0.5.6.tgz", 111 | "integrity": "sha512-Fw+2BJ0tmAwK/w01tEFL5TiaJBX1NLT1/YbWgvm7ws3Qcn11kiXxzNTEQDMs5V3mQemhB56l3u0i9dwdzSQldA==", 112 | "dev": true, 113 | "dependencies": { 114 | "mini-svg-data-uri": "^1.2.3" 115 | }, 116 | "peerDependencies": { 117 | "tailwindcss": ">=3.0.0 || >= 3.0.0-alpha.1" 118 | } 119 | }, 120 | "node_modules/any-promise": { 121 | "version": "1.3.0", 122 | "resolved": "https://registry.npmjs.org/any-promise/-/any-promise-1.3.0.tgz", 123 | "integrity": "sha512-7UvmKalWRt1wgjL1RrGxoSJW/0QZFIegpeGvZG9kjp8vrRu55XTHbwnqq2GpXm9uLbcuhxm3IqX9OB4MZR1b2A==", 124 | "dev": true 125 | }, 126 | "node_modules/anymatch": { 127 | "version": "3.1.3", 128 | "resolved": "https://registry.npmjs.org/anymatch/-/anymatch-3.1.3.tgz", 129 | "integrity": "sha512-KMReFUr0B4t+D+OBkjR3KYqvocp2XaSzO55UcB6mgQMd3KbcE+mWTyvVV7D/zsdEbNnV6acZUutkiHQXvTr1Rw==", 130 | "dev": true, 131 | "dependencies": { 132 | "normalize-path": "^3.0.0", 133 | "picomatch": "^2.0.4" 134 | }, 135 | "engines": { 136 | "node": ">= 8" 137 | } 138 | }, 139 | "node_modules/arg": { 140 | "version": "5.0.2", 141 | "resolved": "https://registry.npmjs.org/arg/-/arg-5.0.2.tgz", 142 | "integrity": "sha512-PYjyFOLKQ9y57JvQ6QLo8dAgNqswh8M1RMJYdQduT6xbWSgK36P/Z/v+p888pM69jMMfS8Xd8F6I1kQ/I9HUGg==", 143 | "dev": true 144 | }, 145 | "node_modules/balanced-match": { 146 | "version": "1.0.2", 147 | "resolved": "https://registry.npmjs.org/balanced-match/-/balanced-match-1.0.2.tgz", 148 | "integrity": "sha512-3oSeUO0TMV67hN1AmbXsK4yaqU7tjiHlbxRDZOpH0KW9+CeX4bRAaX0Anxt0tx2MrpRpWwQaPwIlISEJhYU5Pw==", 149 | "dev": true 150 | }, 151 | "node_modules/binary-extensions": { 152 | "version": "2.2.0", 153 | "resolved": "https://registry.npmjs.org/binary-extensions/-/binary-extensions-2.2.0.tgz", 154 | "integrity": "sha512-jDctJ/IVQbZoJykoeHbhXpOlNBqGNcwXJKJog42E5HDPUwQTSdjCHdihjj0DlnheQ7blbT6dHOafNAiS8ooQKA==", 155 | "dev": true, 156 | "engines": { 157 | "node": ">=8" 158 | } 159 | }, 160 | "node_modules/brace-expansion": { 161 | "version": "1.1.11", 162 | "resolved": "https://registry.npmjs.org/brace-expansion/-/brace-expansion-1.1.11.tgz", 163 | "integrity": "sha512-iCuPHDFgrHX7H2vEI/5xpz07zSHB00TpugqhmYtVmMO6518mCuRMoOYFldEBl0g187ufozdaHgWKcYFb61qGiA==", 164 | "dev": true, 165 | "dependencies": { 166 | "balanced-match": "^1.0.0", 167 | "concat-map": "0.0.1" 168 | } 169 | }, 170 | "node_modules/braces": { 171 | "version": "3.0.2", 172 | "resolved": "https://registry.npmjs.org/braces/-/braces-3.0.2.tgz", 173 | "integrity": "sha512-b8um+L1RzM3WDSzvhm6gIz1yfTbBt6YTlcEKAvsmqCZZFw46z626lVj9j1yEPW33H5H+lBQpZMP1k8l+78Ha0A==", 174 | "dev": true, 175 | "dependencies": { 176 | "fill-range": "^7.0.1" 177 | }, 178 | "engines": { 179 | "node": ">=8" 180 | } 181 | }, 182 | "node_modules/camelcase-css": { 183 | "version": "2.0.1", 184 | "resolved": "https://registry.npmjs.org/camelcase-css/-/camelcase-css-2.0.1.tgz", 185 | "integrity": "sha512-QOSvevhslijgYwRx6Rv7zKdMF8lbRmx+uQGx2+vDc+KI/eBnsy9kit5aj23AgGu3pa4t9AgwbnXWqS+iOY+2aA==", 186 | "dev": true, 187 | "engines": { 188 | "node": ">= 6" 189 | } 190 | }, 191 | "node_modules/chokidar": { 192 | "version": "3.5.3", 193 | "resolved": "https://registry.npmjs.org/chokidar/-/chokidar-3.5.3.tgz", 194 | "integrity": "sha512-Dr3sfKRP6oTcjf2JmUmFJfeVMvXBdegxB0iVQ5eb2V10uFJUCAS8OByZdVAyVb8xXNz3GjjTgj9kLWsZTqE6kw==", 195 | "dev": true, 196 | "funding": [ 197 | { 198 | "type": "individual", 199 | "url": "https://paulmillr.com/funding/" 200 | } 201 | ], 202 | "dependencies": { 203 | "anymatch": "~3.1.2", 204 | "braces": "~3.0.2", 205 | "glob-parent": "~5.1.2", 206 | "is-binary-path": "~2.1.0", 207 | "is-glob": "~4.0.1", 208 | "normalize-path": "~3.0.0", 209 | "readdirp": "~3.6.0" 210 | }, 211 | "engines": { 212 | "node": ">= 8.10.0" 213 | }, 214 | "optionalDependencies": { 215 | "fsevents": "~2.3.2" 216 | } 217 | }, 218 | "node_modules/chokidar/node_modules/glob-parent": { 219 | "version": "5.1.2", 220 | "resolved": "https://registry.npmjs.org/glob-parent/-/glob-parent-5.1.2.tgz", 221 | "integrity": "sha512-AOIgSQCepiJYwP3ARnGx+5VnTu2HBYdzbGP45eLw1vr3zB3vZLeyed1sC9hnbcOc9/SrMyM5RPQrkGz4aS9Zow==", 222 | "dev": true, 223 | "dependencies": { 224 | "is-glob": "^4.0.1" 225 | }, 226 | "engines": { 227 | "node": ">= 6" 228 | } 229 | }, 230 | "node_modules/commander": { 231 | "version": "4.1.1", 232 | "resolved": "https://registry.npmjs.org/commander/-/commander-4.1.1.tgz", 233 | "integrity": "sha512-NOKm8xhkzAjzFx8B2v5OAHT+u5pRQc2UCa2Vq9jYL/31o2wi9mxBA7LIFs3sV5VSC49z6pEhfbMULvShKj26WA==", 234 | "dev": true, 235 | "engines": { 236 | "node": ">= 6" 237 | } 238 | }, 239 | "node_modules/concat-map": { 240 | "version": "0.0.1", 241 | "resolved": "https://registry.npmjs.org/concat-map/-/concat-map-0.0.1.tgz", 242 | "integrity": "sha512-/Srv4dswyQNBfohGpz9o6Yb3Gz3SrUDqBH5rTuhGR7ahtlbYKnVxw2bCFMRljaA7EXHaXZ8wsHdodFvbkhKmqg==", 243 | "dev": true 244 | }, 245 | "node_modules/cssesc": { 246 | "version": "3.0.0", 247 | "resolved": "https://registry.npmjs.org/cssesc/-/cssesc-3.0.0.tgz", 248 | "integrity": "sha512-/Tb/JcjK111nNScGob5MNtsntNM1aCNUDipB/TkwZFhyDrrE47SOx/18wF2bbjgc3ZzCSKW1T5nt5EbFoAz/Vg==", 249 | "dev": true, 250 | "bin": { 251 | "cssesc": "bin/cssesc" 252 | }, 253 | "engines": { 254 | "node": ">=4" 255 | } 256 | }, 257 | "node_modules/didyoumean": { 258 | "version": "1.2.2", 259 | "resolved": "https://registry.npmjs.org/didyoumean/-/didyoumean-1.2.2.tgz", 260 | "integrity": "sha512-gxtyfqMg7GKyhQmb056K7M3xszy/myH8w+B4RT+QXBQsvAOdc3XymqDDPHx1BgPgsdAA5SIifona89YtRATDzw==", 261 | "dev": true 262 | }, 263 | "node_modules/dlv": { 264 | "version": "1.1.3", 265 | "resolved": "https://registry.npmjs.org/dlv/-/dlv-1.1.3.tgz", 266 | "integrity": "sha512-+HlytyjlPKnIG8XuRG8WvmBP8xs8P71y+SKKS6ZXWoEgLuePxtDoUEiH7WkdePWrQ5JBpE6aoVqfZfJUQkjXwA==", 267 | "dev": true 268 | }, 269 | "node_modules/fast-glob": { 270 | "version": "3.3.1", 271 | "resolved": "https://registry.npmjs.org/fast-glob/-/fast-glob-3.3.1.tgz", 272 | "integrity": "sha512-kNFPyjhh5cKjrUltxs+wFx+ZkbRaxxmZ+X0ZU31SOsxCEtP9VPgtq2teZw1DebupL5GmDaNQ6yKMMVcM41iqDg==", 273 | "dev": true, 274 | "dependencies": { 275 | "@nodelib/fs.stat": "^2.0.2", 276 | "@nodelib/fs.walk": "^1.2.3", 277 | "glob-parent": "^5.1.2", 278 | "merge2": "^1.3.0", 279 | "micromatch": "^4.0.4" 280 | }, 281 | "engines": { 282 | "node": ">=8.6.0" 283 | } 284 | }, 285 | "node_modules/fast-glob/node_modules/glob-parent": { 286 | "version": "5.1.2", 287 | "resolved": "https://registry.npmjs.org/glob-parent/-/glob-parent-5.1.2.tgz", 288 | "integrity": "sha512-AOIgSQCepiJYwP3ARnGx+5VnTu2HBYdzbGP45eLw1vr3zB3vZLeyed1sC9hnbcOc9/SrMyM5RPQrkGz4aS9Zow==", 289 | "dev": true, 290 | "dependencies": { 291 | "is-glob": "^4.0.1" 292 | }, 293 | "engines": { 294 | "node": ">= 6" 295 | } 296 | }, 297 | "node_modules/fastq": { 298 | "version": "1.15.0", 299 | "resolved": "https://registry.npmjs.org/fastq/-/fastq-1.15.0.tgz", 300 | "integrity": "sha512-wBrocU2LCXXa+lWBt8RoIRD89Fi8OdABODa/kEnyeyjS5aZO5/GNvI5sEINADqP/h8M29UHTHUb53sUu5Ihqdw==", 301 | "dev": true, 302 | "dependencies": { 303 | "reusify": "^1.0.4" 304 | } 305 | }, 306 | "node_modules/fill-range": { 307 | "version": "7.0.1", 308 | "resolved": "https://registry.npmjs.org/fill-range/-/fill-range-7.0.1.tgz", 309 | "integrity": "sha512-qOo9F+dMUmC2Lcb4BbVvnKJxTPjCm+RRpe4gDuGrzkL7mEVl/djYSu2OdQ2Pa302N4oqkSg9ir6jaLWJ2USVpQ==", 310 | "dev": true, 311 | "dependencies": { 312 | "to-regex-range": "^5.0.1" 313 | }, 314 | "engines": { 315 | "node": ">=8" 316 | } 317 | }, 318 | "node_modules/fs.realpath": { 319 | "version": "1.0.0", 320 | "resolved": "https://registry.npmjs.org/fs.realpath/-/fs.realpath-1.0.0.tgz", 321 | "integrity": "sha512-OO0pH2lK6a0hZnAdau5ItzHPI6pUlvI7jMVnxUQRtw4owF2wk8lOSabtGDCTP4Ggrg2MbGnWO9X8K1t4+fGMDw==", 322 | "dev": true 323 | }, 324 | "node_modules/fsevents": { 325 | "version": "2.3.3", 326 | "resolved": "https://registry.npmjs.org/fsevents/-/fsevents-2.3.3.tgz", 327 | "integrity": "sha512-5xoDfX+fL7faATnagmWPpbFtwh/R77WmMMqqHGS65C3vvB0YHrgF+B1YmZ3441tMj5n63k0212XNoJwzlhffQw==", 328 | "dev": true, 329 | "hasInstallScript": true, 330 | "optional": true, 331 | "os": [ 332 | "darwin" 333 | ], 334 | "engines": { 335 | "node": "^8.16.0 || ^10.6.0 || >=11.0.0" 336 | } 337 | }, 338 | "node_modules/function-bind": { 339 | "version": "1.1.1", 340 | "resolved": "https://registry.npmjs.org/function-bind/-/function-bind-1.1.1.tgz", 341 | "integrity": "sha512-yIovAzMX49sF8Yl58fSCWJ5svSLuaibPxXQJFLmBObTuCr0Mf1KiPopGM9NiFjiYBCbfaa2Fh6breQ6ANVTI0A==", 342 | "dev": true 343 | }, 344 | "node_modules/glob": { 345 | "version": "7.1.6", 346 | "resolved": "https://registry.npmjs.org/glob/-/glob-7.1.6.tgz", 347 | "integrity": "sha512-LwaxwyZ72Lk7vZINtNNrywX0ZuLyStrdDtabefZKAY5ZGJhVtgdznluResxNmPitE0SAO+O26sWTHeKSI2wMBA==", 348 | "dev": true, 349 | "dependencies": { 350 | "fs.realpath": "^1.0.0", 351 | "inflight": "^1.0.4", 352 | "inherits": "2", 353 | "minimatch": "^3.0.4", 354 | "once": "^1.3.0", 355 | "path-is-absolute": "^1.0.0" 356 | }, 357 | "engines": { 358 | "node": "*" 359 | }, 360 | "funding": { 361 | "url": "https://github.com/sponsors/isaacs" 362 | } 363 | }, 364 | "node_modules/glob-parent": { 365 | "version": "6.0.2", 366 | "resolved": "https://registry.npmjs.org/glob-parent/-/glob-parent-6.0.2.tgz", 367 | "integrity": "sha512-XxwI8EOhVQgWp6iDL+3b0r86f4d6AX6zSU55HfB4ydCEuXLXc5FcYeOu+nnGftS4TEju/11rt4KJPTMgbfmv4A==", 368 | "dev": true, 369 | "dependencies": { 370 | "is-glob": "^4.0.3" 371 | }, 372 | "engines": { 373 | "node": ">=10.13.0" 374 | } 375 | }, 376 | "node_modules/has": { 377 | "version": "1.0.3", 378 | "resolved": "https://registry.npmjs.org/has/-/has-1.0.3.tgz", 379 | "integrity": "sha512-f2dvO0VU6Oej7RkWJGrehjbzMAjFp5/VKPp5tTpWIV4JHHZK1/BxbFRtf/siA2SWTe09caDmVtYYzWEIbBS4zw==", 380 | "dev": true, 381 | "dependencies": { 382 | "function-bind": "^1.1.1" 383 | }, 384 | "engines": { 385 | "node": ">= 0.4.0" 386 | } 387 | }, 388 | "node_modules/inflight": { 389 | "version": "1.0.6", 390 | "resolved": "https://registry.npmjs.org/inflight/-/inflight-1.0.6.tgz", 391 | "integrity": "sha512-k92I/b08q4wvFscXCLvqfsHCrjrF7yiXsQuIVvVE7N82W3+aqpzuUdBbfhWcy/FZR3/4IgflMgKLOsvPDrGCJA==", 392 | "dev": true, 393 | "dependencies": { 394 | "once": "^1.3.0", 395 | "wrappy": "1" 396 | } 397 | }, 398 | "node_modules/inherits": { 399 | "version": "2.0.4", 400 | "resolved": "https://registry.npmjs.org/inherits/-/inherits-2.0.4.tgz", 401 | "integrity": "sha512-k/vGaX4/Yla3WzyMCvTQOXYeIHvqOKtnqBduzTHpzpQZzAskKMhZ2K+EnBiSM9zGSoIFeMpXKxa4dYeZIQqewQ==", 402 | "dev": true 403 | }, 404 | "node_modules/is-binary-path": { 405 | "version": "2.1.0", 406 | "resolved": "https://registry.npmjs.org/is-binary-path/-/is-binary-path-2.1.0.tgz", 407 | "integrity": "sha512-ZMERYes6pDydyuGidse7OsHxtbI7WVeUEozgR/g7rd0xUimYNlvZRE/K2MgZTjWy725IfelLeVcEM97mmtRGXw==", 408 | "dev": true, 409 | "dependencies": { 410 | "binary-extensions": "^2.0.0" 411 | }, 412 | "engines": { 413 | "node": ">=8" 414 | } 415 | }, 416 | "node_modules/is-core-module": { 417 | "version": "2.13.0", 418 | "resolved": "https://registry.npmjs.org/is-core-module/-/is-core-module-2.13.0.tgz", 419 | "integrity": "sha512-Z7dk6Qo8pOCp3l4tsX2C5ZVas4V+UxwQodwZhLopL91TX8UyyHEXafPcyoeeWuLrwzHcr3igO78wNLwHJHsMCQ==", 420 | "dev": true, 421 | "dependencies": { 422 | "has": "^1.0.3" 423 | }, 424 | "funding": { 425 | "url": "https://github.com/sponsors/ljharb" 426 | } 427 | }, 428 | "node_modules/is-extglob": { 429 | "version": "2.1.1", 430 | "resolved": "https://registry.npmjs.org/is-extglob/-/is-extglob-2.1.1.tgz", 431 | "integrity": "sha512-SbKbANkN603Vi4jEZv49LeVJMn4yGwsbzZworEoyEiutsN3nJYdbO36zfhGJ6QEDpOZIFkDtnq5JRxmvl3jsoQ==", 432 | "dev": true, 433 | "engines": { 434 | "node": ">=0.10.0" 435 | } 436 | }, 437 | "node_modules/is-glob": { 438 | "version": "4.0.3", 439 | "resolved": "https://registry.npmjs.org/is-glob/-/is-glob-4.0.3.tgz", 440 | "integrity": "sha512-xelSayHH36ZgE7ZWhli7pW34hNbNl8Ojv5KVmkJD4hBdD3th8Tfk9vYasLM+mXWOZhFkgZfxhLSnrwRr4elSSg==", 441 | "dev": true, 442 | "dependencies": { 443 | "is-extglob": "^2.1.1" 444 | }, 445 | "engines": { 446 | "node": ">=0.10.0" 447 | } 448 | }, 449 | "node_modules/is-number": { 450 | "version": "7.0.0", 451 | "resolved": "https://registry.npmjs.org/is-number/-/is-number-7.0.0.tgz", 452 | "integrity": "sha512-41Cifkg6e8TylSpdtTpeLVMqvSBEVzTttHvERD741+pnZ8ANv0004MRL43QKPDlK9cGvNp6NZWZUBlbGXYxxng==", 453 | "dev": true, 454 | "engines": { 455 | "node": ">=0.12.0" 456 | } 457 | }, 458 | "node_modules/jiti": { 459 | "version": "1.19.3", 460 | "resolved": "https://registry.npmjs.org/jiti/-/jiti-1.19.3.tgz", 461 | "integrity": "sha512-5eEbBDQT/jF1xg6l36P+mWGGoH9Spuy0PCdSr2dtWRDGC6ph/w9ZCL4lmESW8f8F7MwT3XKescfP0wnZWAKL9w==", 462 | "dev": true, 463 | "bin": { 464 | "jiti": "bin/jiti.js" 465 | } 466 | }, 467 | "node_modules/lilconfig": { 468 | "version": "2.1.0", 469 | "resolved": "https://registry.npmjs.org/lilconfig/-/lilconfig-2.1.0.tgz", 470 | "integrity": "sha512-utWOt/GHzuUxnLKxB6dk81RoOeoNeHgbrXiuGk4yyF5qlRz+iIVWu56E2fqGHFrXz0QNUhLB/8nKqvRH66JKGQ==", 471 | "dev": true, 472 | "engines": { 473 | "node": ">=10" 474 | } 475 | }, 476 | "node_modules/lines-and-columns": { 477 | "version": "1.2.4", 478 | "resolved": "https://registry.npmjs.org/lines-and-columns/-/lines-and-columns-1.2.4.tgz", 479 | "integrity": "sha512-7ylylesZQ/PV29jhEDl3Ufjo6ZX7gCqJr5F7PKrqc93v7fzSymt1BpwEU8nAUXs8qzzvqhbjhK5QZg6Mt/HkBg==", 480 | "dev": true 481 | }, 482 | "node_modules/merge2": { 483 | "version": "1.4.1", 484 | "resolved": "https://registry.npmjs.org/merge2/-/merge2-1.4.1.tgz", 485 | "integrity": "sha512-8q7VEgMJW4J8tcfVPy8g09NcQwZdbwFEqhe/WZkoIzjn/3TGDwtOCYtXGxA3O8tPzpczCCDgv+P2P5y00ZJOOg==", 486 | "dev": true, 487 | "engines": { 488 | "node": ">= 8" 489 | } 490 | }, 491 | "node_modules/micromatch": { 492 | "version": "4.0.5", 493 | "resolved": "https://registry.npmjs.org/micromatch/-/micromatch-4.0.5.tgz", 494 | "integrity": "sha512-DMy+ERcEW2q8Z2Po+WNXuw3c5YaUSFjAO5GsJqfEl7UjvtIuFKO6ZrKvcItdy98dwFI2N1tg3zNIdKaQT+aNdA==", 495 | "dev": true, 496 | "dependencies": { 497 | "braces": "^3.0.2", 498 | "picomatch": "^2.3.1" 499 | }, 500 | "engines": { 501 | "node": ">=8.6" 502 | } 503 | }, 504 | "node_modules/mini-svg-data-uri": { 505 | "version": "1.4.4", 506 | "resolved": "https://registry.npmjs.org/mini-svg-data-uri/-/mini-svg-data-uri-1.4.4.tgz", 507 | "integrity": "sha512-r9deDe9p5FJUPZAk3A59wGH7Ii9YrjjWw0jmw/liSbHl2CHiyXj6FcDXDu2K3TjVAXqiJdaw3xxwlZZr9E6nHg==", 508 | "dev": true, 509 | "bin": { 510 | "mini-svg-data-uri": "cli.js" 511 | } 512 | }, 513 | "node_modules/minimatch": { 514 | "version": "3.1.2", 515 | "resolved": "https://registry.npmjs.org/minimatch/-/minimatch-3.1.2.tgz", 516 | "integrity": "sha512-J7p63hRiAjw1NDEww1W7i37+ByIrOWO5XQQAzZ3VOcL0PNybwpfmV/N05zFAzwQ9USyEcX6t3UO+K5aqBQOIHw==", 517 | "dev": true, 518 | "dependencies": { 519 | "brace-expansion": "^1.1.7" 520 | }, 521 | "engines": { 522 | "node": "*" 523 | } 524 | }, 525 | "node_modules/mz": { 526 | "version": "2.7.0", 527 | "resolved": "https://registry.npmjs.org/mz/-/mz-2.7.0.tgz", 528 | "integrity": "sha512-z81GNO7nnYMEhrGh9LeymoE4+Yr0Wn5McHIZMK5cfQCl+NDX08sCZgUc9/6MHni9IWuFLm1Z3HTCXu2z9fN62Q==", 529 | "dev": true, 530 | "dependencies": { 531 | "any-promise": "^1.0.0", 532 | "object-assign": "^4.0.1", 533 | "thenify-all": "^1.0.0" 534 | } 535 | }, 536 | "node_modules/nanoid": { 537 | "version": "3.3.6", 538 | "resolved": "https://registry.npmjs.org/nanoid/-/nanoid-3.3.6.tgz", 539 | "integrity": "sha512-BGcqMMJuToF7i1rt+2PWSNVnWIkGCU78jBG3RxO/bZlnZPK2Cmi2QaffxGO/2RvWi9sL+FAiRiXMgsyxQ1DIDA==", 540 | "dev": true, 541 | "funding": [ 542 | { 543 | "type": "github", 544 | "url": "https://github.com/sponsors/ai" 545 | } 546 | ], 547 | "bin": { 548 | "nanoid": "bin/nanoid.cjs" 549 | }, 550 | "engines": { 551 | "node": "^10 || ^12 || ^13.7 || ^14 || >=15.0.1" 552 | } 553 | }, 554 | "node_modules/normalize-path": { 555 | "version": "3.0.0", 556 | "resolved": "https://registry.npmjs.org/normalize-path/-/normalize-path-3.0.0.tgz", 557 | "integrity": "sha512-6eZs5Ls3WtCisHWp9S2GUy8dqkpGi4BVSz3GaqiE6ezub0512ESztXUwUB6C6IKbQkY2Pnb/mD4WYojCRwcwLA==", 558 | "dev": true, 559 | "engines": { 560 | "node": ">=0.10.0" 561 | } 562 | }, 563 | "node_modules/object-assign": { 564 | "version": "4.1.1", 565 | "resolved": "https://registry.npmjs.org/object-assign/-/object-assign-4.1.1.tgz", 566 | "integrity": "sha512-rJgTQnkUnH1sFw8yT6VSU3zD3sWmu6sZhIseY8VX+GRu3P6F7Fu+JNDoXfklElbLJSnc3FUQHVe4cU5hj+BcUg==", 567 | "dev": true, 568 | "engines": { 569 | "node": ">=0.10.0" 570 | } 571 | }, 572 | "node_modules/object-hash": { 573 | "version": "3.0.0", 574 | "resolved": "https://registry.npmjs.org/object-hash/-/object-hash-3.0.0.tgz", 575 | "integrity": "sha512-RSn9F68PjH9HqtltsSnqYC1XXoWe9Bju5+213R98cNGttag9q9yAOTzdbsqvIa7aNm5WffBZFpWYr2aWrklWAw==", 576 | "dev": true, 577 | "engines": { 578 | "node": ">= 6" 579 | } 580 | }, 581 | "node_modules/once": { 582 | "version": "1.4.0", 583 | "resolved": "https://registry.npmjs.org/once/-/once-1.4.0.tgz", 584 | "integrity": "sha512-lNaJgI+2Q5URQBkccEKHTQOPaXdUxnZZElQTZY0MFUAuaEqe1E+Nyvgdz/aIyNi6Z9MzO5dv1H8n58/GELp3+w==", 585 | "dev": true, 586 | "dependencies": { 587 | "wrappy": "1" 588 | } 589 | }, 590 | "node_modules/path-is-absolute": { 591 | "version": "1.0.1", 592 | "resolved": "https://registry.npmjs.org/path-is-absolute/-/path-is-absolute-1.0.1.tgz", 593 | "integrity": "sha512-AVbw3UJ2e9bq64vSaS9Am0fje1Pa8pbGqTTsmXfaIiMpnr5DlDhfJOuLj9Sf95ZPVDAUerDfEk88MPmPe7UCQg==", 594 | "dev": true, 595 | "engines": { 596 | "node": ">=0.10.0" 597 | } 598 | }, 599 | "node_modules/path-parse": { 600 | "version": "1.0.7", 601 | "resolved": "https://registry.npmjs.org/path-parse/-/path-parse-1.0.7.tgz", 602 | "integrity": "sha512-LDJzPVEEEPR+y48z93A0Ed0yXb8pAByGWo/k5YYdYgpY2/2EsOsksJrq7lOHxryrVOn1ejG6oAp8ahvOIQD8sw==", 603 | "dev": true 604 | }, 605 | "node_modules/picocolors": { 606 | "version": "1.0.0", 607 | "resolved": "https://registry.npmjs.org/picocolors/-/picocolors-1.0.0.tgz", 608 | "integrity": "sha512-1fygroTLlHu66zi26VoTDv8yRgm0Fccecssto+MhsZ0D/DGW2sm8E8AjW7NU5VVTRt5GxbeZ5qBuJr+HyLYkjQ==", 609 | "dev": true 610 | }, 611 | "node_modules/picomatch": { 612 | "version": "2.3.1", 613 | "resolved": "https://registry.npmjs.org/picomatch/-/picomatch-2.3.1.tgz", 614 | "integrity": "sha512-JU3teHTNjmE2VCGFzuY8EXzCDVwEqB2a8fsIvwaStHhAWJEeVd1o1QD80CU6+ZdEXXSLbSsuLwJjkCBWqRQUVA==", 615 | "dev": true, 616 | "engines": { 617 | "node": ">=8.6" 618 | }, 619 | "funding": { 620 | "url": "https://github.com/sponsors/jonschlinkert" 621 | } 622 | }, 623 | "node_modules/pify": { 624 | "version": "2.3.0", 625 | "resolved": "https://registry.npmjs.org/pify/-/pify-2.3.0.tgz", 626 | "integrity": "sha512-udgsAY+fTnvv7kI7aaxbqwWNb0AHiB0qBO89PZKPkoTmGOgdbrHDKD+0B2X4uTfJ/FT1R09r9gTsjUjNJotuog==", 627 | "dev": true, 628 | "engines": { 629 | "node": ">=0.10.0" 630 | } 631 | }, 632 | "node_modules/pirates": { 633 | "version": "4.0.6", 634 | "resolved": "https://registry.npmjs.org/pirates/-/pirates-4.0.6.tgz", 635 | "integrity": "sha512-saLsH7WeYYPiD25LDuLRRY/i+6HaPYr6G1OUlN39otzkSTxKnubR9RTxS3/Kk50s1g2JTgFwWQDQyplC5/SHZg==", 636 | "dev": true, 637 | "engines": { 638 | "node": ">= 6" 639 | } 640 | }, 641 | "node_modules/postcss": { 642 | "version": "8.4.29", 643 | "resolved": "https://registry.npmjs.org/postcss/-/postcss-8.4.29.tgz", 644 | "integrity": "sha512-cbI+jaqIeu/VGqXEarWkRCCffhjgXc0qjBtXpqJhTBohMUjUQnbBr0xqX3vEKudc4iviTewcJo5ajcec5+wdJw==", 645 | "dev": true, 646 | "funding": [ 647 | { 648 | "type": "opencollective", 649 | "url": "https://opencollective.com/postcss/" 650 | }, 651 | { 652 | "type": "tidelift", 653 | "url": "https://tidelift.com/funding/github/npm/postcss" 654 | }, 655 | { 656 | "type": "github", 657 | "url": "https://github.com/sponsors/ai" 658 | } 659 | ], 660 | "dependencies": { 661 | "nanoid": "^3.3.6", 662 | "picocolors": "^1.0.0", 663 | "source-map-js": "^1.0.2" 664 | }, 665 | "engines": { 666 | "node": "^10 || ^12 || >=14" 667 | } 668 | }, 669 | "node_modules/postcss-import": { 670 | "version": "15.1.0", 671 | "resolved": "https://registry.npmjs.org/postcss-import/-/postcss-import-15.1.0.tgz", 672 | "integrity": "sha512-hpr+J05B2FVYUAXHeK1YyI267J/dDDhMU6B6civm8hSY1jYJnBXxzKDKDswzJmtLHryrjhnDjqqp/49t8FALew==", 673 | "dev": true, 674 | "dependencies": { 675 | "postcss-value-parser": "^4.0.0", 676 | "read-cache": "^1.0.0", 677 | "resolve": "^1.1.7" 678 | }, 679 | "engines": { 680 | "node": ">=14.0.0" 681 | }, 682 | "peerDependencies": { 683 | "postcss": "^8.0.0" 684 | } 685 | }, 686 | "node_modules/postcss-js": { 687 | "version": "4.0.1", 688 | "resolved": "https://registry.npmjs.org/postcss-js/-/postcss-js-4.0.1.tgz", 689 | "integrity": "sha512-dDLF8pEO191hJMtlHFPRa8xsizHaM82MLfNkUHdUtVEV3tgTp5oj+8qbEqYM57SLfc74KSbw//4SeJma2LRVIw==", 690 | "dev": true, 691 | "dependencies": { 692 | "camelcase-css": "^2.0.1" 693 | }, 694 | "engines": { 695 | "node": "^12 || ^14 || >= 16" 696 | }, 697 | "funding": { 698 | "type": "opencollective", 699 | "url": "https://opencollective.com/postcss/" 700 | }, 701 | "peerDependencies": { 702 | "postcss": "^8.4.21" 703 | } 704 | }, 705 | "node_modules/postcss-load-config": { 706 | "version": "4.0.1", 707 | "resolved": "https://registry.npmjs.org/postcss-load-config/-/postcss-load-config-4.0.1.tgz", 708 | "integrity": "sha512-vEJIc8RdiBRu3oRAI0ymerOn+7rPuMvRXslTvZUKZonDHFIczxztIyJ1urxM1x9JXEikvpWWTUUqal5j/8QgvA==", 709 | "dev": true, 710 | "dependencies": { 711 | "lilconfig": "^2.0.5", 712 | "yaml": "^2.1.1" 713 | }, 714 | "engines": { 715 | "node": ">= 14" 716 | }, 717 | "funding": { 718 | "type": "opencollective", 719 | "url": "https://opencollective.com/postcss/" 720 | }, 721 | "peerDependencies": { 722 | "postcss": ">=8.0.9", 723 | "ts-node": ">=9.0.0" 724 | }, 725 | "peerDependenciesMeta": { 726 | "postcss": { 727 | "optional": true 728 | }, 729 | "ts-node": { 730 | "optional": true 731 | } 732 | } 733 | }, 734 | "node_modules/postcss-nested": { 735 | "version": "6.0.1", 736 | "resolved": "https://registry.npmjs.org/postcss-nested/-/postcss-nested-6.0.1.tgz", 737 | "integrity": "sha512-mEp4xPMi5bSWiMbsgoPfcP74lsWLHkQbZc3sY+jWYd65CUwXrUaTp0fmNpa01ZcETKlIgUdFN/MpS2xZtqL9dQ==", 738 | "dev": true, 739 | "dependencies": { 740 | "postcss-selector-parser": "^6.0.11" 741 | }, 742 | "engines": { 743 | "node": ">=12.0" 744 | }, 745 | "funding": { 746 | "type": "opencollective", 747 | "url": "https://opencollective.com/postcss/" 748 | }, 749 | "peerDependencies": { 750 | "postcss": "^8.2.14" 751 | } 752 | }, 753 | "node_modules/postcss-selector-parser": { 754 | "version": "6.0.13", 755 | "resolved": "https://registry.npmjs.org/postcss-selector-parser/-/postcss-selector-parser-6.0.13.tgz", 756 | "integrity": "sha512-EaV1Gl4mUEV4ddhDnv/xtj7sxwrwxdetHdWUGnT4VJQf+4d05v6lHYZr8N573k5Z0BViss7BDhfWtKS3+sfAqQ==", 757 | "dev": true, 758 | "dependencies": { 759 | "cssesc": "^3.0.0", 760 | "util-deprecate": "^1.0.2" 761 | }, 762 | "engines": { 763 | "node": ">=4" 764 | } 765 | }, 766 | "node_modules/postcss-value-parser": { 767 | "version": "4.2.0", 768 | "resolved": "https://registry.npmjs.org/postcss-value-parser/-/postcss-value-parser-4.2.0.tgz", 769 | "integrity": "sha512-1NNCs6uurfkVbeXG4S8JFT9t19m45ICnif8zWLd5oPSZ50QnwMfK+H3jv408d4jw/7Bttv5axS5IiHoLaVNHeQ==", 770 | "dev": true 771 | }, 772 | "node_modules/queue-microtask": { 773 | "version": "1.2.3", 774 | "resolved": "https://registry.npmjs.org/queue-microtask/-/queue-microtask-1.2.3.tgz", 775 | "integrity": "sha512-NuaNSa6flKT5JaSYQzJok04JzTL1CA6aGhv5rfLW3PgqA+M2ChpZQnAC8h8i4ZFkBS8X5RqkDBHA7r4hej3K9A==", 776 | "dev": true, 777 | "funding": [ 778 | { 779 | "type": "github", 780 | "url": "https://github.com/sponsors/feross" 781 | }, 782 | { 783 | "type": "patreon", 784 | "url": "https://www.patreon.com/feross" 785 | }, 786 | { 787 | "type": "consulting", 788 | "url": "https://feross.org/support" 789 | } 790 | ] 791 | }, 792 | "node_modules/read-cache": { 793 | "version": "1.0.0", 794 | "resolved": "https://registry.npmjs.org/read-cache/-/read-cache-1.0.0.tgz", 795 | "integrity": "sha512-Owdv/Ft7IjOgm/i0xvNDZ1LrRANRfew4b2prF3OWMQLxLfu3bS8FVhCsrSCMK4lR56Y9ya+AThoTpDCTxCmpRA==", 796 | "dev": true, 797 | "dependencies": { 798 | "pify": "^2.3.0" 799 | } 800 | }, 801 | "node_modules/readdirp": { 802 | "version": "3.6.0", 803 | "resolved": "https://registry.npmjs.org/readdirp/-/readdirp-3.6.0.tgz", 804 | "integrity": "sha512-hOS089on8RduqdbhvQ5Z37A0ESjsqz6qnRcffsMU3495FuTdqSm+7bhJ29JvIOsBDEEnan5DPu9t3To9VRlMzA==", 805 | "dev": true, 806 | "dependencies": { 807 | "picomatch": "^2.2.1" 808 | }, 809 | "engines": { 810 | "node": ">=8.10.0" 811 | } 812 | }, 813 | "node_modules/resolve": { 814 | "version": "1.22.4", 815 | "resolved": "https://registry.npmjs.org/resolve/-/resolve-1.22.4.tgz", 816 | "integrity": "sha512-PXNdCiPqDqeUou+w1C2eTQbNfxKSuMxqTCuvlmmMsk1NWHL5fRrhY6Pl0qEYYc6+QqGClco1Qj8XnjPego4wfg==", 817 | "dev": true, 818 | "dependencies": { 819 | "is-core-module": "^2.13.0", 820 | "path-parse": "^1.0.7", 821 | "supports-preserve-symlinks-flag": "^1.0.0" 822 | }, 823 | "bin": { 824 | "resolve": "bin/resolve" 825 | }, 826 | "funding": { 827 | "url": "https://github.com/sponsors/ljharb" 828 | } 829 | }, 830 | "node_modules/reusify": { 831 | "version": "1.0.4", 832 | "resolved": "https://registry.npmjs.org/reusify/-/reusify-1.0.4.tgz", 833 | "integrity": "sha512-U9nH88a3fc/ekCF1l0/UP1IosiuIjyTh7hBvXVMHYgVcfGvt897Xguj2UOLDeI5BG2m7/uwyaLVT6fbtCwTyzw==", 834 | "dev": true, 835 | "engines": { 836 | "iojs": ">=1.0.0", 837 | "node": ">=0.10.0" 838 | } 839 | }, 840 | "node_modules/run-parallel": { 841 | "version": "1.2.0", 842 | "resolved": "https://registry.npmjs.org/run-parallel/-/run-parallel-1.2.0.tgz", 843 | "integrity": "sha512-5l4VyZR86LZ/lDxZTR6jqL8AFE2S0IFLMP26AbjsLVADxHdhB/c0GUsH+y39UfCi3dzz8OlQuPmnaJOMoDHQBA==", 844 | "dev": true, 845 | "funding": [ 846 | { 847 | "type": "github", 848 | "url": "https://github.com/sponsors/feross" 849 | }, 850 | { 851 | "type": "patreon", 852 | "url": "https://www.patreon.com/feross" 853 | }, 854 | { 855 | "type": "consulting", 856 | "url": "https://feross.org/support" 857 | } 858 | ], 859 | "dependencies": { 860 | "queue-microtask": "^1.2.2" 861 | } 862 | }, 863 | "node_modules/source-map-js": { 864 | "version": "1.0.2", 865 | "resolved": "https://registry.npmjs.org/source-map-js/-/source-map-js-1.0.2.tgz", 866 | "integrity": "sha512-R0XvVJ9WusLiqTCEiGCmICCMplcCkIwwR11mOSD9CR5u+IXYdiseeEuXCVAjS54zqwkLcPNnmU4OeJ6tUrWhDw==", 867 | "dev": true, 868 | "engines": { 869 | "node": ">=0.10.0" 870 | } 871 | }, 872 | "node_modules/sucrase": { 873 | "version": "3.34.0", 874 | "resolved": "https://registry.npmjs.org/sucrase/-/sucrase-3.34.0.tgz", 875 | "integrity": "sha512-70/LQEZ07TEcxiU2dz51FKaE6hCTWC6vr7FOk3Gr0U60C3shtAN+H+BFr9XlYe5xqf3RA8nrc+VIwzCfnxuXJw==", 876 | "dev": true, 877 | "dependencies": { 878 | "@jridgewell/gen-mapping": "^0.3.2", 879 | "commander": "^4.0.0", 880 | "glob": "7.1.6", 881 | "lines-and-columns": "^1.1.6", 882 | "mz": "^2.7.0", 883 | "pirates": "^4.0.1", 884 | "ts-interface-checker": "^0.1.9" 885 | }, 886 | "bin": { 887 | "sucrase": "bin/sucrase", 888 | "sucrase-node": "bin/sucrase-node" 889 | }, 890 | "engines": { 891 | "node": ">=8" 892 | } 893 | }, 894 | "node_modules/supports-preserve-symlinks-flag": { 895 | "version": "1.0.0", 896 | "resolved": "https://registry.npmjs.org/supports-preserve-symlinks-flag/-/supports-preserve-symlinks-flag-1.0.0.tgz", 897 | "integrity": "sha512-ot0WnXS9fgdkgIcePe6RHNk1WA8+muPa6cSjeR3V8K27q9BB1rTE3R1p7Hv0z1ZyAc8s6Vvv8DIyWf681MAt0w==", 898 | "dev": true, 899 | "engines": { 900 | "node": ">= 0.4" 901 | }, 902 | "funding": { 903 | "url": "https://github.com/sponsors/ljharb" 904 | } 905 | }, 906 | "node_modules/tailwindcss": { 907 | "version": "3.3.3", 908 | "resolved": "https://registry.npmjs.org/tailwindcss/-/tailwindcss-3.3.3.tgz", 909 | "integrity": "sha512-A0KgSkef7eE4Mf+nKJ83i75TMyq8HqY3qmFIJSWy8bNt0v1lG7jUcpGpoTFxAwYcWOphcTBLPPJg+bDfhDf52w==", 910 | "dev": true, 911 | "dependencies": { 912 | "@alloc/quick-lru": "^5.2.0", 913 | "arg": "^5.0.2", 914 | "chokidar": "^3.5.3", 915 | "didyoumean": "^1.2.2", 916 | "dlv": "^1.1.3", 917 | "fast-glob": "^3.2.12", 918 | "glob-parent": "^6.0.2", 919 | "is-glob": "^4.0.3", 920 | "jiti": "^1.18.2", 921 | "lilconfig": "^2.1.0", 922 | "micromatch": "^4.0.5", 923 | "normalize-path": "^3.0.0", 924 | "object-hash": "^3.0.0", 925 | "picocolors": "^1.0.0", 926 | "postcss": "^8.4.23", 927 | "postcss-import": "^15.1.0", 928 | "postcss-js": "^4.0.1", 929 | "postcss-load-config": "^4.0.1", 930 | "postcss-nested": "^6.0.1", 931 | "postcss-selector-parser": "^6.0.11", 932 | "resolve": "^1.22.2", 933 | "sucrase": "^3.32.0" 934 | }, 935 | "bin": { 936 | "tailwind": "lib/cli.js", 937 | "tailwindcss": "lib/cli.js" 938 | }, 939 | "engines": { 940 | "node": ">=14.0.0" 941 | } 942 | }, 943 | "node_modules/thenify": { 944 | "version": "3.3.1", 945 | "resolved": "https://registry.npmjs.org/thenify/-/thenify-3.3.1.tgz", 946 | "integrity": "sha512-RVZSIV5IG10Hk3enotrhvz0T9em6cyHBLkH/YAZuKqd8hRkKhSfCGIcP2KUY0EPxndzANBmNllzWPwak+bheSw==", 947 | "dev": true, 948 | "dependencies": { 949 | "any-promise": "^1.0.0" 950 | } 951 | }, 952 | "node_modules/thenify-all": { 953 | "version": "1.6.0", 954 | "resolved": "https://registry.npmjs.org/thenify-all/-/thenify-all-1.6.0.tgz", 955 | "integrity": "sha512-RNxQH/qI8/t3thXJDwcstUO4zeqo64+Uy/+sNVRBx4Xn2OX+OZ9oP+iJnNFqplFra2ZUVeKCSa2oVWi3T4uVmA==", 956 | "dev": true, 957 | "dependencies": { 958 | "thenify": ">= 3.1.0 < 4" 959 | }, 960 | "engines": { 961 | "node": ">=0.8" 962 | } 963 | }, 964 | "node_modules/to-regex-range": { 965 | "version": "5.0.1", 966 | "resolved": "https://registry.npmjs.org/to-regex-range/-/to-regex-range-5.0.1.tgz", 967 | "integrity": "sha512-65P7iz6X5yEr1cwcgvQxbbIw7Uk3gOy5dIdtZ4rDveLqhrdJP+Li/Hx6tyK0NEb+2GCyneCMJiGqrADCSNk8sQ==", 968 | "dev": true, 969 | "dependencies": { 970 | "is-number": "^7.0.0" 971 | }, 972 | "engines": { 973 | "node": ">=8.0" 974 | } 975 | }, 976 | "node_modules/ts-interface-checker": { 977 | "version": "0.1.13", 978 | "resolved": "https://registry.npmjs.org/ts-interface-checker/-/ts-interface-checker-0.1.13.tgz", 979 | "integrity": "sha512-Y/arvbn+rrz3JCKl9C4kVNfTfSm2/mEp5FSz5EsZSANGPSlQrpRI5M4PKF+mJnE52jOO90PnPSc3Ur3bTQw0gA==", 980 | "dev": true 981 | }, 982 | "node_modules/util-deprecate": { 983 | "version": "1.0.2", 984 | "resolved": "https://registry.npmjs.org/util-deprecate/-/util-deprecate-1.0.2.tgz", 985 | "integrity": "sha512-EPD5q1uXyFxJpCrLnCc1nHnq3gOa6DZBocAIiI2TaSCA7VCJ1UJDMagCzIkXNsUYfD1daK//LTEQ8xiIbrHtcw==", 986 | "dev": true 987 | }, 988 | "node_modules/wrappy": { 989 | "version": "1.0.2", 990 | "resolved": "https://registry.npmjs.org/wrappy/-/wrappy-1.0.2.tgz", 991 | "integrity": "sha512-l4Sp/DRseor9wL6EvV2+TuQn63dMkPjZ/sp9XkghTEbV9KlPS1xUsZ3u7/IQO4wxtcFB4bgpQPRcR3QCvezPcQ==", 992 | "dev": true 993 | }, 994 | "node_modules/yaml": { 995 | "version": "2.3.2", 996 | "resolved": "https://registry.npmjs.org/yaml/-/yaml-2.3.2.tgz", 997 | "integrity": "sha512-N/lyzTPaJasoDmfV7YTrYCI0G/3ivm/9wdG0aHuheKowWQwGTsK0Eoiw6utmzAnI6pkJa0DUVygvp3spqqEKXg==", 998 | "dev": true, 999 | "engines": { 1000 | "node": ">= 14" 1001 | } 1002 | } 1003 | } 1004 | } 1005 | -------------------------------------------------------------------------------- /Spark.UI.Docs/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "dotnetjobs", 3 | "devDependencies": { 4 | "tailwindcss": "^3.3.3", 5 | "@tailwindcss/forms": "^0.5.4" 6 | } 7 | } 8 | -------------------------------------------------------------------------------- /Spark.UI.Docs/postcss.config.js: -------------------------------------------------------------------------------- 1 | module.exports = { 2 | plugins: { 3 | tailwindcss: {}, 4 | autoprefixer: {}, 5 | }, 6 | } 7 | -------------------------------------------------------------------------------- /Spark.UI.Docs/tailwind.config.js: -------------------------------------------------------------------------------- 1 | const { fontFamily } = require("tailwindcss/defaultTheme") 2 | 3 | module.exports = { 4 | darkMode: ["class"], 5 | content: ["../**/*.razor", "**/*.cshtml", "**/*.html"], 6 | theme: { 7 | container: { 8 | center: true, 9 | padding: { 10 | DEFAULT: '1rem', 11 | sm: '2rem', 12 | lg: '4rem', 13 | xl: '5rem', 14 | '2xl': '6rem', 15 | }, 16 | screens: { 17 | "2xl": "1400px", 18 | }, 19 | }, 20 | extend: { 21 | colors: { 22 | border: "hsl(var(--border))", 23 | input: "hsl(var(--input))", 24 | ring: "hsl(var(--ring))", 25 | background: "hsl(var(--background))", 26 | foreground: "hsl(var(--foreground))", 27 | primary: { 28 | DEFAULT: "hsl(var(--primary))", 29 | foreground: "hsl(var(--primary-foreground))", 30 | }, 31 | secondary: { 32 | DEFAULT: "hsl(var(--secondary))", 33 | foreground: "hsl(var(--secondary-foreground))", 34 | }, 35 | destructive: { 36 | DEFAULT: "hsl(var(--destructive))", 37 | foreground: "hsl(var(--destructive-foreground))", 38 | }, 39 | muted: { 40 | DEFAULT: "hsl(var(--muted))", 41 | foreground: "hsl(var(--muted-foreground))", 42 | }, 43 | accent: { 44 | DEFAULT: "hsl(var(--accent))", 45 | foreground: "hsl(var(--accent-foreground))", 46 | }, 47 | popover: { 48 | DEFAULT: "hsl(var(--popover))", 49 | foreground: "hsl(var(--popover-foreground))", 50 | }, 51 | card: { 52 | DEFAULT: "hsl(var(--card))", 53 | foreground: "hsl(var(--card-foreground))", 54 | }, 55 | }, 56 | borderRadius: { 57 | lg: `var(--radius)`, 58 | md: `calc(var(--radius) - 2px)`, 59 | sm: "calc(var(--radius) - 4px)", 60 | }, 61 | fontFamily: { 62 | sans: ["var(--font-sans)", ...fontFamily.sans], 63 | }, 64 | keyframes: { 65 | "accordion-down": { 66 | from: { height: 0 }, 67 | to: { height: "var(--radix-accordion-content-height)" }, 68 | }, 69 | "accordion-up": { 70 | from: { height: "var(--radix-accordion-content-height)" }, 71 | to: { height: 0 }, 72 | }, 73 | }, 74 | animation: { 75 | "accordion-down": "accordion-down 0.2s ease-out", 76 | "accordion-up": "accordion-up 0.2s ease-out", 77 | }, 78 | }, 79 | }, 80 | plugins: [ 81 | require('@tailwindcss/forms') 82 | ], 83 | } -------------------------------------------------------------------------------- /Spark.UI.Docs/wwwroot/favicon.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/spark-dotnet/ui/4a9c2c57a10513306b2ef221461df93578219c1c/Spark.UI.Docs/wwwroot/favicon.png -------------------------------------------------------------------------------- /Spark.UI.Docs/wwwroot/spark-ui.zip: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/spark-dotnet/ui/4a9c2c57a10513306b2ef221461df93578219c1c/Spark.UI.Docs/wwwroot/spark-ui.zip -------------------------------------------------------------------------------- /Spark.UI.sln: -------------------------------------------------------------------------------- 1 |  2 | Microsoft Visual Studio Solution File, Format Version 12.00 3 | # Visual Studio Version 17 4 | VisualStudioVersion = 17.8.34004.107 5 | MinimumVisualStudioVersion = 10.0.40219.1 6 | Project("{9A19103F-16F7-4668-BE54-9A1E7A4F7556}") = "Spark.UI.Docs", "Spark.UI.Docs\Spark.UI.Docs.csproj", "{1260F4CB-6C19-4B50-9E97-B120431B52CF}" 7 | EndProject 8 | Project("{9A19103F-16F7-4668-BE54-9A1E7A4F7556}") = "Spark.UI", "Spark.UI\Spark.UI.csproj", "{864E2152-CA5D-4782-AAF3-40AD5C44D788}" 9 | EndProject 10 | Global 11 | GlobalSection(SolutionConfigurationPlatforms) = preSolution 12 | Debug|Any CPU = Debug|Any CPU 13 | Release|Any CPU = Release|Any CPU 14 | EndGlobalSection 15 | GlobalSection(ProjectConfigurationPlatforms) = postSolution 16 | {1260F4CB-6C19-4B50-9E97-B120431B52CF}.Debug|Any CPU.ActiveCfg = Debug|Any CPU 17 | {1260F4CB-6C19-4B50-9E97-B120431B52CF}.Debug|Any CPU.Build.0 = Debug|Any CPU 18 | {1260F4CB-6C19-4B50-9E97-B120431B52CF}.Release|Any CPU.ActiveCfg = Release|Any CPU 19 | {1260F4CB-6C19-4B50-9E97-B120431B52CF}.Release|Any CPU.Build.0 = Release|Any CPU 20 | {864E2152-CA5D-4782-AAF3-40AD5C44D788}.Debug|Any CPU.ActiveCfg = Debug|Any CPU 21 | {864E2152-CA5D-4782-AAF3-40AD5C44D788}.Debug|Any CPU.Build.0 = Debug|Any CPU 22 | {864E2152-CA5D-4782-AAF3-40AD5C44D788}.Release|Any CPU.ActiveCfg = Release|Any CPU 23 | {864E2152-CA5D-4782-AAF3-40AD5C44D788}.Release|Any CPU.Build.0 = Release|Any CPU 24 | EndGlobalSection 25 | GlobalSection(SolutionProperties) = preSolution 26 | HideSolutionNode = FALSE 27 | EndGlobalSection 28 | GlobalSection(ExtensibilityGlobals) = postSolution 29 | SolutionGuid = {9B02EA99-9274-446C-9672-F74FF12D6132} 30 | EndGlobalSection 31 | EndGlobal 32 | -------------------------------------------------------------------------------- /Spark.UI/Components/Alert.razor: -------------------------------------------------------------------------------- 1 | @inherits SparkComponent 2 | 3 | 6 | 7 | @code { 8 | [Parameter] 9 | public AlertVariant Variant { get; set; } = AlertVariant.Default; 10 | 11 | private Dictionary variants = new Dictionary() 12 | { 13 | { 14 | AlertVariant.Default, "bg-background text-foreground [&>svg]:text-foreground" 15 | }, 16 | { 17 | AlertVariant.Success, "border-green-600/50 text-green-600 dark:border-green-600 [&>svg]:text-green-600 bg-green-50" 18 | }, 19 | { 20 | AlertVariant.Info, "border-blue-600/50 text-blue-600 dark:border-blue-600 [&>svg]:text-blue-600 bg-blue-50" 21 | }, 22 | { 23 | AlertVariant.Warning, "border-yellow-600/50 text-yellow-600 dark:border-yellow-600 [&>svg]:text-yellow-600 bg-yellow-50" 24 | }, 25 | { 26 | AlertVariant.Destructive, "border-destructive/50 text-destructive dark:border-destructive [&>svg]:text-destructive bg-red-50" 27 | } 28 | }; 29 | } -------------------------------------------------------------------------------- /Spark.UI/Components/AlertDescription.razor: -------------------------------------------------------------------------------- 1 | @inherits SparkComponent 2 | 3 |
    4 | @ChildContent 5 |
    -------------------------------------------------------------------------------- /Spark.UI/Components/AlertTitle.razor: -------------------------------------------------------------------------------- 1 | @inherits SparkComponent 2 | 3 |
    4 | @ChildContent 5 |
    -------------------------------------------------------------------------------- /Spark.UI/Components/Avatar.razor: -------------------------------------------------------------------------------- 1 | @inherits SparkComponent 2 | 3 | 4 | @ChildContent 5 | -------------------------------------------------------------------------------- /Spark.UI/Components/AvatarImage.razor: -------------------------------------------------------------------------------- 1 | @inherits SparkComponent 2 | 3 | 4 | @ChildContent 5 | -------------------------------------------------------------------------------- /Spark.UI/Components/Badge.razor: -------------------------------------------------------------------------------- 1 | @inherits SparkComponent 2 | 3 |
    4 | @ChildContent 5 |
    6 | 7 | @code { 8 | [Parameter] 9 | public BadgeVariant Variant { get; set; } = BadgeVariant.Default; 10 | 11 | private Dictionary variants = new Dictionary() 12 | { 13 | { 14 | BadgeVariant.Default, "border-transparent bg-primary text-primary-foreground hover:bg-primary/80" 15 | }, 16 | { 17 | BadgeVariant.Secondary, "border-transparent bg-secondary text-secondary-foreground hover:bg-secondary/80" 18 | }, 19 | { 20 | BadgeVariant.Destructive, "border-transparent bg-destructive text-destructive-foreground hover:bg-destructive/80" 21 | }, 22 | { 23 | BadgeVariant.Outline, "text-foreground" 24 | }, 25 | { 26 | BadgeVariant.Success, "border-transparent bg-green-400 text-white" 27 | }, 28 | { 29 | BadgeVariant.Warning, "border-transparent bg-yellow-400 text-white" 30 | }, 31 | { 32 | BadgeVariant.Info, "border-transparent bg-blue-400 text-white" 33 | }, 34 | }; 35 | } -------------------------------------------------------------------------------- /Spark.UI/Components/Breadcrumb.razor: -------------------------------------------------------------------------------- 1 | @inherits SparkComponent 2 | 3 |
    4 | @ChildContent 5 |
    -------------------------------------------------------------------------------- /Spark.UI/Components/BreadcrumbItem.razor: -------------------------------------------------------------------------------- 1 | @inherits SparkComponent 2 | 3 |

    4 | @ChildContent 5 |

    6 | 7 | @code { 8 | [Parameter] 9 | public bool IsActive { get; set; } = false; 10 | private string activeClasses = ""; 11 | 12 | protected override void OnInitialized() 13 | { 14 | activeClasses = IsActive ? "text-foreground font-medium" : "text-muted-foreground"; 15 | } 16 | } -------------------------------------------------------------------------------- /Spark.UI/Components/BreadcrumbLinkItem.razor: -------------------------------------------------------------------------------- 1 | @inherits SparkComponent 2 | 3 | 4 | @ChildContent 5 | 6 | 7 | @code { 8 | [Parameter] 9 | public bool IsActive { get; set; } = false; 10 | private string activeClasses = ""; 11 | 12 | protected override void OnInitialized() 13 | { 14 | activeClasses = IsActive ? "text-foreground font-medium" : "text-muted-foreground"; 15 | } 16 | } -------------------------------------------------------------------------------- /Spark.UI/Components/Button.razor: -------------------------------------------------------------------------------- 1 | @inherits SparkComponent 2 | 3 | 6 | 7 | @code { 8 | [Parameter] 9 | public ButtonVariant Variant { get; set; } = ButtonVariant.Default; 10 | 11 | private Dictionary variants = new Dictionary() 12 | { 13 | { 14 | ButtonVariant.Default, "bg-primary text-primary-foreground hover:bg-primary/90" 15 | }, 16 | { 17 | ButtonVariant.Destructive, "bg-destructive text-destructive-foreground hover:bg-destructive/90" 18 | }, 19 | { 20 | ButtonVariant.Outline, "border border-input bg-background hover:bg-accent hover:text-accent-foreground" 21 | }, 22 | { 23 | ButtonVariant.Secondary, "bg-secondary text-secondary-foreground hover:bg-secondary/80" 24 | }, 25 | { 26 | ButtonVariant.Ghost, "hover:bg-accent hover:text-accent-foreground" 27 | }, 28 | { 29 | ButtonVariant.Link, "text-primary underline-offset-4 hover:underline" 30 | } 31 | }; 32 | } -------------------------------------------------------------------------------- /Spark.UI/Components/ButtonLink.razor: -------------------------------------------------------------------------------- 1 | @inherits SparkComponent 2 | 3 | 4 | @ChildContent 5 | 6 | 7 | @code { 8 | [Parameter] 9 | public ButtonVariant Variant { get; set; } = ButtonVariant.Default; 10 | 11 | private Dictionary variants = new Dictionary() 12 | { 13 | { 14 | ButtonVariant.Default, "bg-primary text-primary-foreground hover:bg-primary/90" 15 | }, 16 | { 17 | ButtonVariant.Destructive, "bg-destructive text-destructive-foreground hover:bg-destructive/90" 18 | }, 19 | { 20 | ButtonVariant.Outline, "border border-input bg-background hover:bg-accent hover:text-accent-foreground" 21 | }, 22 | { 23 | ButtonVariant.Secondary, "bg-secondary text-secondary-foreground hover:bg-secondary/80" 24 | }, 25 | { 26 | ButtonVariant.Ghost, "hover:bg-accent hover:text-accent-foreground" 27 | }, 28 | { 29 | ButtonVariant.Link, "text-primary underline-offset-4 hover:underline" 30 | } 31 | }; 32 | } -------------------------------------------------------------------------------- /Spark.UI/Components/Card.razor: -------------------------------------------------------------------------------- 1 | @inherits SparkComponent 2 | 3 |
    4 | @ChildContent 5 |
    -------------------------------------------------------------------------------- /Spark.UI/Components/CardContent.razor: -------------------------------------------------------------------------------- 1 | @inherits SparkComponent 2 | 3 |
    4 | @ChildContent 5 |
    -------------------------------------------------------------------------------- /Spark.UI/Components/CardDescription.razor: -------------------------------------------------------------------------------- 1 | @inherits SparkComponent 2 | 3 |

    4 | @ChildContent 5 |

    -------------------------------------------------------------------------------- /Spark.UI/Components/CardFooter.razor: -------------------------------------------------------------------------------- 1 | @inherits SparkComponent 2 | 3 |
    4 | @ChildContent 5 |
    -------------------------------------------------------------------------------- /Spark.UI/Components/CardHeader.razor: -------------------------------------------------------------------------------- 1 | @inherits SparkComponent 2 | 3 |
    4 | @ChildContent 5 |
    -------------------------------------------------------------------------------- /Spark.UI/Components/CardTitle.razor: -------------------------------------------------------------------------------- 1 | @inherits SparkComponent 2 | 3 |

    4 | @ChildContent 5 |

    -------------------------------------------------------------------------------- /Spark.UI/Components/FormDescription.razor: -------------------------------------------------------------------------------- 1 | @inherits SparkComponent 2 | 3 |

    4 | @ChildContent 5 |

    -------------------------------------------------------------------------------- /Spark.UI/Components/Icons/ChevronRight.razor: -------------------------------------------------------------------------------- 1 | @inherits SparkComponent 2 | 3 | -------------------------------------------------------------------------------- /Spark.UI/Components/Icons/IconAlertTriangle.razor: -------------------------------------------------------------------------------- 1 | @inherits SparkComponent 2 | 3 | -------------------------------------------------------------------------------- /Spark.UI/Components/Icons/IconCheckCircle.razor: -------------------------------------------------------------------------------- 1 | @inherits SparkComponent 2 | 3 | -------------------------------------------------------------------------------- /Spark.UI/Components/Icons/IconChevronDown.razor: -------------------------------------------------------------------------------- 1 | @inherits SparkComponent 2 | 3 | -------------------------------------------------------------------------------- /Spark.UI/Components/Icons/IconInfo.razor: -------------------------------------------------------------------------------- 1 | @inherits SparkComponent 2 | 3 | -------------------------------------------------------------------------------- /Spark.UI/Components/Icons/IconMenu.razor: -------------------------------------------------------------------------------- 1 | @inherits SparkComponent 2 | 3 | -------------------------------------------------------------------------------- /Spark.UI/Components/Icons/IconX.razor: -------------------------------------------------------------------------------- 1 | @inherits SparkComponent 2 | -------------------------------------------------------------------------------- /Spark.UI/Components/Icons/IconXCircle.razor: -------------------------------------------------------------------------------- 1 | @inherits SparkComponent 2 | 3 | -------------------------------------------------------------------------------- /Spark.UI/Components/InputGroup.razor: -------------------------------------------------------------------------------- 1 | @using System.Linq.Expressions; 2 | @using Microsoft.AspNetCore.Components.Forms 3 | 4 |
    5 | 8 | @ChildContent 9 | @if (!String.IsNullOrEmpty(Description)) 10 | { 11 | 12 | @Description 13 | 14 | } 15 | 16 |
    17 | 18 | @code { 19 | [Parameter] public required RenderFragment ChildContent { get; set; } 20 | [Parameter] public Expression>? For { get; set; } 21 | [Parameter] public string? Label { get; set; } 22 | [Parameter] public string? Description { get; set; } 23 | 24 | private FieldIdentifier _fieldIdentifier; 25 | protected override void OnParametersSet() 26 | { 27 | base.OnParametersSet(); 28 | 29 | if (For == null) 30 | { 31 | throw new InvalidOperationException($"{GetType()} requires a value for the " + 32 | $"{nameof(For)} parameter."); 33 | } 34 | 35 | // Derive label from For property 36 | _fieldIdentifier = FieldIdentifier.Create(For); 37 | if (String.IsNullOrEmpty(Label)) Label = _fieldIdentifier.FieldName; 38 | } 39 | } 40 | -------------------------------------------------------------------------------- /Spark.UI/Components/Label.razor: -------------------------------------------------------------------------------- 1 | @inherits SparkComponent 2 | 3 | -------------------------------------------------------------------------------- /Spark.UI/Components/NavigationBar.razor: -------------------------------------------------------------------------------- 1 | @inherits SparkComponent 2 | 3 | -------------------------------------------------------------------------------- /Spark.UI/Components/NavigationLink.razor: -------------------------------------------------------------------------------- 1 | @inherits SparkComponent 2 | 3 | 4 | @ChildContent 5 | 6 | 7 | @code { 8 | [Parameter] 9 | public bool IsActive { get; set; } = false; 10 | private string activeClasses = ""; 11 | 12 | protected override void OnInitialized() 13 | { 14 | activeClasses = IsActive ? "text-primary" : "text-muted-foreground"; 15 | } 16 | } 17 | -------------------------------------------------------------------------------- /Spark.UI/Components/SparkComponent.razor: -------------------------------------------------------------------------------- 1 | @code { 2 | protected IReadOnlyDictionary? attributes; 3 | protected string classes = ""; 4 | 5 | [Parameter(CaptureUnmatchedValues = true)] public IReadOnlyDictionary AdditionalAttributes { get; set; } = new Dictionary(); 6 | 7 | [Parameter] public required RenderFragment ChildContent { get; set; } 8 | 9 | protected override void OnParametersSet() 10 | { 11 | base.OnParametersSet(); 12 | 13 | classes = $"{AdditionalAttributes.GetValueOrDefault("class")}"; 14 | 15 | attributes = 16 | AdditionalAttributes 17 | .Where(x => x.Key != "class") 18 | .ToDictionary(k => k.Key, v => v.Value); 19 | } 20 | } -------------------------------------------------------------------------------- /Spark.UI/Components/Typography/Blockquote.razor: -------------------------------------------------------------------------------- 1 | @inherits SparkComponent 2 | 3 |
    4 | @ChildContent 5 |
    -------------------------------------------------------------------------------- /Spark.UI/Components/Typography/InlineCode.razor: -------------------------------------------------------------------------------- 1 | @inherits SparkComponent 2 | 3 | 4 | @ChildContent 5 | -------------------------------------------------------------------------------- /Spark.UI/Components/Typography/InlineLink.razor: -------------------------------------------------------------------------------- 1 | @inherits SparkComponent 2 | 3 | 4 | @ChildContent 5 | -------------------------------------------------------------------------------- /Spark.UI/Components/Typography/TypographyH1.razor: -------------------------------------------------------------------------------- 1 | @inherits SparkComponent 2 | 3 |

    4 | @ChildContent 5 |

    -------------------------------------------------------------------------------- /Spark.UI/Components/Typography/TypographyH2.razor: -------------------------------------------------------------------------------- 1 | @inherits SparkComponent 2 | 3 |

    4 | @ChildContent 5 |

    -------------------------------------------------------------------------------- /Spark.UI/Components/Typography/TypographyH3.razor: -------------------------------------------------------------------------------- 1 | @inherits SparkComponent 2 | 3 |

    4 | @ChildContent 5 |

    -------------------------------------------------------------------------------- /Spark.UI/Components/Typography/TypographyH4.razor: -------------------------------------------------------------------------------- 1 | @inherits SparkComponent 2 | 3 |

    4 | @ChildContent 5 |

    -------------------------------------------------------------------------------- /Spark.UI/Components/Typography/TypographyHero.razor: -------------------------------------------------------------------------------- 1 | @inherits SparkComponent 2 | 3 |

    4 | @ChildContent 5 |

    -------------------------------------------------------------------------------- /Spark.UI/Components/Typography/TypographyLarge.razor: -------------------------------------------------------------------------------- 1 | @inherits SparkComponent 2 | 3 |
    4 | @ChildContent 5 |
    -------------------------------------------------------------------------------- /Spark.UI/Components/Typography/TypographyLead.razor: -------------------------------------------------------------------------------- 1 | @inherits SparkComponent 2 | 3 |

    4 | @ChildContent 5 |

    -------------------------------------------------------------------------------- /Spark.UI/Components/Typography/TypographyList.razor: -------------------------------------------------------------------------------- 1 | @inherits SparkComponent 2 | 3 |
      4 | @ChildContent 5 |
    -------------------------------------------------------------------------------- /Spark.UI/Components/Typography/TypographyMuted.razor: -------------------------------------------------------------------------------- 1 | @inherits SparkComponent 2 | 3 |

    4 | @ChildContent 5 |

    -------------------------------------------------------------------------------- /Spark.UI/Components/Typography/TypographyP.razor: -------------------------------------------------------------------------------- 1 | @inherits SparkComponent 2 | 3 |

    4 | @ChildContent 5 |

    -------------------------------------------------------------------------------- /Spark.UI/Components/Typography/TypographySmall.razor: -------------------------------------------------------------------------------- 1 | @inherits SparkComponent 2 | 3 | 4 | @ChildContent 5 | -------------------------------------------------------------------------------- /Spark.UI/Components/Typography/TypographyTable.razor: -------------------------------------------------------------------------------- 1 | 
    2 | 3 | 4 | 5 | 8 | 11 | 12 | 13 | 14 | 15 | 18 | 21 | 22 | 23 | 26 | 29 | 30 | 31 | 34 | 37 | 38 | 39 |
    6 | Vestibulum Vitae Nisl 7 | 9 | Erat Voluptatem 10 |
    16 | Etiam 17 | 19 | Tellu 20 |
    24 | Proin 25 | 27 | Aliquam 28 |
    32 | Erat 33 | 35 | Voluptatem 36 |
    40 |
    -------------------------------------------------------------------------------- /Spark.UI/Components/Variants.cs: -------------------------------------------------------------------------------- 1 | namespace Spark.UI.Components; 2 | 3 | public enum AlertVariant 4 | { 5 | Default, 6 | Success, 7 | Info, 8 | Warning, 9 | Destructive, 10 | } 11 | 12 | public enum BadgeVariant 13 | { 14 | Default, 15 | Secondary, 16 | Outline, 17 | Success, 18 | Info, 19 | Warning, 20 | Destructive, 21 | } 22 | 23 | public enum ButtonVariant 24 | { 25 | Default, 26 | Destructive, 27 | Outline, 28 | Secondary, 29 | Ghost, 30 | Link 31 | } -------------------------------------------------------------------------------- /Spark.UI/Spark.UI.csproj: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | net8.0 5 | enable 6 | enable 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 | 15 | 16 | 17 | 18 | 19 | 20 | 21 | 22 | 23 | -------------------------------------------------------------------------------- /Spark.UI/Styles/globals.css: -------------------------------------------------------------------------------- 1 | @tailwind base; 2 | @tailwind components; 3 | @tailwind utilities; 4 | 5 | @layer base { 6 | :root { 7 | --background: 0 0% 100%; 8 | --foreground: 222.2 47.4% 11.2%; 9 | --muted: 210 40% 96.1%; 10 | --muted-foreground: 215.4 16.3% 46.9%; 11 | --popover: 0 0% 100%; 12 | --popover-foreground: 222.2 47.4% 11.2%; 13 | --border: 214.3 31.8% 91.4%; 14 | --input: 214.3 31.8% 91.4%; 15 | --card: 0 0% 100%; 16 | --card-foreground: 222.2 47.4% 11.2%; 17 | --primary: 222.2 47.4% 11.2%; 18 | --primary-foreground: 210 40% 98%; 19 | --secondary: 210 40% 96.1%; 20 | --secondary-foreground: 222.2 47.4% 11.2%; 21 | --accent: 210 40% 96.1%; 22 | --accent-foreground: 222.2 47.4% 11.2%; 23 | --destructive: 0 84.2% 60.2%; 24 | --destructive-foreground: 0 0% 98%; 25 | --ring: 215 20.2% 65.1%; 26 | --radius: 0.5rem; 27 | --font-sans: 'Inter var'; 28 | } 29 | 30 | .dark { 31 | --background: 224 71% 4%; 32 | --foreground: 213 31% 91%; 33 | --muted: 223 47% 11%; 34 | --muted-foreground: 215.4 16.3% 56.9%; 35 | --accent: 216 34% 17%; 36 | --accent-foreground: 210 40% 98%; 37 | --popover: 224 71% 4%; 38 | --popover-foreground: 215 20.2% 65.1%; 39 | --border: 216 34% 17%; 40 | --input: 216 34% 17%; 41 | --card: 224 71% 4%; 42 | --card-foreground: 213 31% 91%; 43 | --primary: 210 40% 98%; 44 | --primary-foreground: 222.2 47.4% 1.2%; 45 | --secondary: 222.2 47.4% 11.2%; 46 | --secondary-foreground: 210 40% 98%; 47 | --destructive: 0 63% 31%; 48 | --destructive-foreground: 210 40% 98%; 49 | --ring: 216 34% 17%; 50 | --radius: 0.5rem; 51 | } 52 | } 53 | 54 | @layer base { 55 | * { 56 | @apply border-border; 57 | } 58 | 59 | body { 60 | @apply bg-background text-foreground; 61 | font-feature-settings: "rlig" 1, "calt" 1; 62 | } 63 | } 64 | 65 | .validation-message { 66 | @apply text-sm font-medium text-destructive; 67 | } 68 | 69 | [x-cloak] { 70 | display: none !important; 71 | } 72 | 73 | input[type=text], 74 | input[type=email], 75 | input[type=date], 76 | input[type=file], 77 | input[type=datetime-local], 78 | input[type=month], 79 | input[type=number], 80 | input[type=password], 81 | input[type=search], 82 | input[type=tel], 83 | input[type=time], 84 | input[type=url], 85 | input[type=week] { 86 | @apply flex h-10 w-full rounded-md border border-input bg-background px-3 py-2 text-sm ring-offset-background file:border-0 file:bg-transparent file:text-sm file:font-medium placeholder:text-muted-foreground focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50 focus:border-input focus:ring-ring; 87 | } 88 | 89 | textarea { 90 | @apply flex min-h-[80px] w-full rounded-md border border-input bg-background px-3 py-2 text-sm ring-offset-background placeholder:text-muted-foreground focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50; 91 | } 92 | 93 | input[type=checkbox] { 94 | @apply h-4 w-4 shrink-0 rounded-sm border border-primary ring-offset-background focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50 text-primary focus:ring-primary; 95 | } 96 | 97 | select { 98 | @apply h-10 w-full rounded-md border border-input bg-background px-3 py-2 text-sm ring-offset-background placeholder:text-muted-foreground focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50; 99 | } 100 | 101 | option { 102 | @apply relative flex w-full cursor-default select-none items-center text-sm outline-none focus:bg-accent focus:text-accent-foreground disabled:pointer-events-none disabled:opacity-50; 103 | } 104 | -------------------------------------------------------------------------------- /Spark.UI/postcss.config.js: -------------------------------------------------------------------------------- 1 | module.exports = { 2 | plugins: { 3 | tailwindcss: {}, 4 | autoprefixer: {}, 5 | }, 6 | } 7 | -------------------------------------------------------------------------------- /Spark.UI/tailwind.config.js: -------------------------------------------------------------------------------- 1 | const { fontFamily } = require("tailwindcss/defaultTheme") 2 | 3 | module.exports = { 4 | darkMode: ["class"], 5 | content: ["**/*.razor", "**/*.cshtml", "**/*.html"], 6 | theme: { 7 | container: { 8 | center: true, 9 | padding: { 10 | DEFAULT: '1rem', 11 | sm: '2rem', 12 | lg: '4rem', 13 | xl: '5rem', 14 | '2xl': '6rem', 15 | }, 16 | screens: { 17 | "2xl": "1400px", 18 | }, 19 | }, 20 | extend: { 21 | colors: { 22 | border: "hsl(var(--border))", 23 | input: "hsl(var(--input))", 24 | ring: "hsl(var(--ring))", 25 | background: "hsl(var(--background))", 26 | foreground: "hsl(var(--foreground))", 27 | primary: { 28 | DEFAULT: "hsl(var(--primary))", 29 | foreground: "hsl(var(--primary-foreground))", 30 | }, 31 | secondary: { 32 | DEFAULT: "hsl(var(--secondary))", 33 | foreground: "hsl(var(--secondary-foreground))", 34 | }, 35 | destructive: { 36 | DEFAULT: "hsl(var(--destructive))", 37 | foreground: "hsl(var(--destructive-foreground))", 38 | }, 39 | muted: { 40 | DEFAULT: "hsl(var(--muted))", 41 | foreground: "hsl(var(--muted-foreground))", 42 | }, 43 | accent: { 44 | DEFAULT: "hsl(var(--accent))", 45 | foreground: "hsl(var(--accent-foreground))", 46 | }, 47 | popover: { 48 | DEFAULT: "hsl(var(--popover))", 49 | foreground: "hsl(var(--popover-foreground))", 50 | }, 51 | card: { 52 | DEFAULT: "hsl(var(--card))", 53 | foreground: "hsl(var(--card-foreground))", 54 | }, 55 | }, 56 | borderRadius: { 57 | lg: `var(--radius)`, 58 | md: `calc(var(--radius) - 2px)`, 59 | sm: "calc(var(--radius) - 4px)", 60 | }, 61 | fontFamily: { 62 | sans: ["var(--font-sans)", ...fontFamily.sans], 63 | }, 64 | keyframes: { 65 | "accordion-down": { 66 | from: { height: 0 }, 67 | to: { height: "var(--radix-accordion-content-height)" }, 68 | }, 69 | "accordion-up": { 70 | from: { height: "var(--radix-accordion-content-height)" }, 71 | to: { height: 0 }, 72 | }, 73 | }, 74 | animation: { 75 | "accordion-down": "accordion-down 0.2s ease-out", 76 | "accordion-up": "accordion-up 0.2s ease-out", 77 | }, 78 | }, 79 | }, 80 | plugins: [ 81 | require('@tailwindcss/forms') 82 | ], 83 | } --------------------------------------------------------------------------------