diff --git a/docs/src/_includes/layouts/base.njk b/docs/src/_includes/layouts/base.njk index 08798ce..cf0b5b1 100644 --- a/docs/src/_includes/layouts/base.njk +++ b/docs/src/_includes/layouts/base.njk @@ -1,44 +1,31 @@ - + + + + + @@ -81,6 +68,7 @@ + diff --git a/docs/src/_includes/macros/code_block.njk b/docs/src/_includes/macros/code_block.njk index 271935f..d28ec86 100644 --- a/docs/src/_includes/macros/code_block.njk +++ b/docs/src/_includes/macros/code_block.njk @@ -15,7 +15,8 @@ } }" > - 
{{- code | escape -}}
+ 
{{- code | escape -}}
GitHub{% endset %} +{% set icon_discord %}Discord{% endset %} {% set menu = [ { type: "group", label: "Getting started", items: [ { label: "Introduction", url: "/introduction", icon: icon_info, attrs: link_attrs }, { label: "Installation", url: "/installation", icon: icon_square_terminal, attrs: link_attrs }, { label: "Kitchen sink", url: "/kitchen-sink", icon: icon_layout_dashboard, attrs: link_attrs }, - { label: "GitHub", url: "https://github.com/hunvreus/basecoat", icon: icon_github, attrs: { - "target": "_blank", - "data-sidebar-close-on-mobile": "" - } - } + { label: "GitHub", url: "https://github.com/hunvreus/basecoat", icon: icon_github, attrs: { "target": "_blank" } }, + { label: "Discord", url: "https://basecoatui.com/chat", icon: icon_discord, attrs: { "target": "_blank" } } ]}, { type: 'group', label: 'Components', items: [ { label: "Accordion", url: "/components/accordion", attrs: link_attrs }, diff --git a/docs/src/assets/styles.css b/docs/src/assets/styles.css index c585511..6f09057 100644 --- a/docs/src/assets/styles.css +++ b/docs/src/assets/styles.css @@ -268,6 +268,9 @@ .absolute { position: absolute; } + .fixed { + position: fixed; + } .relative { position: relative; } @@ -280,6 +283,9 @@ .inset-x-0 { inset-inline: calc(var(--spacing) * 0); } + .inset-y-0 { + inset-block: calc(var(--spacing) * 0); + } .top-0 { top: calc(var(--spacing) * 0); } @@ -289,9 +295,15 @@ .top-3 { top: calc(var(--spacing) * 3); } + .top-4 { + top: calc(var(--spacing) * 4); + } .top-22 { top: calc(var(--spacing) * 22); } + .top-\[50\%\] { + top: 50%; + } .right-3 { right: calc(var(--spacing) * 3); } @@ -301,12 +313,18 @@ .left-2 { left: calc(var(--spacing) * 2); } + .left-\[50\%\] { + left: 50%; + } .isolate { isolation: isolate; } .z-10 { z-index: 10; } + .z-50 { + z-index: 50; + } .col-span-2 { grid-column: span 2 / span 2; } @@ -328,6 +346,9 @@ max-width: 96rem; } } + .-mx-6 { + margin-inline: calc(var(--spacing) * -6); + } .mx-auto { margin-inline: auto; } @@ -520,6 +541,9 @@ .max-w-\[300px\] { max-width: 300px; } + .max-w-\[calc\(100\%-2rem\)\] { + max-width: calc(100% - 2rem); + } .max-w-lg { max-width: var(--container-lg); } @@ -601,6 +625,9 @@ .flex-col { flex-direction: column; } + .flex-col-reverse { + flex-direction: column-reverse; + } .flex-row { flex-direction: row; } @@ -747,6 +774,9 @@ .rounded-xl { border-radius: var(--radius-xl); } + .rounded-xs { + border-radius: var(--radius-xs); + } .border { border-style: var(--tw-border-style); border-width: 1px; @@ -787,6 +817,12 @@ .bg-background { background-color: var(--color-background); } + .bg-black\/50 { + background-color: color-mix(in srgb, #000 50%, transparent); + @supports (color: color-mix(in lab, red, red)) { + background-color: color-mix(in oklab, var(--color-black) 50%, transparent); + } + } .bg-card { background-color: var(--color-card); } @@ -820,6 +856,9 @@ .p-4 { padding: calc(var(--spacing) * 4); } + .p-6 { + padding: calc(var(--spacing) * 6); + } .p-10 { padding: calc(var(--spacing) * 10); } @@ -1002,9 +1041,16 @@ .opacity-60 { opacity: 60%; } + .opacity-70 { + opacity: 70%; + } .opacity-100 { opacity: 100%; } + .shadow-lg { + --tw-shadow: 0 10px 15px -3px var(--tw-shadow-color, rgb(0 0 0 / 0.1)), 0 4px 6px -4px var(--tw-shadow-color, rgb(0 0 0 / 0.1)); + box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow); + } .shadow-none { --tw-shadow: 0 0 #0000; box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow); @@ -1037,6 +1083,11 @@ transition-timing-function: var(--tw-ease, var(--default-transition-timing-function)); transition-duration: var(--tw-duration, var(--default-transition-duration)); } + .transition-opacity { + transition-property: opacity; + transition-timing-function: var(--tw-ease, var(--default-transition-timing-function)); + transition-duration: var(--tw-duration, var(--default-transition-duration)); + } .transition-transform { transition-property: transform, translate, scale, rotate; transition-timing-function: var(--tw-ease, var(--default-transition-timing-function)); @@ -1186,6 +1237,13 @@ } } } + .hover\:opacity-100 { + &:hover { + @media (hover: hover) { + opacity: 100%; + } + } + } .focus\:bg-destructive\/10 { &:focus { background-color: var(--color-destructive); @@ -1199,6 +1257,33 @@ color: var(--color-destructive); } } + .focus\:ring-2 { + &:focus { + --tw-ring-shadow: var(--tw-ring-inset,) 0 0 0 calc(2px + 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); + } + } + .focus\:ring-ring { + &:focus { + --tw-ring-color: var(--color-ring); + } + } + .focus\:ring-offset-2 { + &:focus { + --tw-ring-offset-width: 2px; + --tw-ring-offset-shadow: var(--tw-ring-inset,) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color); + } + } + .focus\:outline-hidden { + &:focus { + --tw-outline-style: none; + outline-style: none; + @media (forced-colors: active) { + outline: 2px solid transparent; + outline-offset: 2px; + } + } + } .focus-visible\:border-ring { &:focus-visible { border-color: var(--color-ring); @@ -1277,6 +1362,16 @@ background-color: var(--color-green-50); } } + .data-\[state\=open\]\:bg-accent { + &[data-state="open"] { + background-color: var(--color-accent); + } + } + .data-\[state\=open\]\:text-muted-foreground { + &[data-state="open"] { + color: var(--color-muted-foreground); + } + } .max-sm\:flex-col { @media (width < 40rem) { flex-direction: column; @@ -1287,6 +1382,16 @@ max-width: 425px; } } + .sm\:max-w-lg { + @media (width >= 40rem) { + max-width: var(--container-lg); + } + } + .sm\:flex-row { + @media (width >= 40rem) { + flex-direction: row; + } + } .sm\:gap-2\.5 { @media (width >= 40rem) { gap: calc(var(--spacing) * 2.5); @@ -1366,6 +1471,16 @@ min-width: var(--container-sm); } } + .dark\:block { + &:is(.dark *) { + display: block; + } + } + .dark\:hidden { + &:is(.dark *) { + display: none; + } + } .dark\:border-amber-950 { &:is(.dark *) { border-color: var(--color-amber-950); @@ -2572,6 +2687,97 @@ } } } +@layer components { + .dropdown-menu { + [popover].popover { + padding: calc(var(--spacing) * 1); + min-width: anchor-size(width); + [role='menuitem'], [role='menuitemcheckbox'], [role='menuitemradio'] { + position: relative; + display: flex; + width: 100%; + cursor: default; + align-items: center; + gap: calc(var(--spacing) * 2); + overflow: hidden; + text-overflow: ellipsis; + white-space: nowrap; + border-radius: var(--radius-sm); + padding-inline: calc(var(--spacing) * 2); + padding-block: calc(var(--spacing) * 1.5); + font-size: var(--text-sm); + line-height: var(--tw-leading, var(--text-sm--line-height)); + --tw-outline-style: none; + outline-style: none; + @media (forced-colors: active) { + outline: 2px solid transparent; + outline-offset: 2px; + } + -webkit-user-select: none; + user-select: none; + &:disabled { + pointer-events: none; + } + &:disabled { + opacity: 50%; + } + &[aria-disabled="true"] { + pointer-events: none; + } + &[aria-disabled="true"] { + opacity: 50%; + } + &[aria-hidden="true"] { + display: none; + } + & svg { + width: calc(var(--spacing) * 4); + height: calc(var(--spacing) * 4); + } + & svg { + flex-shrink: 0; + } + & svg { + color: var(--color-muted-foreground); + } + &:hover { + @media (hover: hover) { + background-color: var(--color-accent); + } + } + &:hover { + @media (hover: hover) { + color: var(--color-accent-foreground); + } + } + &:focus-visible { + background-color: var(--color-accent); + } + &:focus-visible { + color: var(--color-accent-foreground); + } + &.active { + background-color: var(--color-accent); + color: var(--color-accent-foreground); + } + } + [role='menu'] [role='heading'] { + display: flex; + padding-inline: calc(var(--spacing) * 2); + padding-block: calc(var(--spacing) * 1.5); + font-size: var(--text-sm); + line-height: var(--tw-leading, var(--text-sm--line-height)); + --tw-font-weight: var(--font-weight-medium); + font-weight: var(--font-weight-medium); + } + [role='separator'] { + margin-inline: calc(var(--spacing) * -1); + margin-block: calc(var(--spacing) * 1); + border-color: var(--color-border); + } + } + } +} @layer components { .form input[type='text'], .form input[type='email'], .form input[type='password'], .form input[type='number'], .form input[type='file'], .form input[type='tel'], .form input[type='url'], .form input[type='search'], .form input[type='date'], .form input[type='datetime-local'], .form input[type='month'], .form input[type='week'], .form input[type='time'], .input[type='text'], .input[type='email'], .input[type='password'], .input[type='number'], .input[type='file'], .input[type='tel'], .input[type='url'], .input[type='search'], .input[type='date'], .input[type='datetime-local'], .input[type='month'], .input[type='week'], .input[type='time'] { display: flex; @@ -2710,242 +2916,6 @@ } } } -@layer components { - div.select { - [popover].popover { - min-width: anchor-size(width); - padding: calc(var(--spacing) * 1); - [role='option'] { - position: relative; - display: flex; - width: 100%; - cursor: default; - align-items: center; - gap: calc(var(--spacing) * 2); - overflow: hidden; - text-overflow: ellipsis; - white-space: nowrap; - border-radius: var(--radius-sm); - padding-inline: calc(var(--spacing) * 2); - padding-block: calc(var(--spacing) * 1.5); - font-size: var(--text-sm); - line-height: var(--tw-leading, var(--text-sm--line-height)); - --tw-outline-style: none; - outline-style: none; - @media (forced-colors: active) { - outline: 2px solid transparent; - outline-offset: 2px; - } - -webkit-user-select: none; - user-select: none; - &:disabled { - pointer-events: none; - } - &:disabled { - opacity: 50%; - } - &[aria-disabled="true"] { - pointer-events: none; - } - &[aria-disabled="true"] { - opacity: 50%; - } - &[aria-hidden="true"] { - display: none; - } - & svg { - width: calc(var(--spacing) * 4); - height: calc(var(--spacing) * 4); - } - & svg { - flex-shrink: 0; - } - & svg { - color: var(--color-muted-foreground); - } - &[aria-selected='true'] { - background-image: var(--check-icon); - background-size: 0.875rem; - background-position: center right 0.5rem; - background-repeat: no-repeat; - } - } - [role='listbox'] [role='heading'] { - display: flex; - padding-inline: calc(var(--spacing) * 2); - padding-block: calc(var(--spacing) * 1.5); - font-size: var(--text-xs); - line-height: var(--tw-leading, var(--text-xs--line-height)); - color: var(--color-muted-foreground); - } - [role='listbox'] [role='group']:not(:has([role='option']:not([aria-hidden='true']))) { - display: none; - } - [role='separator'] { - margin-inline: calc(var(--spacing) * -1); - margin-block: calc(var(--spacing) * 1); - border-color: var(--color-border); - } - > header { - margin-inline: calc(var(--spacing) * -1); - margin-top: calc(var(--spacing) * -1); - margin-bottom: calc(var(--spacing) * 1); - display: flex; - height: calc(var(--spacing) * 9); - align-items: center; - gap: calc(var(--spacing) * 2); - border-bottom-style: var(--tw-border-style); - border-bottom-width: 1px; - padding-inline: calc(var(--spacing) * 3); - svg { - width: calc(var(--spacing) * 4); - height: calc(var(--spacing) * 4); - flex-shrink: 0; - opacity: 50%; - } - input[role='combobox'] { - display: flex; - height: calc(var(--spacing) * 10); - width: 100%; - min-width: calc(var(--spacing) * 0); - flex: 1; - border-radius: var(--radius-md); - background-color: transparent; - padding-block: calc(var(--spacing) * 3); - font-size: var(--text-sm); - line-height: var(--tw-leading, var(--text-sm--line-height)); - --tw-outline-style: none; - outline-style: none; - @media (forced-colors: active) { - outline: 2px solid transparent; - outline-offset: 2px; - } - &::placeholder { - color: var(--color-muted-foreground); - } - &:disabled { - cursor: not-allowed; - } - &:disabled { - opacity: 50%; - } - } - } - [role='listbox']:not(:has([data-value]:not([aria-hidden='true'])))::before { - display: flex; - align-items: center; - justify-content: center; - overflow: hidden; - text-overflow: ellipsis; - white-space: nowrap; - padding: calc(var(--spacing) * 6); - font-size: var(--text-sm); - line-height: var(--tw-leading, var(--text-sm--line-height)); - } - [role='listbox'][data-empty]:not(:has([data-value]:not([aria-hidden='true'])))::before { - --tw-content: attr(data-empty); - content: var(--tw-content); - } - [role='listbox']:not([data-empty]):not(:has([data-value]:not([aria-hidden='true'])))::before { - --tw-content: 'No results found'; - content: var(--tw-content); - } - } - &:not([data-select-initialized]) [role='option']:hover, &[data-select-initialized] [role='option'].active, &[data-select-initialized] [role='option']:focus-visible { - background-color: var(--color-accent); - color: var(--color-accent-foreground); - } - } - .dropdown-menu { - [popover].popover { - padding: calc(var(--spacing) * 1); - min-width: anchor-size(width); - [role='menuitem'], [role='menuitemcheckbox'], [role='menuitemradio'] { - position: relative; - display: flex; - width: 100%; - cursor: default; - align-items: center; - gap: calc(var(--spacing) * 2); - overflow: hidden; - text-overflow: ellipsis; - white-space: nowrap; - border-radius: var(--radius-sm); - padding-inline: calc(var(--spacing) * 2); - padding-block: calc(var(--spacing) * 1.5); - font-size: var(--text-sm); - line-height: var(--tw-leading, var(--text-sm--line-height)); - --tw-outline-style: none; - outline-style: none; - @media (forced-colors: active) { - outline: 2px solid transparent; - outline-offset: 2px; - } - -webkit-user-select: none; - user-select: none; - &:disabled { - pointer-events: none; - } - &:disabled { - opacity: 50%; - } - &[aria-disabled="true"] { - pointer-events: none; - } - &[aria-disabled="true"] { - opacity: 50%; - } - &[aria-hidden="true"] { - display: none; - } - & svg { - width: calc(var(--spacing) * 4); - height: calc(var(--spacing) * 4); - } - & svg { - flex-shrink: 0; - } - & svg { - color: var(--color-muted-foreground); - } - &:hover { - @media (hover: hover) { - background-color: var(--color-accent); - } - } - &:hover { - @media (hover: hover) { - color: var(--color-accent-foreground); - } - } - &:focus-visible { - background-color: var(--color-accent); - } - &:focus-visible { - color: var(--color-accent-foreground); - } - &.active { - background-color: var(--color-accent); - color: var(--color-accent-foreground); - } - } - [role='menu'] [role='heading'] { - display: flex; - padding-inline: calc(var(--spacing) * 2); - padding-block: calc(var(--spacing) * 1.5); - font-size: var(--text-sm); - line-height: var(--tw-leading, var(--text-sm--line-height)); - --tw-font-weight: var(--font-weight-medium); - font-weight: var(--font-weight-medium); - } - [role='separator'] { - margin-inline: calc(var(--spacing) * -1); - margin-block: calc(var(--spacing) * 1); - border-color: var(--color-border); - } - } - } -} @layer components { [popover].popover { visibility: visible; @@ -3343,6 +3313,151 @@ color: var(--color-popover-foreground); } } + div.select { + [popover].popover { + min-width: anchor-size(width); + padding: calc(var(--spacing) * 1); + [role='option'] { + position: relative; + display: flex; + width: 100%; + cursor: default; + align-items: center; + gap: calc(var(--spacing) * 2); + overflow: hidden; + text-overflow: ellipsis; + white-space: nowrap; + border-radius: var(--radius-sm); + padding-inline: calc(var(--spacing) * 2); + padding-block: calc(var(--spacing) * 1.5); + font-size: var(--text-sm); + line-height: var(--tw-leading, var(--text-sm--line-height)); + --tw-outline-style: none; + outline-style: none; + @media (forced-colors: active) { + outline: 2px solid transparent; + outline-offset: 2px; + } + -webkit-user-select: none; + user-select: none; + &:disabled { + pointer-events: none; + } + &:disabled { + opacity: 50%; + } + &[aria-disabled="true"] { + pointer-events: none; + } + &[aria-disabled="true"] { + opacity: 50%; + } + &[aria-hidden="true"] { + display: none; + } + & svg { + width: calc(var(--spacing) * 4); + height: calc(var(--spacing) * 4); + } + & svg { + flex-shrink: 0; + } + & svg { + color: var(--color-muted-foreground); + } + &[aria-selected='true'] { + background-image: var(--check-icon); + background-size: 0.875rem; + background-position: center right 0.5rem; + background-repeat: no-repeat; + } + } + [role='listbox'] [role='heading'] { + display: flex; + padding-inline: calc(var(--spacing) * 2); + padding-block: calc(var(--spacing) * 1.5); + font-size: var(--text-xs); + line-height: var(--tw-leading, var(--text-xs--line-height)); + color: var(--color-muted-foreground); + } + [role='listbox'] [role='group']:not(:has([role='option']:not([aria-hidden='true']))) { + display: none; + } + [role='separator'] { + margin-inline: calc(var(--spacing) * -1); + margin-block: calc(var(--spacing) * 1); + border-color: var(--color-border); + } + > header { + margin-inline: calc(var(--spacing) * -1); + margin-top: calc(var(--spacing) * -1); + margin-bottom: calc(var(--spacing) * 1); + display: flex; + height: calc(var(--spacing) * 9); + align-items: center; + gap: calc(var(--spacing) * 2); + border-bottom-style: var(--tw-border-style); + border-bottom-width: 1px; + padding-inline: calc(var(--spacing) * 3); + svg { + width: calc(var(--spacing) * 4); + height: calc(var(--spacing) * 4); + flex-shrink: 0; + opacity: 50%; + } + input[role='combobox'] { + display: flex; + height: calc(var(--spacing) * 10); + width: 100%; + min-width: calc(var(--spacing) * 0); + flex: 1; + border-radius: var(--radius-md); + background-color: transparent; + padding-block: calc(var(--spacing) * 3); + font-size: var(--text-sm); + line-height: var(--tw-leading, var(--text-sm--line-height)); + --tw-outline-style: none; + outline-style: none; + @media (forced-colors: active) { + outline: 2px solid transparent; + outline-offset: 2px; + } + &::placeholder { + color: var(--color-muted-foreground); + } + &:disabled { + cursor: not-allowed; + } + &:disabled { + opacity: 50%; + } + } + } + [role='listbox']:not(:has([data-value]:not([aria-hidden='true'])))::before { + display: flex; + align-items: center; + justify-content: center; + overflow: hidden; + text-overflow: ellipsis; + white-space: nowrap; + padding: calc(var(--spacing) * 6); + font-size: var(--text-sm); + line-height: var(--tw-leading, var(--text-sm--line-height)); + } + [role='listbox'][data-empty]:not(:has([data-value]:not([aria-hidden='true'])))::before { + --tw-content: attr(data-empty); + content: var(--tw-content); + } + [role='listbox']:not([data-empty]):not(:has([data-value]:not([aria-hidden='true'])))::before { + --tw-content: 'No results found'; + content: var(--tw-content); + } + } + [role='option']:hover, &[data-select-initialized] [role='option'].active, &[data-select-initialized] [role='option']:focus-visible { + background-color: var(--color-accent); + color: var(--color-accent-foreground); + } + } } .sidebar { &:not([data-sidebar-initialized]) { diff --git a/docs/src/components/dropdown-menu.njk b/docs/src/components/dropdown-menu.njk index c5c4222..8621e45 100644 --- a/docs/src/components/dropdown-menu.njk +++ b/docs/src/components/dropdown-menu.njk @@ -33,18 +33,18 @@ toc: ) %}
My Account - - - +