hipowered.dev/basecoat
1
0
Fork 0
mirror of https://github.com/hunvreus/basecoat.git synced 2026-11-11 04:38:18 +00:00
Code Issues Packages Projects Releases Wiki Activity

Adding spinner

Browse Source
This commit is contained in:
Ronan Berder
2025-11-03 13:51:40 +08:00
parent 0c16664e4b
commit e5aed697c8
11 changed files with 365 additions and 348 deletions
Download Patch File Download Diff File Expand all files Collapse all files
docs/src/_includes/macros/code_block.njk
+1 -1
View File
@@ -16,7 +16,7 @@
"
class="btn-icon-ghost size-8 absolute right-2.5 top-2 text-muted-foreground hover:text-foreground group"
>
{% lucide "clipboard", {"class": "group-[.copied]:hidden" } %}
{% lucide "copy", {"class": "group-[.copied]:hidden" } %}
{% lucide "check", {"class": "hidden group-[.copied]:block" } %}
</button>
</div>
docs/src/_includes/partials/sidebar.njk
+2
View File
@@ -111,11 +111,13 @@
{ label: "Label", url: "/components/label", attrs: link_attrs },
{ label: "Pagination", url: "/components/pagination", attrs: link_attrs },
{ label: "Popover", url: "/components/popover", attrs: link_attrs },
{ label: "Progress", url: "/components/progress", attrs: new_link_attrs },
{ label: "Radio Group", url: "/components/radio-group", attrs: link_attrs },
{ label: "Select", url: "/components/select", attrs: link_attrs },
{ label: "Sidebar", url: "/components/sidebar", attrs: link_attrs },
{ label: "Skeleton", url: "/components/skeleton", attrs: link_attrs },
{ label: "Slider", url: "/components/slider", attrs: link_attrs },
{ label: "Spinner", url: "/components/spinner", attrs: new_link_attrs },
{ label: "Switch", url: "/components/switch", attrs: link_attrs },
{ label: "Table", url: "/components/table", attrs: link_attrs },
{ label: "Tabs", url: "/components/tabs", attrs: link_attrs },
docs/src/assets/styles.css
+60 -263
View File
@@ -7,6 +7,7 @@
"Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
--font-mono: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono",
"Courier New", monospace;
--color-red-500: oklch(63.7% 0.237 25.331);
--color-amber-50: oklch(98.7% 0.022 95.277);
--color-amber-100: oklch(96.2% 0.059 95.617);
--color-amber-900: oklch(41.4% 0.112 45.904);
@@ -25,6 +26,7 @@
--color-blue-800: oklch(42.4% 0.199 265.638);
--color-blue-900: oklch(37.9% 0.146 265.522);
--color-blue-950: oklch(28.2% 0.091 267.935);
--color-purple-500: oklch(62.7% 0.265 303.9);
--color-neutral-300: oklch(87% 0 0);
--color-neutral-800: oklch(26.9% 0 0);
--color-black: #000;
@@ -257,9 +259,6 @@
.invisible {
visibility: hidden;
}
.visible {
visibility: visible;
}
.sr-only {
position: absolute;
width: 1px;
@@ -301,15 +300,9 @@
.top-22 {
top: calc(var(--spacing) * 22);
}
.right-1 {
right: calc(var(--spacing) * 1);
}
.right-1\.5 {
right: calc(var(--spacing) * 1.5);
}
.right-2 {
right: calc(var(--spacing) * 2);
}
.right-2\.5 {
right: calc(var(--spacing) * 2.5);
}
@@ -319,12 +312,6 @@
.bottom-0 {
bottom: calc(var(--spacing) * 0);
}
.bottom-2 {
bottom: calc(var(--spacing) * 2);
}
.bottom-3 {
bottom: calc(var(--spacing) * 3);
}
.left-1\.5 {
left: calc(var(--spacing) * 1.5);
}
@@ -439,6 +426,9 @@
.hidden {
display: none;
}
.inline {
display: inline;
}
.inline-block {
display: inline-block;
}
@@ -498,6 +488,12 @@
width: calc(var(--spacing) * 12);
height: calc(var(--spacing) * 12);
}
.h-1\.5 {
height: calc(var(--spacing) * 1.5);
}
.h-2 {
height: calc(var(--spacing) * 2);
}
.h-4 {
height: calc(var(--spacing) * 4);
}
@@ -516,8 +512,8 @@
.h-14 {
height: calc(var(--spacing) * 14);
}
.h-auto {
height: auto;
.h-full {
height: 100%;
}
.max-h-64 {
max-height: calc(var(--spacing) * 64);
@@ -534,33 +530,12 @@
.max-h-\[650px\] {
max-height: 650px;
}
.min-h-21 {
min-height: calc(var(--spacing) * 21);
}
.min-h-22 {
min-height: calc(var(--spacing) * 22);
}
.min-h-24 {
min-height: calc(var(--spacing) * 24);
}
.min-h-25 {
min-height: calc(var(--spacing) * 25);
}
.min-h-26 {
min-height: calc(var(--spacing) * 26);
}
.min-h-27 {
min-height: calc(var(--spacing) * 27);
}
.min-h-28 {
min-height: calc(var(--spacing) * 28);
}
.min-h-30 {
min-height: calc(var(--spacing) * 30);
}
.min-h-32 {
min-height: calc(var(--spacing) * 32);
}
.min-h-77 {
min-height: calc(var(--spacing) * 77);
}
@@ -582,6 +557,15 @@
.w-4 {
width: calc(var(--spacing) * 4);
}
.w-7 {
width: calc(var(--spacing) * 7);
}
.w-7\.5 {
width: calc(var(--spacing) * 7.5);
}
.w-8 {
width: calc(var(--spacing) * 8);
}
.w-10 {
width: calc(var(--spacing) * 10);
}
@@ -618,12 +602,6 @@
.w-max {
width: max-content;
}
.max-w-23 {
max-width: calc(var(--spacing) * 23);
}
.max-w-24 {
max-width: calc(var(--spacing) * 24);
}
.max-w-72 {
max-width: calc(var(--spacing) * 72);
}
@@ -657,6 +635,9 @@
.max-w-xl {
max-width: var(--container-xl);
}
.max-w-xs {
max-width: var(--container-xs);
}
.min-w-0 {
min-width: calc(var(--spacing) * 0);
}
@@ -855,14 +836,14 @@
.self-start {
align-self: flex-start;
}
.self-stretch {
align-self: stretch;
}
.truncate {
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
.overflow-hidden {
overflow: hidden;
}
.overflow-x-auto {
overflow-x: auto;
}
@@ -875,9 +856,6 @@
.rounded-\[2px\] {
border-radius: 2px;
}
.rounded-\[calc\(var\(--radius\)-5px\)\] {
border-radius: calc(var(--radius) - 5px);
}
.rounded-full {
border-radius: calc(infinity * 1px);
}
@@ -948,18 +926,9 @@
border-color: color-mix(in oklab, var(--color-border) 50%, transparent);
}
}
.border-input {
border-color: var(--color-input);
}
.border-muted {
border-color: var(--color-muted);
}
.border-muted-foreground\/20 {
border-color: var(--color-muted-foreground);
@supports (color: color-mix(in lab, red, red)) {
border-color: color-mix(in oklab, var(--color-muted-foreground) 20%, transparent);
}
}
.border-transparent {
border-color: transparent;
}
@@ -999,6 +968,15 @@
.bg-primary {
background-color: var(--color-primary);
}
.bg-primary\/20 {
background-color: var(--color-primary);
@supports (color: color-mix(in lab, red, red)) {
background-color: color-mix(in oklab, var(--color-primary) 20%, transparent);
}
}
.bg-secondary {
background-color: var(--color-secondary);
}
.bg-sidebar-primary {
background-color: var(--color-sidebar-primary);
}
@@ -1026,6 +1004,9 @@
.p-4 {
padding: calc(var(--spacing) * 4);
}
.p-5 {
padding: calc(var(--spacing) * 5);
}
.p-6 {
padding: calc(var(--spacing) * 6);
}
@@ -1068,9 +1049,6 @@
.py-4 {
padding-block: calc(var(--spacing) * 4);
}
.py-15 {
padding-block: calc(var(--spacing) * 15);
}
.py-\[0\.2rem\] {
padding-block: 0.2rem;
}
@@ -1080,18 +1058,6 @@
.pt-2 {
padding-top: calc(var(--spacing) * 2);
}
.pt-3 {
padding-top: calc(var(--spacing) * 3);
}
.pt-10 {
padding-top: calc(var(--spacing) * 10);
}
.pt-12 {
padding-top: calc(var(--spacing) * 12);
}
.pt-14 {
padding-top: calc(var(--spacing) * 14);
}
.pt-15 {
padding-top: calc(var(--spacing) * 15);
}
@@ -1113,48 +1079,24 @@
.pr-20 {
padding-right: calc(var(--spacing) * 20);
}
.pr-22 {
padding-right: calc(var(--spacing) * 22);
}
.pr-24 {
padding-right: calc(var(--spacing) * 24);
}
.pr-26 {
padding-right: calc(var(--spacing) * 26);
}
.pr-28 {
padding-right: calc(var(--spacing) * 28);
}
.pr-30 {
padding-right: calc(var(--spacing) * 30);
}
.pr-32 {
padding-right: calc(var(--spacing) * 32);
}
.pr-129 {
padding-right: calc(var(--spacing) * 129);
}
.pb-3 {
padding-bottom: calc(var(--spacing) * 3);
}
.pb-4 {
padding-bottom: calc(var(--spacing) * 4);
}
.pb-10 {
padding-bottom: calc(var(--spacing) * 10);
}
.pb-10\.5 {
padding-bottom: calc(var(--spacing) * 10.5);
}
.pb-11 {
padding-bottom: calc(var(--spacing) * 11);
}
.pb-12 {
padding-bottom: calc(var(--spacing) * 12);
}
.pb-14 {
padding-bottom: calc(var(--spacing) * 14);
}
.pb-17 {
padding-bottom: calc(var(--spacing) * 17);
}
@@ -1173,27 +1115,9 @@
.pl-9 {
padding-left: calc(var(--spacing) * 9);
}
.pl-10 {
padding-left: calc(var(--spacing) * 10);
}
.pl-12 {
padding-left: calc(var(--spacing) * 12);
}
.pl-14 {
padding-left: calc(var(--spacing) * 14);
}
.pl-15 {
padding-left: calc(var(--spacing) * 15);
}
.pl-16 {
padding-left: calc(var(--spacing) * 16);
}
.pl-19 {
padding-left: calc(var(--spacing) * 19);
}
.pl-20 {
padding-left: calc(var(--spacing) * 20);
}
.pl-21 {
padding-left: calc(var(--spacing) * 21);
}
@@ -1295,6 +1219,9 @@
.text-amber-900 {
color: var(--color-amber-900);
}
.text-blue-500 {
color: var(--color-blue-500);
}
.text-destructive {
color: var(--color-destructive);
}
@@ -1313,9 +1240,18 @@
.text-primary-foreground {
color: var(--color-primary-foreground);
}
.text-purple-500 {
color: var(--color-purple-500);
}
.text-red-500 {
color: var(--color-red-500);
}
.text-sidebar-primary-foreground {
color: var(--color-sidebar-primary-foreground);
}
.text-yellow-500 {
color: var(--color-yellow-500);
}
.uppercase {
text-transform: uppercase;
}
@@ -1357,10 +1293,6 @@
--tw-shadow: 0 1px 2px 0 var(--tw-shadow-color, rgb(0 0 0 / 0.05));
box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
}
.ring {
--tw-ring-shadow: var(--tw-ring-inset,) 0 0 0 calc(1px + var(--tw-ring-offset-width)) var(--tw-ring-color, currentcolor);
box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
}
.ring-offset-background {
--tw-ring-offset-color: var(--color-background);
}
@@ -1436,19 +1368,14 @@
visibility: visible;
}
}
.group-data-\[disabled\=true\]\:pointer-events-none {
&:is(:where(.group)[data-disabled="true"] *) {
pointer-events: none;
.group-data-\[copied\=true\]\:block {
&:is(:where(.group)[data-copied="true"] *) {
display: block;
}
}
.group-data-\[disabled\=true\]\:opacity-50 {
&:is(:where(.group)[data-disabled="true"] *) {
opacity: 50%;
}
}
.group-data-\[disabled\=true\]\/field\:opacity-50 {
&:is(:where(.group\/field)[data-disabled="true"] *) {
opacity: 50%;
.group-data-\[copied\=true\]\:hidden {
&:is(:where(.group)[data-copied="true"] *) {
display: none;
}
}
.group-\[\.copied\]\:block {
@@ -1466,16 +1393,6 @@
border-color: var(--color-primary);
}
}
.peer-disabled\:cursor-not-allowed {
&:is(:where(.peer):disabled ~ *) {
cursor: not-allowed;
}
}
.peer-disabled\:opacity-50 {
&:is(:where(.peer):disabled ~ *) {
opacity: 50%;
}
}
.last\:border-b-0 {
&:last-child {
border-bottom-style: var(--tw-border-style);
@@ -1534,13 +1451,6 @@
}
}
}
.hover\:bg-accent {
&:hover {
@media (hover: hover) {
background-color: var(--color-accent);
}
}
}
.hover\:bg-accent\/50 {
&:hover {
@media (hover: hover) {
@@ -1656,46 +1566,16 @@
pointer-events: none;
}
}
.disabled\:border {
&:disabled {
border-style: var(--tw-border-style);
border-width: 1px;
}
}
.disabled\:opacity-50 {
&:disabled {
opacity: 50%;
}
}
.has-data-\[state\=checked\]\:border-primary {
&:has(*[data-state="checked"]) {
border-color: var(--color-primary);
}
}
.has-data-\[state\=checked\]\:bg-primary\/5 {
&:has(*[data-state="checked"]) {
background-color: var(--color-primary);
@supports (color: color-mix(in lab, red, red)) {
background-color: color-mix(in oklab, var(--color-primary) 5%, transparent);
}
}
}
.has-\[\:checkd\]\:border {
&:has(*:is(:checkd)) {
border-style: var(--tw-border-style);
border-width: 1px;
}
}
.has-\[\:checked\]\:border-primary {
&:has(*:is(:checked)) {
border-color: var(--color-primary);
}
}
.has-\[\:checked\]\:bg-muted {
&:has(*:is(:checked)) {
background-color: var(--color-muted);
}
}
.has-\[\:checked\]\:bg-primary\/5 {
&:has(*:is(:checked)) {
background-color: var(--color-primary);
@@ -1704,12 +1584,6 @@
}
}
}
.has-\[input\:checkd\]\:border {
&:has(*:is(input:checkd)) {
border-style: var(--tw-border-style);
border-width: 1px;
}
}
.has-\[input\[type\=\'checkbox\'\]\:checked\]\:border-blue-600 {
&:has(*:is(input[type='checkbox']:checked)) {
border-color: var(--color-blue-600);
@@ -1730,32 +1604,6 @@
background-color: var(--color-green-50);
}
}
.has-\[\>\[data-slot\=field\]\]\:w-full {
&:has(>[data-slot=field]) {
width: 100%;
}
}
.has-\[\>\[data-slot\=field\]\]\:flex-col {
&:has(>[data-slot=field]) {
flex-direction: column;
}
}
.has-\[\>\[data-slot\=field\]\]\:rounded-md {
&:has(>[data-slot=field]) {
border-radius: var(--radius-md);
}
}
.has-\[\>\[data-slot\=field\]\]\:border {
&:has(>[data-slot=field]) {
border-style: var(--tw-border-style);
border-width: 1px;
}
}
.has-\[\>svg\]\:px-2 {
&:has(>svg) {
padding-inline: calc(var(--spacing) * 2);
}
}
.has-\[\>svg\]\:px-2\.5 {
&:has(>svg) {
padding-inline: calc(var(--spacing) * 2.5);
@@ -1779,21 +1627,11 @@
background-color: transparent;
}
}
.aria-pressed\:text-blue-500 {
&[aria-pressed="true"] {
color: var(--color-blue-500);
}
}
.aria-pressed\:text-blue-600 {
&[aria-pressed="true"] {
color: var(--color-blue-600);
}
}
.aria-pressed\:text-yellow-500 {
&[aria-pressed="true"] {
color: var(--color-yellow-500);
}
}
.aria-pressed\:hover\:bg-accent {
&[aria-pressed="true"] {
&:hover {
@@ -1985,18 +1823,6 @@
}
}
}
.dark\:hover\:bg-accent\/50 {
&:is(.dark *) {
&:hover {
@media (hover: hover) {
background-color: var(--color-accent);
@supports (color: color-mix(in lab, red, red)) {
background-color: color-mix(in oklab, var(--color-accent) 50%, transparent);
}
}
}
}
}
.dark\:hover\:bg-destructive\/20 {
&:is(.dark *) {
&:hover {
@@ -2019,16 +1845,6 @@
}
}
}
.dark\:has-data-\[state\=checked\]\:bg-primary\/10 {
&:is(.dark *) {
&:has(*[data-state="checked"]) {
background-color: var(--color-primary);
@supports (color: color-mix(in lab, red, red)) {
background-color: color-mix(in oklab, var(--color-primary) 10%, transparent);
}
}
}
}
.dark\:has-\[\:checked\]\:bg-primary\/10 {
&:is(.dark *) {
&:has(*:is(:checked)) {
@@ -2330,19 +2146,6 @@
}
}
}
.\[disabled\]\:border {
&:is(disabled) {
border-style: var(--tw-border-style);
border-width: 1px;
}
}
.\[\&\>\*\]\:data-\[slot\=field\]\:p-4 {
&>* {
&[data-slot="field"] {
padding: calc(var(--spacing) * 4);
}
}
}
.\[\&\>a\]\:underline {
&>a {
text-decoration-line: underline;
@@ -2388,12 +2191,6 @@
}
}
}
.\[\&\>svg\:not\(\[class\*\=\'size-\'\]\)\]\:size-3\.5 {
&>svg:not([class*='size-']) {
width: calc(var(--spacing) * 3.5);
height: calc(var(--spacing) * 3.5);
}
}
}
:root {
--radius: 0.625rem;
@@ -2597,7 +2394,7 @@
justify-content: center;
gap: calc(var(--spacing) * 1);
overflow: hidden;
border-radius: var(--radius-md);
border-radius: calc(infinity * 1px);
border-style: var(--tw-border-style);
border-width: 1px;
padding-inline: calc(var(--spacing) * 2);
@@ -3909,7 +3706,7 @@
}
}
@layer components {
kbd {
.kbd {
pointer-events: none;
display: inline-flex;
height: calc(var(--spacing) * 5);
docs/src/components/command.njk
+2 -2
View File
@@ -225,7 +225,7 @@ toc:
<h3 id="example-dialog"><a href="#example-dialog">Dialog</a></h3>
<section class="prose">
<p>You can use some simple JavaScript to open the command menu with a keyboard shortcut (in this case <kbd>⌘J</kbd>).</p>
<p>You can use some simple JavaScript to open the command menu with a keyboard shortcut (in this case <kbd class="kbd">⌘J</kbd>).</p>
</section>
{% set code_dialog %}
@@ -235,7 +235,7 @@ toc:
onclick="document.getElementById('demo-command-dialog').showModal()"
>
Open command menu
<kbd>⌘J</kbd>
<kbd class="kbd">⌘J</kbd>
</button>
{% call command_dialog(id="demo-command-dialog") %}
docs/src/components/empty.njk
+3 -55
View File
@@ -5,9 +5,6 @@ description: Display empty states with icons, titles, descriptions, and actions.
toc:
- label: Usage
id: usage
children:
- label: HTML structure
id: html-structure
- label: Examples
id: examples
children:
@@ -58,57 +55,8 @@ toc:
<h2 id="usage"><a href="#usage">Usage</a></h2>
<section class="prose">
<p>The example simply uses Tailwind utility classes to create an empty state layout.</p>
</section>
{{ code_block(code_default) }}
<h3 id="html-structure"><a href="#html-structure">HTML structure</a></h3>
<section class="prose">
<dl>
<dt><code class="highlight language-html">&lt;div&gt;</code></dt>
<dd>Main container with centered layout utilities:
<ul>
<li><code>flex flex-col items-center justify-center</code>: centers content</li>
<li><code>gap-6</code>: spacing between sections</li>
<li><code>p-6 md:p-12</code>: responsive padding</li>
<li><code>text-center text-balance</code>: centered text with better wrapping</li>
</ul>
<dl>
<dt><code class="highlight language-html">&lt;header&gt;</code></dt>
<dd>Header section containing the icon/avatar, title, and description:
<ul>
<li><code>max-w-sm</code>: constrains width for readability</li>
<li><code>gap-2</code> or <code>gap-3</code>: spacing between elements</li>
</ul>
<dl>
<dt><code class="highlight language-html">&lt;div&gt;</code> <span class="badge-secondary">Optional</span></dt>
<dd>Media container for icon or avatar:
<ul>
<li>For icons: <code>bg-muted text-foreground size-10 rounded-lg</code></li>
<li>For avatars: <code>size-12 rounded-full grayscale</code></li>
<li>For avatar groups: <code>flex -space-x-2</code> with ring utilities</li>
</ul>
</dd>
<dt><code class="highlight language-html">&lt;h3&gt;</code></dt>
<dd>Title with <code>text-lg font-medium tracking-tight</code></dd>
<dt><code class="highlight language-html">&lt;p&gt;</code></dt>
<dd>Description with <code>text-muted-foreground text-sm/relaxed</code></dd>
</dl>
</dd>
<dt><code class="highlight language-html">&lt;section&gt;</code> <span class="badge-secondary">Optional</span></dt>
<dd>Content area for actions (buttons, inputs, etc.):
<ul>
<li><code>max-w-sm</code> or <code>max-w-md</code>: constrains width</li>
<li><code>flex flex-col items-center gap-3</code>: vertical layout with spacing</li>
</ul>
</dd>
<dt><code class="highlight language-html">&lt;a&gt;</code> or other elements <span class="badge-secondary">Optional</span></dt>
<dd>Additional links or actions outside the main content section</dd>
</dl>
</dd>
</dl>
<p>Empty states are pure HTML composition using Tailwind utility classes. Use flex layout utilities to center content, and compose with semantic elements like <code>&lt;header&gt;</code>, <code>&lt;h3&gt;</code>, <code>&lt;p&gt;</code>, and <code>&lt;button&gt;</code>.</p>
<p>Browse the examples below and copy the pattern that fits your needs.</p>
</section>
<h2 id="examples"><a href="#examples">Examples</a></h2>
@@ -186,7 +134,7 @@ toc:
<h3 id="example-input-group"><a href="#example-input-group">Input Group</a></h3>
{% set code_input_group %}
<div class="flex min-w-0 flex-1 flex-col items-center justify-center gap-6 rounded-lg border-dashed p-6 text-center text-balance md:p-12 text-neutral-800 dark:text-neutral-300">
<div class="flex min-w-0 flex-1 flex-col items-center justify-center gap-6 rounded-lg p-6 text-center text-balance md:p-12 text-neutral-800 dark:text-neutral-300">
<header class="flex max-w-sm flex-col items-center gap-3 text-center">
<h3 class="text-lg font-semibold tracking-tight">404 - Not Found</h3>
<p class="text-muted-foreground text-sm/relaxed">
docs/src/components/input-group.njk
+20 -9
View File
@@ -173,8 +173,19 @@ toc:
<div class="grid gap-6">
<div class="relative">
<input type="text" readonly class="input pr-9" value="https://x.com/hunvreus">
<button class="absolute right-1.5 top-1/2 -translate-y-1/2 btn-icon-ghost text-muted-foreground hover:text-accent-foreground size-6">{% lucide "copy" %}</button>
<button
data-copied="false"
onclick="
this.dataset.copied = 'true';
setTimeout(() => this.dataset.copied = 'false', 2000);
"
class="group absolute right-1.5 top-1/2 -translate-y-1/2 btn-icon-ghost text-muted-foreground hover:text-accent-foreground size-6"
>
{% lucide "copy", { "class": "group-data-[copied=true]:hidden" } %}
{% lucide "check", { "class": "hidden group-data-[copied=true]:block" } %}
</button>
</div>
<div class="relative">
<input type="text" class="input pl-21 pr-9 rounded-full">
@@ -264,15 +275,15 @@ toc:
<div class="grid gap-6">
<div class="relative">
<input type="text" class="input pr-9" placeholder="Searching..." disabled>
<div class="absolute right-3 top-1/2 -translate-y-1/2 pointer-events-none text-muted-foreground [&>svg]:size-4 animate-spin opacity-50">
{% lucide "loader-circle" %}
<div class="absolute right-3 top-1/2 -translate-y-1/2 pointer-events-none text-muted-foreground [&>svg]:size-4 opacity-50">
{% lucide "loader-circle", { "class": "animate-spin" } %}
</div>
</div>
<div class="relative">
<input type="text" class="input pl-9" placeholder="Processing..." disabled>
<div class="absolute left-3 top-1/2 -translate-y-1/2 pointer-events-none text-muted-foreground [&>svg]:size-4 animate-spin opacity-50">
{% lucide "loader-circle" %}
<div class="absolute left-3 top-1/2 -translate-y-1/2 pointer-events-none text-muted-foreground [&>svg]:size-4 opacity-50">
{% lucide "loader-circle", { "class": "animate-spin" } %}
</div>
</div>
@@ -280,16 +291,16 @@ toc:
<input type="text" class="input pr-24" placeholder="Saving changes..." disabled>
<div class="absolute right-3 top-1/2 -translate-y-1/2 flex items-center gap-2 text-sm text-muted-foreground opacity-50">
<div>Saving...</div>
<div class="[&>svg]:size-4 animate-spin">
{% lucide "loader-circle" %}
<div class="[&>svg]:size-4">
{% lucide "loader-circle", { "class": "animate-spin" } %}
</div>
</div>
</div>
<div class="relative">
<input type="text" class="input pl-9 pr-26" placeholder="Refreshing data..." disabled>
<div class="absolute left-3 top-1/2 -translate-y-1/2 pointer-events-none text-muted-foreground [&>svg]:size-4 animate-spin opacity-50">
{% lucide "loader" %}
<div class="absolute left-3 top-1/2 -translate-y-1/2 pointer-events-none text-muted-foreground [&>svg]:size-4 opacity-50">
{% lucide "loader-circle", { "class": "animate-spin" } %}
</div>
<div class="absolute right-3 top-1/2 -translate-y-1/2 flex items-center gap-2 text-sm text-muted-foreground opacity-50">
Please wait...
docs/src/components/item.njk
+4 -4
View File
@@ -45,7 +45,7 @@ toc:
</article>
<a href="#" class="group/item flex items-center border text-sm rounded-md transition-colors [a]:hover:bg-accent/50 [a]:transition-colors duration-100 flex-wrap outline-none focus-visible:border-ring focus-visible:ring-ring/50 focus-visible:ring-[3px] border-border py-3 px-4 gap-2.5">
<div class="flex shrink-0 items-center justify-center gap-2 group-has-[[data-slot=item-description]]/item:self-start [&_svg]:pointer-events-none group-has-[[data-slot=item-description]]/item:translate-y-0.5 bg-transparent [&_svg]:size-5">
<div class="flex shrink-0 items-center justify-center gap-2 [&_svg]:pointer-events-none bg-transparent [&_svg]:size-5">
{% lucide "badge-check" %}
</div>
<div class="flex flex-1 flex-col gap-1">
@@ -174,7 +174,7 @@ toc:
</div>
<div class="flex flex-col gap-1 flex-none text-center">
<p data-slot="item-description" class="text-muted-foreground line-clamp-2 text-sm leading-normal font-normal text-balance [&>a:hover]:text-primary [&>a]:underline [&>a]:underline-offset-4">3:45</p>
<p class="text-muted-foreground line-clamp-2 text-sm leading-normal font-normal text-balance [&>a:hover]:text-primary [&>a]:underline [&>a]:underline-offset-4">3:45</p>
</div>
</a>
@@ -187,7 +187,7 @@ toc:
</div>
<div class="flex flex-col gap-1 flex-none text-center">
<p data-slot="item-description" class="text-muted-foreground line-clamp-2 text-sm leading-normal font-normal text-balance [&>a:hover]:text-primary [&>a]:underline [&>a]:underline-offset-4">4:05</p>
<p class="text-muted-foreground line-clamp-2 text-sm leading-normal font-normal text-balance [&>a:hover]:text-primary [&>a]:underline [&>a]:underline-offset-4">4:05</p>
</div>
</a>
@@ -200,7 +200,7 @@ toc:
</div>
<div class="flex flex-col gap-1 flex-none text-center">
<p data-slot="item-description" class="text-muted-foreground line-clamp-2 text-sm leading-normal font-normal text-balance [&>a:hover]:text-primary [&>a]:underline [&>a]:underline-offset-4">3:30</p>
<p class="text-muted-foreground line-clamp-2 text-sm leading-normal font-normal text-balance [&>a:hover]:text-primary [&>a]:underline [&>a]:underline-offset-4">3:30</p>
</div>
</a>
</div>
docs/src/components/kbd.njk
+12 -12
View File
@@ -20,15 +20,15 @@ toc:
{% set code_html %}
<div class="flex flex-col items-center gap-4">
<span class="inline-flex items-center gap-1">
<kbd>⌘</kbd>
<kbd>⇧</kbd>
<kbd>⌥</kbd>
<kbd>⌃</kbd>
<kbd class="kbd">⌘</kbd>
<kbd class="kbd">⇧</kbd>
<kbd class="kbd">⌥</kbd>
<kbd class="kbd">⌃</kbd>
</span>
<span class="inline-flex items-center gap-1">
<kbd>Ctrl</kbd>
<kbd class="kbd">Ctrl</kbd>
<span>+</span>
<kbd>B</kbd>
<kbd class="kbd">B</kbd>
</span>
</div>
{% endset %}
@@ -38,11 +38,11 @@ toc:
<h2 id="usage"><a href="#usage">Usage</a></h2>
<section class="prose">
<p>Simply use the <code>&lt;kbd&gt;</code> element:</p>
<p>Use the <code>&lt;kbd&gt;</code> element with the <code>kbd</code> class:</p>
</section>
{% set code_simple %}
<kbd>⌘K</kbd>
<kbd class="kbd">⌘K</kbd>
{% endset %}
{{ code_block(code_simple | prettyHtml, "html") }}
@@ -55,8 +55,8 @@ toc:
<p class="text-muted-foreground text-sm">
Use
<span class="inline-flex items-center gap-1">
<kbd>Ctrl + B</kbd>
<kbd>Ctrl + K</kbd>
<kbd class="kbd">Ctrl + B</kbd>
<kbd class="kbd">Ctrl + K</kbd>
</span>
to open the command palette
</p>
@@ -68,8 +68,8 @@ toc:
{% set button_html %}
<div class="flex flex-wrap items-center gap-x-4">
<button class="btn-sm-outline pr-2">Accept <kbd>⏎</kbd></button>
<button class="btn-sm-outline pr-2">Cancel <kbd>Esc</kbd></button>
<button class="btn-sm-outline pr-2">Accept <kbd class="kbd">⏎</kbd></button>
<button class="btn-sm-outline pr-2">Cancel <kbd class="kbd">Esc</kbd></button>
</div>
{% endset %}
docs/src/components/progress.njk
+44
View File
@@ -0,0 +1,44 @@
---
layout: layouts/page.njk
title: Progress
description: Displays an indicator showing the completion progress of a task, typically displayed as a progress bar.
toc:
- label: Usage
id: usage
---
{% from "macros/code_preview.njk" import code_preview %}
{% from "macros/code_block.njk" import code_block %}
<div class="alert mb-6">
{% lucide "circle-alert" %}
<h2>There is no dedicated Progress component in Basecoat.</h2>
</div>
{% set code_default %}
<div class="bg-primary/20 relative h-2 w-full overflow-hidden rounded-full">
<div id="demo-progress" class="bg-primary h-full w-full flex-1 transition-all" style="width: 17%"></div>
</div>
<script>
setTimeout(() => {
document.getElementById('demo-progress').style.width = '66%';
}, 500);
</script>
{% endset %}
{{ code_preview("progress-default", code_default, class="w-full max-w-sm") }}
<h2 id="usage"><a href="#usage">Usage</a></h2>
<section class="prose">
<p>Progress bars are pure HTML composition using Tailwind utility classes. Use a container div for the track and an inner div for the indicator. Set the indicator's width with inline styles or via JavaScript.</p>
</section>
{% set code_usage %}
<div class="bg-primary/20 relative h-2 w-full overflow-hidden rounded-full">
<div class="bg-primary h-full w-full flex-1 transition-all" style="width: 66%"></div>
</div>
{% endset %}
{{ code_block(code_usage) }}
docs/src/components/spinner.njk
+215
View File
@@ -0,0 +1,215 @@
---
layout: layouts/page.njk
title: Spinner
description: An indicator that can be used to show a loading state.
toc:
- label: Usage
id: usage
- label: Examples
id: examples
children:
- label: Size
id: example-size
- label: Color
id: example-color
- label: Button
id: example-button
- label: Badge
id: example-badge
- label: Input Group
id: example-input-group
- label: Empty
id: example-empty
- label: Item
id: example-item
---
{% from "macros/code_preview.njk" import code_preview %}
{% from "macros/code_block.njk" import code_block %}
<div class="alert mb-6">
{% lucide "circle-alert" %}
<h2>There is no dedicated Spinner component in Basecoat.</h2>
</div>
{% set code_default %}
<article class="group/item flex items-center border text-sm rounded-md transition-colors flex-wrap outline-none focus-visible:border-ring focus-visible:ring-ring/50 focus-visible:ring-[3px] border-transparent bg-muted/50 p-4 gap-4">
<div class="flex shrink-0 items-center justify-center [&_svg]:pointer-events-none [&_svg]:size-4">
{% lucide "loader-circle", { "role": "status", "aria-label": "Loading", "class": "animate-spin" } %}
</div>
<div class="flex flex-1 flex-col gap-1">
<h3 class="flex w-fit items-center gap-2 text-sm leading-snug font-medium line-clamp-1">Processing payment...</h3>
</div>
<div class="flex flex-col gap-1 flex-none text-center">
<p class="text-muted-foreground line-clamp-2 text-sm leading-normal font-normal text-balance [&>a:hover]:text-primary [&>a]:underline [&>a]:underline-offset-4">$100.00</p>
</div>
</article>
{% endset %}
{{ code_preview("spinner-default", code_default, class="w-full max-w-xs") }}
<h2 id="usage"><a href="#usage">Usage</a></h2>
<section class="prose">
<p>Spinners are pure HTML using the <code>loader-circle</code> Lucide icon with the <code>animate-spin</code> Tailwind utility. Add <code>role="status"</code> and <code>aria-label="Loading"</code> for accessibility.</p>
<p>Browse the examples below and copy the pattern that fits your needs.</p>
</section>
<h2 id="examples"><a href="#examples">Examples</a></h2>
<h3 id="example-size"><a href="#example-size">Size</a></h3>
<section class="prose">
<p>Use the <code>size-*</code> utility class to change the size of the spinner.</p>
</section>
{% set code_size %}
<div class="flex items-center gap-6">
{% lucide "loader-circle", { "role": "status", "aria-label": "Loading", "class": "size-3 animate-spin" } %}
{% lucide "loader-circle", { "role": "status", "aria-label": "Loading", "class": "size-4 animate-spin" } %}
{% lucide "loader-circle", { "role": "status", "aria-label": "Loading", "class": "size-6 animate-spin" } %}
{% lucide "loader-circle", { "role": "status", "aria-label": "Loading", "class": "size-8 animate-spin" } %}
</div>
{% endset %}
{{ code_preview("spinner-size", code_size) }}
<h3 id="example-color"><a href="#example-color">Color</a></h3>
<section class="prose">
<p>Use the <code>text-*</code> utility class to change the color of the spinner.</p>
</section>
{% set code_color %}
<div class="flex items-center gap-6">
{% lucide "loader-circle", { "role": "status", "aria-label": "Loading", "class": "size-6 animate-spin text-red-500" } %}
{% lucide "loader-circle", { "role": "status", "aria-label": "Loading", "class": "size-6 animate-spin text-green-500" } %}
{% lucide "loader-circle", { "role": "status", "aria-label": "Loading", "class": "size-6 animate-spin text-blue-500" } %}
{% lucide "loader-circle", { "role": "status", "aria-label": "Loading", "class": "size-6 animate-spin text-yellow-500" } %}
{% lucide "loader-circle", { "role": "status", "aria-label": "Loading", "class": "size-6 animate-spin text-purple-500" } %}
</div>
{% endset %}
{{ code_preview("spinner-color", code_color) }}
<h3 id="example-button"><a href="#example-button">Button</a></h3>
<section class="prose">
<p>Add a spinner to a button to indicate a loading state.</p>
</section>
{% set code_button %}
<div class="flex flex-col items-center gap-4">
<button class="btn-sm" disabled>
{% lucide "loader-circle", { "role": "status", "aria-label": "Loading", "class": "animate-spin" } %}
Loading...
</button>
<button class="btn-sm-outline" disabled>
{% lucide "loader-circle", { "role": "status", "aria-label": "Loading", "class": "animate-spin" } %}
Please wait
</button>
<button class="btn-sm-secondary" disabled>
{% lucide "loader-circle", { "role": "status", "aria-label": "Loading", "class": "animate-spin" } %}
Processing
</button>
</div>
{% endset %}
{{ code_preview("spinner-button", code_button) }}
<h3 id="example-badge"><a href="#example-badge">Badge</a></h3>
{% set code_badge %}
<div class="flex items-center gap-4">
<span class="badge">
{% lucide "loader-circle", { "role": "status", "aria-label": "Loading", "class": "animate-spin" } %}
Syncing
</span>
<span class="badge-secondary">
{% lucide "loader-circle", { "role": "status", "aria-label": "Loading", "class": "animate-spin" } %}
Updating
</span>
<span class="badge-outline">
{% lucide "loader-circle", { "role": "status", "aria-label": "Loading", "class": "animate-spin" } %}
Processing
</span>
</div>
{% endset %}
{{ code_preview("spinner-badge", code_badge) }}
<h3 id="example-input-group"><a href="#example-input-group">Input Group</a></h3>
<section class="prose">
<p>Input groups can have spinners positioned inside them.</p>
</section>
{% set code_input_group %}
<div class="flex w-full max-w-md flex-col gap-4">
<div class="relative">
<input type="text" class="input pr-9" placeholder="Send a message..." disabled>
<div class="absolute right-3 top-1/2 -translate-y-1/2 pointer-events-none text-muted-foreground [&>svg]:size-4">
{% lucide "loader-circle", { "role": "status", "aria-label": "Loading", "class": "animate-spin" } %}
</div>
</div>
<div class="relative">
<textarea class="textarea pr-10 min-h-27 pb-12" placeholder="Send a message..." disabled></textarea>
<footer role="group" class="absolute bottom-0 px-3 pb-3 pt-1.5 flex items-center w-full gap-2">
{% lucide "loader-circle", { "role": "status", "aria-label": "Loading", "class": "size-4 animate-spin text-muted-foreground" } %}
<span class="text-sm text-muted-foreground">Validating...</span>
<button type="button" class="btn-sm-icon h-6 w-7.5 ml-auto rounded">
{% lucide "arrow-up" %}
</button>
</footer>
</div>
</div>
{% endset %}
{{ code_preview("spinner-input-group", code_input_group, class="w-full max-w-md") }}
<h3 id="example-empty"><a href="#example-empty">Empty</a></h3>
<section class="prose">
<p>Use a spinner in empty states to indicate a loading or processing state.</p>
</section>
{% set code_empty %}
<div class="flex min-w-0 flex-1 flex-col items-center justify-center gap-6 rounded-lg p-6 text-center text-balance md:p-12 text-neutral-800 dark:text-neutral-300">
<header class="flex max-w-sm flex-col items-center gap-3 text-center">
<div class="mb-2 bg-muted text-foreground flex size-10 shrink-0 items-center justify-center rounded-lg [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-6">
{% lucide "loader-circle", { "role": "status", "aria-label": "Loading", "class": "animate-spin size-4" } %}
</div>
<h3 class="text-lg font-semibold tracking-tight">Processing your request</h3>
<p class="text-muted-foreground text-sm/relaxed">Please wait while we process your request. Do not refresh the page.</p>
</header>
<section class="flex w-full max-w-sm min-w-0 flex-col items-center gap-3">
<button class="btn-sm-outline">Cancel</button>
</section>
</div>
{% endset %}
{{ code_preview("spinner-empty", code_empty) }}
<h3 id="example-item"><a href="#example-item">Item</a></h3>
{% set code_item %}
<article class="group/item flex items-center border text-sm rounded-md transition-colors [a]:hover:bg-accent/50 [a]:transition-colors duration-100 flex-wrap outline-none focus-visible:border-ring focus-visible:ring-ring/50 focus-visible:ring-[3px] border-border p-4 gap-4">
<div class="flex shrink-0 items-center justify-center gap-2 self-start [&_svg]:pointer-events-none size-8 border rounded-md bg-muted [&_svg:not([class*='size-'])]:size-4">
{% lucide "loader-circle", { "role": "status", "aria-label": "Loading", "class": "animate-spin size-4 text-muted-foreground" } %}
</div>
<div class="flex flex-1 flex-col gap-1">
<h3 class="flex w-fit items-center gap-2 text-sm leading-snug font-medium">Downloading...</h3>
<p class="text-muted-foreground line-clamp-2 text-sm leading-normal font-normal text-balance [&>a:hover]:text-primary [&>a]:underline [&>a]:underline-offset-4">129 MB / 1000 MB</p>
</div>
<button class="btn-sm-outline self-start">Cancel</button>
<footer class="w-full">
<div class="bg-primary/20 relative h-2 w-full overflow-hidden rounded-full">
<div id="demo-progress" class="bg-primary h-full w-full flex-1 transition-all" style="width: 13%"></div>
</div>
</footer>
</article>
{% endset %}
{{ code_preview("spinner-item", code_item, class="w-full max-w-md") }}
src/css/basecoat.css
+2 -2
View File
@@ -184,7 +184,7 @@
.badge-secondary,
.badge-destructive,
.badge-outline {
@apply inline-flex items-center justify-center rounded-md border px-2 py-0.5 text-xs font-medium w-fit whitespace-nowrap shrink-0 [&>svg]:size-3 gap-1 [&>svg]:pointer-events-none focus-visible:border-ring focus-visible:ring-ring/50 focus-visible:ring-[3px] aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive transition-[color,box-shadow] overflow-hidden;
@apply inline-flex items-center justify-center rounded-full border px-2 py-0.5 text-xs font-medium w-fit whitespace-nowrap shrink-0 [&>svg]:size-3 gap-1 [&>svg]:pointer-events-none focus-visible:border-ring focus-visible:ring-ring/50 focus-visible:ring-[3px] aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive transition-[color,box-shadow] overflow-hidden;
}
.badge,
.badge-primary {
@@ -747,7 +747,7 @@
/* Kbd */
@layer components {
kbd {
.kbd {
@apply bg-muted text-muted-foreground pointer-events-none inline-flex h-5 w-fit min-w-5 items-center justify-center gap-1 rounded-sm px-1 font-sans text-xs font-medium select-none [&_svg:not([class*='size-'])]:size-3;
}
}