+
+
+ Basic Item
+A simple item with title and description.
+The component has the following HTML structure:
diff --git a/docs/src/components/alert.njk b/docs/src/components/alert.njk index ea37877..4d6064d 100644 --- a/docs/src/components/alert.njk +++ b/docs/src/components/alert.njk @@ -19,30 +19,63 @@ toc: {% from "macros/code_preview.njk" import code_preview %} {% from "macros/code_block.njk" import code_block %} -{% set code %}
- {% lucide "circle-check" %}
- This is an alert with icon, title and description.
-
{% endset %}
-{{ code_preview("alert", code) }}
+{% set code %}
+Success! Your changes have been saved
-
+
+{% endset %}
+{{ code_preview("alert", code | prettyHtml) }}
+ {% lucide "circle-check" %}
+ This is an alert with icon, title and description.
+
+ Success! Your changes have been saved
+
+ {% lucide "popcorn" %}
+ This is an alert with icon, title and description.
+
+ This Alert has a title and an icon. No description.
+
+ {% lucide "circle-check" %}
+
+
+
+Unable to process your payment.
+Please verify your billing information and try again.
+-
+
- Check your card details +
- Ensure sufficient funds +
- Verify billing address +
Usage
You can use one of the two classes: alert or alert-dialog.
Use the alert or alert-destructive.
+ {% lucide "circle-check" %}
+ This is an alert with icon, title and description.
+
+{% endset %}
+{{ code_block(code_simple | prettyHtml) }}
Success! Your changes have been saved
+The component has the following HTML structure:
-
-
<svg>Optional
- - The icon. -
<h2>
- - The title. -
<section>Optional
- - The description. +
<div class="alert">
+ - Main container. Use
alertfor default styling oralert-destructivefor error states. +-
+
<svg>Optional
+ - The icon. +
<h2>
+ - The title. +
<section>Optional
+ - The description. +
{% lucide "circle-alert" %}
-
-{% set code %}There is no dedicated avatar component in Basecoat.
+There is no dedicated Avatar component in Basecoat.
{% endset %}
-{{ code_preview("avatar", code, "max-w-md") }}
+{% set code %}
+
+
+ 
+
+{% endset %}
+{{ code_preview("avatar", code | prettyHtml, "w-full max-w-md") }}
+
+
+
+
+ 
+
+
+
+
+ Usage
-Avatars are fairly simple to implement with Tailwind. The example above shows how to implement one with Tailwind and an <img> element. More examples can be found in the kitchen sink.
Avatars are just <img> elements styled with Tailwind utility classes.
+{% endset %}
+{{ code_block(code_simple | prettyHtml, "html") }}
\ No newline at end of file
diff --git a/docs/src/components/badge.njk b/docs/src/components/badge.njk
index ef1f67a..5eff349 100644
--- a/docs/src/components/badge.njk
+++ b/docs/src/components/badge.njk
@@ -25,7 +25,25 @@ toc:
{% from "macros/code_preview.njk" import code_preview %}
{% from "macros/code_block.njk" import code_block %}
-{% set code %}Badge{% endset %}
+{% set code %}
+
+
+{% endset %}
{{ code_preview("badge", code) }}
+ Badge
+ Secondary
+ Destructive
+ Outline
+
+
+
+ {% lucide "badge-check" %}
+ Verified
+
+ 8
+ 99
+ 20+
+
+Usage
diff --git a/docs/src/components/breadcrumb.njk b/docs/src/components/breadcrumb.njk index 2b64ba0..48fe503 100644 --- a/docs/src/components/breadcrumb.njk +++ b/docs/src/components/breadcrumb.njk @@ -13,7 +13,7 @@ toc:
{% lucide "circle-alert" %}
-
{% set code_html %}
@@ -54,7 +54,18 @@ toc:
There is no dedicated breadcrumb component in Basecoat.
+There is no dedicated Breadcrumb component in Basecoat.
Usage
This example uses some simple Tailwind CSS styles along with the Dropdown Menu component (which may require JavaScript).
+You can style an ordered list of links combined with chevron icons as show below. The example above demonstrates a more complex use case using the Dropdown Menu component.
-
+
- + Home + +
- {% lucide "chevron-right", { "class": "size-3.5" } %} +
- + Components + +
+
+
+
+
+
+{% endset %}
+
+{{ code_preview("button-group-default", code_default | prettyHtml) }}
+
+
+
+
+{% set code_orientation %}
+
+{% endset %}
+
+{{ code_preview("button-group-orientation", code_orientation | prettyHtml) }}
+
+
+
+
+{% set code_separator %}
+
+{% endset %}
+
+{{ code_preview("button-group-separator", code_separator | prettyHtml) }}
+
+
+
+
+
+
+{% set code_script %}
+{% endset %}
+{{ code_block(code_script | prettyHtml, "html") }}
+
+
+
+
+{{ code_block(code_standalone | prettyHtml, "html") }}
+
+
+
+
+{% set code_dialog %}
+
+{% endset %}
+
+{{ code_block(code_dialog | prettyHtml, "html") }}
+
+
+
+
+
+
+
+
+
+
+{% set code_dialog %}
+
+
+{% call command_dialog(id="demo-command-dialog") %}
+{{ command_items("cmd-suggestions", "cmd-settings") }}
+{% endcall %}
+
+
+{% endset %}
+
+{{ code_preview("command-dialog", code_dialog | prettyHtml) }}
\ No newline at end of file
diff --git a/docs/src/components/dialog.njk b/docs/src/components/dialog.njk
index a734cec..dafa34c 100644
--- a/docs/src/components/dialog.njk
+++ b/docs/src/components/dialog.njk
@@ -69,8 +69,8 @@ toc:
Usage
+ +Simply wrap buttons you want to group together in a <div role="group" class="button-group"> element. You can also use the data-orientation="vertical" attribute to stack buttons vertically. You can also group buttons with dropdown menus or popovers (provided the trigger is a button). Finally, you can use a separator to visually divide buttons within a group (for secondary buttons for example).
Examples
+ +Orientation
+ +Use data-orientation="vertical" to stack buttons vertically.
Size
+ +{% set code_size %} +
+
+
+
+
+{% endset %}
+
+{{ code_preview("button-group-size", code_size | prettyHtml) }}
+
+Nested
+ +{% set code_nested %} +
+
+
+
+{% endset %}
+
+{{ code_preview("button-group-nested", code_nested | prettyHtml) }}
+
+Separator
+ +Use <hr role="separator"> to visually divide buttons within a group.
Input
+ +{% set code_input %} + +{% endset %} + +{{ code_preview("button-group-input", code_input | prettyHtml) }} + + +Dropdown Menu
+ +{% set code_dropdown_menu %} + +{% endset %} + +{{ code_preview("button-group-dropdown-menu", code_dropdown_menu | prettyHtml) }} + +Select
+ +{% set code_select %} +
+
+
+
+
+{% endset %}
+
+{{ code_preview("button-group-select", code_select | prettyHtml) }}
+
+Popover
+ +{% set code_popover %} + +{% endset %} + +{{ code_preview("button-group-popover", code_popover | prettyHtml) }} \ No newline at end of file diff --git a/docs/src/components/command.njk b/docs/src/components/command.njk new file mode 100644 index 0000000..3f468a3 --- /dev/null +++ b/docs/src/components/command.njk @@ -0,0 +1,261 @@ +--- +layout: layouts/page.njk +title: Command +description: Fast, composable command menu for quick navigation and actions. +toc: + - label: Usage + id: usage + children: + - label: HTML + JavaScript + id: usage-html-js + children: + - label: "Step 1: Include the JavaScript files" + id: usage-html-js-1 + - label: "Step 2: Add your command HTML" + id: usage-html-js-2 + - label: HTML structure + id: usage-html-js-3 + - label: JavaScript events + id: usage-html-js-4 + - label: Jinja and Nunjucks + id: usage-macro + - label: Examples + id: examples + children: + - label: Dialog + id: example-dialog +--- + +{% from "macros/code_preview.njk" import code_preview %} +{% from "macros/code_block.njk" import code_block %} +{% from "command.njk" import command, command_dialog %} + +{% macro command_items(suggestions_id="suggestions", settings_id="settings") %} +
+ Suggestions
+
+
+ {% lucide "calendar" %}
+ Calendar
+
+
+ {% lucide "smile" %}
+ Search Emoji
+
+
+ {% lucide "calculator" %}
+ Calculator
+
++
+ Settings
+
+{% endmacro %}
+
+{% set code_standalone %}
+{% call command(
+ id="demo-command-standalone",
+ main_attrs={ "class": "rounded-lg border shadow-md" }
+) %}
+{{ command_items("suggestions", "settings") }}
+{% endcall %}
+{% endset %}
+
+{{ code_preview("command-standalone", code_standalone | prettyHtml, class=" w-full max-w-[450px]") }}
+
+
+ {% lucide "user" %}
+ Profile
+ ⌘P
+
+
+ {% lucide "credit-card" %}
+ Billing
+ ⌘B
+
+
+ {% lucide "settings" %}
+ Settings
+ ⌘S
+
+Usage
+ +HTML + JavaScript
+ +Step 1: Include the JavaScript files
+ +You can either include the JavaScript file for all the components, or just the one for this component by adding this to the <head> of your page:
+
+ Components with JavaScript
+ {% lucide "arrow-right" %}
+
+
+ Use the CLI
+ {% lucide "arrow-right" %}
+
+
+ command.js
+ {% lucide "arrow-right" %}
+
+
+
+Step 2: Add your command HTML
+ +You can use the command menu standalone:
+Wrap the command menu in a <dialog class="command-dialog"> to display in a dialog:
HTML structure
+ +-
+
<dialog class="command-dialog">Optional
+ - For dialog variant, wraps a
<div class="command">to display as a modal. Uses native<dialog>behavior and requiresaria-labeloraria-labelledbyfor accessibility. +-
+
<div class="command">
+ - Wraps around the entire command component. Can be used standalone or inside a dialog.
+
-
+
<header>
+ - Contains the search input to filter command options.
+
-
+
<input type="text">
+ - The search input. Should have:
+
-
+
role="combobox": indicates the input controls a menu with filtering
+ aria-expanded="true": the menu is always expanded
+ aria-controls="{ MENU_ID }": points to the menu's id
+
+
+ <div role="menu">
+ - The menu containing the command items. Should have
id="{ MENU_ID }"refered to by the input'saria-controlsattribute. +-
+
<div role="menuitem">
+ - Command item that triggers an action when clicked. In a command-dialog, clicking a menuitem automatically closes the dialog unless the
data-keep-command-openattribute is present. Optional attributes: +-
+
data-label: custom label for filtering (if different from text content)
+ data-keywords: additional keywords for enhanced filtering
+ aria-disabled="true": marks item as disabled (excluded from keyboard navigation and filtering)
+
+ <hr role="separator">Optional
+ - Separator between groups/items. Hidden when filtering is active. +
<div role="group">Optional
+ - Group of items, can have
aria-labelledbyattribute to link to a heading.
+ <span role="heading">
+ - Group heading, must have an
idattribute if you use thearia-labelledbyattribute on the group.
+
+
+
+
JavaScript events
+ +-
+
basecoat:initialized
+ - Once the component is fully initialized, it dispatches a custom (non-bubbling)
basecoat:initializedevent on itself.
+
Jinja and Nunjucks
+ +
+
+
+You can use the command() or command_dialog() Nunjucks or Jinja macros for this component.
+
+ Use Nunjucks or Jinja macros
+ {% lucide "arrow-right" %}
+
+
+ Jinja macro
+ {% lucide "arrow-right" %}
+
+
+ Nunjucks macro
+ {% lucide "arrow-right" %}
+
+
+
+{% set raw_code %}{% raw %}{% call command() %}
+
+
+ Calendar
+
+
+
+ Settings
+
+{% endcall %}{% endraw %}{% endset %}
+{{ code_block(raw_code, "jinja") }}
+
+Examples
+ +Dialog
+ +You can use some simple JavaScript to open the command menu with a keyboard shortcut (in this case ⌘J).
+onclick: closes the dialog when the backdrop is clicked.-
-
<article>
- - Wraps the content of the dialog. It includes an
onclickattribute to prevent from closing the dialog if we have anonclickevent on<dialog>. + <div>
+ - Wraps the content of the dialog.
<header>- Contains the header for the dialog:
diff --git a/docs/src/components/empty.njk b/docs/src/components/empty.njk
new file mode 100644
index 0000000..c094e45
--- /dev/null
+++ b/docs/src/components/empty.njk
@@ -0,0 +1,157 @@
+---
+layout: layouts/page.njk
+title: Empty
+description: Display empty states with icons, titles, descriptions, and actions.
+toc:
+ - label: Usage
+ id: usage
+ - label: Examples
+ id: examples
+ children:
+ - label: Outline
+ id: example-outline
+ - label: Avatar
+ id: example-avatar
+ - label: Avatar Group
+ id: example-avatar-group
+ - label: Input Group
+ id: example-input-group
+---
+
+{% from "macros/code_preview.njk" import code_preview %}
+{% from "macros/code_block.njk" import code_block %}
+
++ {% lucide "circle-alert" %} ++ +{% set code_default %} +
There is no dedicated Empty component in Basecoat.
+++{% endset %} + +{{ code_preview("empty-default", code_default) }} + ++ ++ {% lucide "folder-code" %} ++No Projects Yet
++ You haven't created any projects yet. Get started by creating your first project. +
++ + + Learn More + {% lucide "arrow-up-right" %} + ++ + ++Usage
+ ++ + +Empty states are pure HTML composition using Tailwind utility classes. Use flex layout utilities to center content, and compose with semantic elements like
+<header>,<h3>,<p>, and<button>.Browse the examples below and copy the pattern that fits your needs.
+Examples
+ +Outline
+ +{% set code_outline %} +++{% endset %} + +{{ code_preview("empty-outline", code_outline) }} + ++ ++ {% lucide "cloud" %} ++Cloud Storage Empty
++ Upload files to your cloud storage to access them anywhere. +
++ + +Avatar
+ +{% set code_avatar %} +++{% endset %} + +{{ code_preview("empty-avatar", code_avatar) }} + ++ +++
+ User Offline
++ This user is currently offline. You can leave a message to notify them or try again later. +
++ + +Avatar Group
+ +{% set code_avatar_group %} +++{% endset %} + +{{ code_preview("empty-avatar-group", code_avatar_group) }} + ++ +++++
+
+
+ No Team Members
++ Invite your team to collaborate on this project. +
++ + +Input Group
+ +{% set code_input_group %} +++{% endset %} + +{{ code_preview("empty-input-group", code_input_group) }} \ No newline at end of file diff --git a/docs/src/components/field.njk b/docs/src/components/field.njk new file mode 100644 index 0000000..c281856 --- /dev/null +++ b/docs/src/components/field.njk @@ -0,0 +1,459 @@ +--- +layout: layouts/page.njk +title: Field +description: Combine labels, controls, and help text to compose accessible form fields. +toc: + - label: Usage + id: usage + - label: Examples + id: examples + children: + - label: Input + id: example-input + - label: Textarea + id: example-textarea + - label: Select + id: example-select + - label: Fieldset + id: example-fieldset + - label: Checkbox + id: example-checkbox + - label: Radio Group + id: example-radio + - label: Switch + id: example-switch + - label: Responsive Layout + id: example-responsive +--- + +{% from "macros/code_preview.njk" import code_preview %} +{% from "macros/code_block.njk" import code_block %} + +{% set code_demo %} + +{% endset %} + +{{ code_preview("field-demo", code_demo) }} + ++ +404 - Not Found
++ The page you're looking for doesn't exist. Try searching for what you need below. +
++ ++ + {% lucide "search" , { "class": "absolute left-3 top-1/2 -translate-y-1/2 pointer-events-none text-muted-foreground pointer-events-none shrink-0 size-4" } %} + / +++ Need help? Contact support +
+Usage
+ ++ + +Field uses semantic HTML with minimal classes. Two main patterns can be used independently or composed together:
+-
+
<div role="group" class="field">for individual field containers (label, input, helper text, errors)
+ <fieldset class="fieldset">for grouping multiple related fields together
+
Elements inside these containers are styled automatically based on their purpose. Use
+aria-describedbyto connect helper text and errors to inputs for accessibility.Fields have the following HTML structure:
+-
+
<div role="group" class="field">
+ - Field container. Add
data-orientation="horizontal"to align controls horizontally. For responsive layouts, use standard Tailwind responsive classes. +-
+
<label>
+ - Label for the input. +
<input>,<select>or<textarea>
+ - Form input. +
<p>Optional
+ - Helper text. Use
aria-describedbyon the input to reference this element'sid.
+ <p role="alert">Optional
+ - Error message. Use
aria-describedbyon the input andaria-invalid="true"to reference this element'sid.
+ <section>Optional
+ - Wraps label and description when the label sits beside the input (e.g.
data-orientation="horizontal"). Not required if you have no description.
+
+
Fieldsets have the following HTML structure:
+-
+
<fieldset class="fieldset">
+ - Container for grouping related fields.
+
-
+
<legend>
+ - Heading for the fieldset. +
<p>Optional
+ - Description text. When placed directly after
<legend>, automatically styled as muted text.
+ <div role="group" class="field">Optional
+ - Individual field containers (see structure above). You can include multiple
.fieldelements, or place form controls directly in the fieldset.
+
+
Examples
+ +Input
+ +{% set code_input %} +++{% endset %} + +{{ code_preview("field-input", code_input, class="w-full max-w-md") }} + ++ + ++ +Choose a unique username for your account.
++ ++Must be at least 8 characters long.
+ +Textarea
+ +{% set code_textarea %} ++ + ++{% endset %} + +{{ code_preview("field-textarea", code_textarea, class="w-full max-w-md") }} + +Share your thoughts about our service.
+Select
+ +{% set code_select %} ++ + ++{% endset %} + +{{ code_preview("field-select", code_select, class="w-full max-w-md") }} + +Select your department or area of work.
+Slider
+ +{% set code %} ++ ++ +{% endset %} +{{ code_preview("slider", code, "w-full max-w-sm") }} + +Set your budget: $150
+ +Fieldset
+ ++ + +{% set code_fieldset %} + +{% endset %} + +{{ code_preview("field-fieldset", code_fieldset) }} + +Group related fields with
+<fieldset class="fieldset">and<legend>.Checkbox
+ +{% set code_checkbox %} + +{% endset %} + +{{ code_preview("field-checkbox", code_checkbox, class="w-full max-w-md") }} + +Radio Group
+ +{% set code_radio %} + +{% endset %} + +{{ code_preview("field-radio", code_radio, class="w-full max-w-md") }} + +Switch
+ ++ + +{% set code_switch %} +Set
+data-orientation="horizontal"on.fieldto align labels and controls side-by-side.++{% endset %} + +{{ code_preview("field-switch", code_switch, class="w-full max-w-md") }} + ++ + + +Enable multi-factor authentication. If you do not have a two-factor device, you can use a one-time code sent to your email.
+Choice Card
+ +{% set code_choice_card %} + +{% endset %} + +{{ code_preview("field-choice-card", code_choice_card, class="w-full max-w-md") }} + +Responsive Layout
+ ++ + +{% set code_responsive %} + +{% endset %} + +{{ code_preview("field-responsive", code_responsive, class="w-full max-w-3xl") }} \ No newline at end of file diff --git a/docs/src/components/input-group.njk b/docs/src/components/input-group.njk new file mode 100644 index 0000000..590bd9d --- /dev/null +++ b/docs/src/components/input-group.njk @@ -0,0 +1,372 @@ +--- +layout: layouts/page.njk +title: Input Group +description: Display additional information or actions to an input or textarea. +toc: + - label: Usage + id: usage + - label: Examples + id: examples + children: + - label: Icon + id: example-icon + - label: Text + id: example-text + - label: Button + id: example-button + - label: Tooltip + id: example-tooltip + - label: Textarea + id: example-textarea + - label: Spinner + id: example-spinner + - label: Dropdown + id: example-dropdown + - label: Group + id: example-group +--- + +{% from "macros/code_preview.njk" import code_preview %} +{% from "macros/code_block.njk" import code_block %} +{% from "dropdown-menu.njk" import dropdown_menu %} +{% from "popover.njk" import popover %} + +For responsive layouts, use standard Tailwind responsive classes directly on
+.field. This example stacks vertically on mobile and switches to horizontal at themdbreakpoint.+ {% lucide "circle-alert" %} ++ +{% set code_default %} +There is no dedicated Input Group component in Basecoat.
+++{% endset %} + +{{ code_preview("input-group-default", code_default, class="w-full max-w-sm") }} + ++ ++ ++ {% lucide "search" %} ++12 results++ ++ +https://+{% lucide "info" %}++ + ++ ++ ++{% lucide "check" %}+Usage
+ ++ + +Input groups are pure HTML composition using Tailwind utility classes. There is no dedicated component: use
+relativepositioning on a wrapper, add your content withabsolutepositioning, and adjust input padding to make room.Browse the examples below and copy the pattern that fits your needs.
+Examples
+ +Icon
+ +{% set code_icon %} +++{% endset %} + +{{ code_preview("input-group-icon-prefix", code_icon, class="w-full max-w-sm") }} + ++ ++ ++ {% lucide "search" %} +++ ++ ++ {% lucide "mail" %} +++ ++ ++ {% lucide "credit-card" %} +++ {% lucide "check" %} +++ +++ {% lucide "star" %} + {% lucide "info" %} ++Text
+ +{% set code_text %} +++{% endset %} + +{{ code_preview("input-group-text", code_text, class="w-full max-w-sm") }} + ++ ++ +$+USD++ ++ +https://+.com++ ++ +@company.com++ + ++Button
+ +{% set code_button %} +++{% endset %} + +{{ code_preview("input-group-button", code_button, class="w-full max-w-sm") }} + ++ + ++ + ++ + ++ ++ {% set trigger %} + {% lucide "info" %} + {% endset %} + {% call popover( + trigger=trigger, + trigger_attrs={"class": "btn-sm-icon-ghost rounded-full size-6"}, + popover_attrs={"class": "max-w-72"} + ) %} ++Your connection is not secure.
+You should not enter any sensitive information on this site.
+ {% endcall %} +https://++ + ++Tooltip
+ +{% set code_tooltip %} +++{% endset %} + +{{ code_preview("input-group-tooltip", code_tooltip, class="w-full max-w-sm") }} + ++ ++ +{% lucide "info" %}++ ++ +{% lucide "circle-help" %}++ ++{% lucide "circle-help" %}+Textarea
+ +{% set code_textarea %} ++ ++{% endset %} + +{{ code_preview("input-group-textarea", code_textarea, class="w-full max-w-md") }} + ++ + script.js + + + + +Spinner
+ +{% set code_spinner %} +++{% endset %} + +{{ code_preview("input-group-spinner", code_spinner, class="w-full max-w-md") }} + ++ ++ ++ {% lucide "loader-circle", { "class": "animate-spin" } %} +++ ++ ++ {% lucide "loader-circle", { "class": "animate-spin" } %} +++ ++ +++Saving...++ {% lucide "loader-circle", { "class": "animate-spin" } %} +++ +++ {% lucide "loader", { "class": "animate-spin" } %} +++ Please wait... ++Dropdown
+ +{% set code_dropdown %} +++{% endset %} + +{{ code_preview("input-group-dropdown", code_dropdown, class="w-full max-w-sm") }} + ++ + {% set trigger %} + {% lucide "ellipsis" %} + {% endset %} + {{ dropdown_menu( + main_attrs={"class": "absolute right-1.5 top-1/2 -translate-y-1/2 z-10"}, + trigger=trigger, + trigger_attrs={"class": "btn-sm-icon-ghost text-muted-foreground hover:text-accent-foreground size-6"}, + popover_attrs={"data-align": "end", "class": "min-w-32"}, + items=[ + { type: "item", label: "Settings" }, + { type: "item", label: "Copy path" }, + { type: "item", label: "Open location" } + ] + ) }} ++ ++ + {% set trigger %} + Search in... + {% lucide "chevron-down", { "class": "size-3" } %} + {% endset %} + {{ dropdown_menu( + main_attrs={"class": "absolute right-1.5 top-1/2 -translate-y-1/2"}, + trigger=trigger, + trigger_attrs={"class": "btn-sm-ghost text-muted-foreground hover:text-accent-foreground p-2 h-6"}, + popover_attrs={"data-align": "end", "class": "min-w-32"}, + items=[ + { type: "item", label: "Documentation" }, + { type: "item", label: "Blog Posts" }, + { type: "item", label: "Changelog" } + ] + ) }} ++Group
+ +{% set code_group %} ++ ++{% endset %} + +{{ code_preview("input-group-group", code_group, class="w-full max-w-sm") }} \ No newline at end of file diff --git a/docs/src/components/item.njk b/docs/src/components/item.njk new file mode 100644 index 0000000..eacbaeb --- /dev/null +++ b/docs/src/components/item.njk @@ -0,0 +1,320 @@ +--- +layout: layouts/page.njk +title: Item +description: A versatile component that you can use to display any content. +toc: + - label: Usage + id: usage + - label: Examples + id: examples + children: + - label: Variants + id: example-variants + - label: Size + id: example-size + - label: Icon + id: example-icon + - label: Avatar + id: example-avatar + - label: Image + id: example-image + - label: Group + id: example-group + - label: Header + id: example-header + - label: Link + id: example-link +--- + +{% from "macros/code_block.njk" import code_block %} +{% from "macros/code_preview.njk" import code_preview %} + ++ ++{% lucide "link-2" %}+.com++ {% lucide "circle-alert" %} ++ +{% set code_basic %} + +{% endset %} + +{{ code_preview("item-basic", code_basic | prettyHtml, class="w-full max-w-md") }} + +There is no dedicated Item component in Basecoat.
+Usage
+ ++ + +Items are pure HTML composition using Tailwind utility classes. Use semantic elements like
+<article>or<a>, apply flex layout, and compose with standard HTML elements like<h3>,<p>,<img>, or<button>.Browse the examples below and copy the pattern that fits your needs.
+Examples
+ +Variants
+ +{% set code_variants %} +++{% endset %} + +{{ code_preview("item-variants", code_variants) }} + ++ + +++ +Default Variant
+Standard styling with subtle background and borders.
++ + +++ +Outline Variant
+Outlined style with clear borders and transparent background.
++ +++ +Muted Variant
+Subdued appearance with muted colors for secondary content.
+Size
+ ++ + +{{ code_preview("item-size", code_basic) }} + +Use different padding and gap sizes for compact or spacious layouts.
+Icon
+ +{% set code_icon %} ++ +{% endset %} + +{{ code_preview("item-icon", code_icon, class="max-w-lg") }} + + ++ {% lucide "shield-alert" %} ++++ +Security Alert
+New login detected from unknown device.
+Avatar
+ +{% set code_avatar %} +++{% endset %} + +{{ code_preview("item-avatar", code_avatar, class="w-full max-w-lg") }} + ++ + +
+ ++ +hunvreus
+Last seen 5 months ago
++ +++
+
+
+ ++ +No Team Members
+Invite your team to collaborate on this project.
+Image
+ +{% set code_image %} ++ ++{% endset %} + +{{ code_preview("item-image", code_image) }} + + ++ +
++ +Midnight City Lights - Electric Nights
+Neon Dreams
+++ + + +3:45
++ +
++ +Coffee Shop Conversations - Urban Stories
+The Morning Brew
+++ + + +4:05
++ +
++ +Digital Rain - Binary Beats
+Cyber Symphony
+++ +3:30
+Group
+ +{% set code_group %} +++{% endset %} + +{{ code_preview("item-group", code_group, class="w-full max-w-md") }} + + ++ + +
+ ++ +hunvreus
+hunvreus@gmail.com
+
+ ++ + +
+ ++ +shadcn
+shadcn@vercel.com
+
+ ++ +
+ ++ +adamwathan
+adam.wathan@gmail.com
+Header
+ +{% set code_header %} +++{% endset %} + +{{ code_preview("item-header", code_header) }} + ++ + ++
++v0-1.5-sm
+Everyday tasks and UI generation.
++ + ++
++v0-1.5-lg
+Advanced thinking or reasoning.
++ ++
++v0-2.0-mini
+Open Source model for everyone.
+Link
+ ++ + +{% set code_link %} +Items can be rendered as links by using an
+<a>element. Hover and focus states are applied automatically.+ ++{% endset %} + +{{ code_preview("item-link", code_link, class="w-full max-w-md") }} \ No newline at end of file diff --git a/docs/src/components/kbd.njk b/docs/src/components/kbd.njk new file mode 100644 index 0000000..da60653 --- /dev/null +++ b/docs/src/components/kbd.njk @@ -0,0 +1,76 @@ +--- +layout: layouts/page.njk +title: Kbd +description: Used to display textual user input from keyboard. +toc: + - label: Usage + id: usage + - label: Examples + id: examples + children: + - label: Group + id: example-group + - label: Button + id: example-button +--- + +{% from "macros/code_preview.njk" import code_preview %} +{% from "macros/code_block.njk" import code_block %} + +{% set code_html %} +++Visit our documentation
+Learn how to get started with our components.
++ {% lucide "chevron-right" %} ++ + + +++External resource
+Opens in a new tab with security attributes.
++ {% lucide "external-link" %} ++ ++ + ⌘ + ⇧ + ⌥ + ⌃ + + + Ctrl + + + B + ++{% endset %} + +{{ code_preview("kbd", code_html | prettyHtml) }} + +Usage
+ ++ + +{% set code_simple %} +⌘K +{% endset %} + +{{ code_block(code_simple | prettyHtml, "html") }} + +Use the
+<kbd>element with thekbdclass:Examples
+ +Group
+ +{% set group_html %} ++ Use + + Ctrl + B + Ctrl + K + + to open the command palette +
+{% endset %} + +{{ code_preview("kbd-group", group_html | prettyHtml) }} + +Button
+ +{% set button_html %} ++ + ++{% endset %} + +{{ code_preview("kbd-button", button_html | prettyHtml) }} \ No newline at end of file diff --git a/docs/src/components/progress.njk b/docs/src/components/progress.njk new file mode 100644 index 0000000..b86fb5a --- /dev/null +++ b/docs/src/components/progress.njk @@ -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 %} + ++ {% lucide "circle-alert" %} ++ +{% set code_default %} +There is no dedicated Progress component in Basecoat.
++ ++ +{% endset %} + +{{ code_preview("progress-default", code_default, class="w-full max-w-sm") }} + +Usage
+ ++ + +{% set code_usage %} +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.
++ ++{% endset %} + +{{ code_block(code_usage) }} + diff --git a/docs/src/components/spinner.njk b/docs/src/components/spinner.njk new file mode 100644 index 0000000..70bc2fe --- /dev/null +++ b/docs/src/components/spinner.njk @@ -0,0 +1,214 @@ +--- +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 %} + ++ {% lucide "circle-alert" %} ++ +{% set code_default %} +There is no dedicated Spinner component in Basecoat.
++ +{% endset %} + +{{ code_preview("spinner-default", code_default, class="w-full max-w-xs") }} + ++ {% lucide "loader-circle", { "role": "status", "aria-label": "Loading", "class": "animate-spin" } %} ++++Processing payment...
+++$100.00
+Usage
+ ++ + +Spinners are pure HTML using the
+loader-circleLucide icon with theanimate-spinTailwind utility. Addrole="status"andaria-label="Loading"for accessibility.Browse the examples below and copy the pattern that fits your needs.
+Examples
+ +Size
+ ++ + +{% set code_size %} +Use the
+size-*utility class to change the size of the spinner.+ {% 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" } %} ++{% endset %} + +{{ code_preview("spinner-size", code_size) }} + +Color
+ ++ + +{% set code_color %} +Use the
+text-*utility class to change the color of the spinner.+ {% 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" } %} ++{% endset %} + +{{ code_preview("spinner-color", code_color) }} + +Button
+ ++ + +{% set code_button %} +Add a spinner to a button to indicate a loading state.
++ + + ++{% endset %} + +{{ code_preview("spinner-button", code_button) }} + +Badge
+ +{% set code_badge %} ++ + {% lucide "loader-circle", { "role": "status", "aria-label": "Loading", "class": "animate-spin" } %} + Syncing + + + {% lucide "loader-circle", { "role": "status", "aria-label": "Loading", "class": "animate-spin" } %} + Updating + + + {% lucide "loader-circle", { "role": "status", "aria-label": "Loading", "class": "animate-spin" } %} + Processing + ++{% endset %} + +{{ code_preview("spinner-badge", code_badge) }} + +Input Group
+ ++ + +{% set code_input_group %} +Input groups can have spinners positioned inside them.
+++{% endset %} + +{{ code_preview("spinner-input-group", code_input_group, class="w-full max-w-md") }} + ++ ++ ++ {% lucide "loader-circle", { "role": "status", "aria-label": "Loading", "class": "animate-spin" } %} +++ + ++Empty
+ ++ + +{% set code_empty %} +Use a spinner in empty states to indicate a loading or processing state.
+++{% endset %} + +{{ code_preview("spinner-empty", code_empty) }} + ++ ++ {% lucide "loader-circle", { "role": "status", "aria-label": "Loading", "class": "animate-spin size-4" } %} ++Processing your request
+Please wait while we process your request. Do not refresh the page.
++ + +Item
+ +{% set code_item %} ++ +{% endset %} + +{{ code_preview("spinner-item", code_item, class="w-full max-w-md") }} \ No newline at end of file diff --git a/docs/src/installation.njk b/docs/src/installation.njk index d4eab7b..b13cb70 100644 --- a/docs/src/installation.njk +++ b/docs/src/installation.njk @@ -29,8 +29,12 @@ toc: id: install-cli - label: Use Nunjucks or Jinja macros id: install-macros + - label: Icons + id: install-icons - label: Theming id: install-theming + - label: Customization + id: install-customization --- {% from "macros/code_block.njk" import code_block %} @@ -192,6 +196,33 @@ import 'basecoat-css/tabs';{% endraw %}{% endset %} {% endcall %}{% endraw %}{% endset %} {{ code_block(code, "jinja") }} ++ {% lucide "loader-circle", { "role": "status", "aria-label": "Loading", "class": "animate-spin size-4 text-muted-foreground" } %} ++++ + +Downloading...
+129 MB / 1000 MB
+Icons
+ +++ +Basecoat uses Lucide icons. You have three options:
+ +-
+
- Copy SVG code: Visit lucide.dev/icons, click any icon to copy the SVG, and paste it directly in your HTML. Best for simple projects or occasional icon usage. +
- Install lucide: Follow the installation guide to install the
lucidepackage and dynamically render icons. Best for projects that need many icons or want tree-shaking.
+ - Use framework packages: Browse framework-specific packages (React, Vue, Angular, etc.) for component-based icon usage. Best if you're using a supported framework. +
+ + Browse icons + {% lucide "arrow-right" %} + + + Installation guide + {% lucide "arrow-right" %} + + + Packages + {% lucide "arrow-right" %} + ++Theming
diff --git a/package-lock.json b/package-lock.json index 525ffcb..df412f2 100644 --- a/package-lock.json +++ b/package-lock.json @@ -1,12 +1,12 @@ { "name": "basecoat", - "version": "0.2.0-beta.1", + "version": "0.3.2", "lockfileVersion": 3, "requires": true, "packages": { "": { "name": "basecoat", - "version": "0.2.0-beta.1", + "version": "0.3.2", "license": "MIT", "workspaces": [ "packages/*" @@ -4337,7 +4337,7 @@ }, "packages/cli": { "name": "basecoat-cli", - "version": "0.2.0-beta.1", + "version": "0.3.2", "license": "MIT", "dependencies": { "commander": "^13.1.0", @@ -4350,7 +4350,7 @@ }, "packages/css": { "name": "basecoat-css", - "version": "0.2.0-beta.1", + "version": "0.3.2", "license": "MIT" } } diff --git a/package.json b/package.json index 3fd1c46..450f439 100644 --- a/package.json +++ b/package.json @@ -1,6 +1,6 @@ { "name": "basecoat", - "version": "0.3.2", + "version": "0.3.3", "description": "shadcn/ui for the rest of us", "author": "hunvreus", "type": "module", @@ -21,8 +21,7 @@ "css", "html", "jinja", - "nunjucks", - "alpinejs" + "nunjucks" ], "license": "MIT", "repository": { diff --git a/packages/cli/package.json b/packages/cli/package.json index af8a3dd..ab9d5fc 100644 --- a/packages/cli/package.json +++ b/packages/cli/package.json @@ -1,6 +1,6 @@ { "name": "basecoat-cli", - "version": "0.3.2", + "version": "0.3.3", "description": "Add Basecoat components to your project", "author": "hunvreus", "license": "MIT", @@ -30,8 +30,7 @@ "css", "html", "jinja", - "nunjucks", - "alpinejs" + "nunjucks" ], "repository": { "type": "git", diff --git a/packages/css/package.json b/packages/css/package.json index 997c21b..bbbab26 100644 --- a/packages/css/package.json +++ b/packages/css/package.json @@ -1,6 +1,6 @@ { "name": "basecoat-css", - "version": "0.3.2", + "version": "0.3.3", "description": "Tailwind CSS for Basecoat components", "author": { "name": "hunvreus", @@ -26,8 +26,7 @@ "css", "html", "jinja", - "nunjucks", - "alpinejs" + "nunjucks" ], "repository": { "type": "git", @@ -43,6 +42,8 @@ "./css": "./dist/basecoat.css", "./all": "./dist/js/all.js", "./all.min": "./dist/js/all.min.js", + "./command": "./dist/js/command.js", + "./command.min": "./dist/js/command.min.js", "./dropdown-menu": "./dist/js/dropdown-menu.js", "./dropdown-menu.min": "./dist/js/dropdown-menu.min.js", "./popover": "./dist/js/popover.js", diff --git a/src/css/basecoat.css b/src/css/basecoat.css index 809e04c..6b2b05a 100644 --- a/src/css/basecoat.css +++ b/src/css/basecoat.css @@ -146,10 +146,6 @@ border-radius: var(--scrollbar-radius); } } - /* Alpine.js */ - [x-cloak] { - display: none !important; - } } /* Alert */ @@ -182,6 +178,30 @@ } } +/* Badge */ +@layer components { + .badge, + .badge-primary, + .badge-secondary, + .badge-destructive, + .badge-outline { + @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 { + @apply border-transparent bg-primary text-primary-foreground [a&]:hover:bg-primary/90; + } + .badge-secondary { + @apply border-transparent bg-secondary text-secondary-foreground [a&]:hover:bg-secondary/90; + } + .badge-destructive { + @apply border-transparent bg-destructive text-white [a&]:hover:bg-destructive/90 focus-visible:ring-destructive/20 dark:focus-visible:ring-destructive/40 dark:bg-destructive/60; + } + .badge-outline { + @apply text-foreground [a&]:hover:bg-accent [a&]:hover:text-accent-foreground; + } +} + /* Button */ @layer components { .btn, @@ -360,27 +380,44 @@ } } -/* Badge */ -@layer components { - .badge, - .badge-primary, - .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; +/* Button Group */ +.button-group { + @apply inline-flex w-fit items-stretch isolate; + + > *:focus-visible, + > :is(.dropdown-menu, .popover, .select) > button:focus-visible { + @apply relative z-10; } - .badge, - .badge-primary { - @apply border-transparent bg-primary text-primary-foreground [a&]:hover:bg-primary/90; + + > hr[role='separator'] { + @apply w-0 h-auto self-stretch border border-input shrink-0 m-0; } - .badge-secondary { - @apply border-transparent bg-secondary text-secondary-foreground [a&]:hover:bg-secondary/90; - } - .badge-destructive { - @apply border-transparent bg-destructive text-white [a&]:hover:bg-destructive/90 focus-visible:ring-destructive/20 dark:focus-visible:ring-destructive/40 dark:bg-destructive/60; - } - .badge-outline { - @apply text-foreground [a&]:hover:bg-accent [a&]:hover:text-accent-foreground; + + &:not([data-orientation='vertical']) { + > *:not(:first-child), + > :is(.dropdown-menu, .popover, .select):not(:first-child) > button { + @apply rounded-l-none border-l-0; + } + > *:not(:last-child), + > :is(.dropdown-menu, .popover, .select):not(:last-child) > button { + @apply rounded-r-none; + } + } + &[data-orientation='vertical'] { + @apply flex-col; + + > hr[role='separator'] { + @apply w-auto h-px; + } + + > *:not(:first-child), + > :is(.dropdown-menu, .popover, .select):not(:first-child) > button { + @apply rounded-t-none border-t-0; + } + > *:not(:last-child), + > :is(.dropdown-menu, .popover, .select):not(:last-child) > button { + @apply rounded-b-none; + } } } @@ -411,7 +448,7 @@ /* Checkbox */ @layer components { - .form input[type='checkbox']:not([role='switch']), + :is(.form, .field) input[type='checkbox']:not([role='switch']), .input[type='checkbox']:not([role='switch']) { @apply appearance-none border-input dark:bg-input/30 checked:bg-primary dark:checked:bg-primary checked:border-primary focus-visible:border-ring focus-visible:ring-ring/50 aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive size-4 shrink-0 rounded-[4px] border shadow-xs transition-shadow outline-none focus-visible:ring-[3px] disabled:cursor-not-allowed disabled:opacity-50; @@ -443,6 +480,115 @@ } } +/* Command */ +@layer components { + .command-dialog { + @apply inset-y-0 opacity-0 transition-all transition-discrete; + + &:is([open],:popover-open) { + @apply opacity-100; + + &::backdrop { + @apply opacity-100; + } + > * { + @apply scale-100; + } + + @starting-style { + @apply opacity-0; + + &::backdrop { + @apply opacity-0; + } + > * { + @apply scale-95; + } + } + } + &::backdrop { + @apply bg-black/50 opacity-0 transition-all transition-discrete; + } + > * { + @apply bg-background fixed top-[50%] left-[50%] z-50 flex flex-col w-full max-w-[calc(100%_-_2rem)] -translate-x-1/2 -translate-y-1/2 overflow-hidden rounded-lg border shadow-lg sm:max-w-lg max-h-[min(640px,calc(100%_-_2rem))]; + @apply transition-all scale-95; + + > button, + > form[method='dialog'] { + @apply absolute top-4 right-4; + } + > button, + > form[method='dialog'] > button { + @apply ring-offset-background focus:ring-ring data-[state=open]:bg-accent data-[state=open]:text-muted-foreground rounded-xs opacity-70 transition-opacity hover:opacity-100 focus:ring-2 focus:ring-offset-2 focus:outline-hidden disabled:pointer-events-none [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4; + } + } + + .command { + > header input { + @apply h-12; + } + [role='menu'] { + @apply px-2; + + [role='menuitem'] { + @apply py-3 px-2 [&_svg]:size-5; + } + [role='heading'] { + @apply px-2 py-1.5 font-medium text-muted-foreground; + } + } + } + } + + .command { + > header { + @apply flex items-center border-b px-3 gap-2; + + svg { + @apply size-4 shrink-0 opacity-50; + } + input { + @apply placeholder:text-muted-foreground flex h-10 w-full rounded-md bg-transparent py-3 text-sm outline-hidden disabled:cursor-not-allowed disabled:opacity-50; + } + } + [role='menu'] { + @apply max-h-[300px] overflow-y-auto overflow-x-hidden p-1; + + [role='menuitem'] { + @apply aria-hidden:hidden relative flex cursor-default items-center gap-2 rounded-sm px-2 py-1.5 text-sm outline-hidden select-none aria-disabled:opacity-50 aria-disabled:pointer-events-none disabled:opacity-50 disabled:pointer-events-none w-full truncate [&_svg:not([class*='text-'])]:text-muted-foreground [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4; + + &.active { + @apply bg-accent text-accent-foreground; + } + } + [role='heading'] { + @apply text-muted-foreground flex px-2 py-1.5 text-xs font-medium; + } + [role='group']:not(:has([role='menuitem']:not([aria-hidden='true']))) { + @apply hidden; + } + [role='separator'] { + @apply border-border -mx-1 my-1; + } + &:not(:has([data-value]:not([aria-hidden='true'])))::before { + @apply flex items-center justify-center py-6 px-3 text-sm truncate -m-1; + } + &[data-empty]:not(:has([data-value]:not([aria-hidden='true'])))::before { + @apply content-[attr(data-empty)]; + } + &:not([data-empty]):not(:has([data-value]:not([aria-hidden='true'])))::before { + @apply content-['No_results_found']; + } + } + &:not([data-command-initialized]) [role='menuitem'] { + @apply hover:bg-accent hover:text-accent-foreground; + } + &:has(> header input:not(:placeholder-shown)) [role='separator'] { + @apply hidden; + } + } +} + /* Dialog */ @layer components { .dialog { @@ -454,7 +600,7 @@ &::backdrop { @apply opacity-100; } - > article { + > * { @apply scale-100; } @@ -464,7 +610,7 @@ &::backdrop { @apply opacity-0; } - > article { + > * { @apply scale-95; } } @@ -472,7 +618,7 @@ &::backdrop { @apply bg-black/50 opacity-0 transition-all transition-discrete; } - > article { + > * { @apply bg-background fixed top-[50%] left-[50%] z-50 flex flex-col w-full max-w-[calc(100%_-_2rem)] -translate-x-1/2 -translate-y-1/2 gap-4 rounded-lg border p-6 shadow-lg sm:max-w-lg max-h-[calc(100%_-_2rem)]; @apply transition-all scale-95; @@ -543,21 +689,65 @@ } } +/* Field */ +@layer components { + .fieldset { + @apply flex flex-col gap-6; + + > legend { + @apply text-base font-medium mb-3; + } + } + .field { + @apply flex flex-col w-full gap-3 data-[invalid=true]:text-destructive [&>*]:w-full [&>.sr-only]:w-auto; + + h2, + h3 { + @apply flex w-fit items-center gap-2 text-sm leading-snug font-medium; + } + [role="alert"] { + @apply text-sm text-destructive font-normal; + + ul { + @apply ml-4 flex list-disc flex-col gap-1; + } + } + section { + @apply flex flex-1 flex-col gap-1.5 leading-snug; + } + + &[data-orientation='horizontal'] { + @apply flex-row items-center [&>label]:flex-auto has-[>section]:items-start has-[>section]:[&>[type=checkbox],[type=radio]]:mt-px [&_p]:text-balance; + } + } + .fieldset legend + p, + .field > p, + .field section > p { + @apply text-muted-foreground text-sm leading-normal font-normal [&>a:hover]:text-primary [&>a]:underline [&>a]:underline-offset-4; + } + .fieldset legend + p { + @apply -mt-1.5; + } + .field > p { + @apply last:mt-0 nth-last-2:-mt-1; + } +} + /* Input */ @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'], + :is(.form, .field) input[type='text'], + :is(.form, .field) input[type='email'], + :is(.form, .field) input[type='password'], + :is(.form, .field) input[type='number'], + :is(.form, .field) input[type='file'], + :is(.form, .field) input[type='tel'], + :is(.form, .field) input[type='url'], + :is(.form, .field) input[type='search'], + :is(.form, .field) input[type='date'], + :is(.form, .field) input[type='datetime-local'], + :is(.form, .field) input[type='month'], + :is(.form, .field) input[type='week'], + :is(.form, .field) input[type='time'], .input[type='text'], .input[type='email'], .input[type='password'], @@ -577,9 +767,16 @@ } } +/* Kbd */ +@layer components { + .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; + } +} + /* Label */ @layer components { - .form label, + :is(.form, .field) label, .label { @apply flex items-center gap-2 text-sm leading-none font-medium select-none peer-disabled:pointer-events-none peer-disabled:opacity-50; @@ -664,7 +861,7 @@ /* Radio */ @layer components { - .form input[type='radio'], + :is(.form, .field) input[type='radio'], .input[type='radio'] { @apply appearance-none border-input text-primary focus-visible:border-ring focus-visible:ring-ring/50 aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive dark:bg-input/30 aspect-square size-4 shrink-0 rounded-full border shadow-xs transition-[color,box-shadow] outline-none focus-visible:ring-[3px] disabled:cursor-not-allowed disabled:opacity-50 relative; @@ -676,7 +873,7 @@ /* Range */ @layer components { - .form input[type='range'], + :is(.form, .field) input[type='range'], .input[type='range'] { @apply appearance-none flex items-center p-0 outline-none; --slider-value: 20%; @@ -725,7 +922,7 @@ /* Select */ @layer components { - .form select, + :is(.form, .field) select, select.select { @apply appearance-none border-input focus-visible:border-ring focus-visible:ring-ring/50 aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive dark:bg-input/30 dark:hover:bg-input/50 flex w-fit items-center justify-between gap-2 rounded-md border bg-transparent pl-3 pr-9 py-2 text-sm whitespace-nowrap shadow-xs transition-[color,box-shadow] outline-none focus-visible:ring-[3px] disabled:cursor-not-allowed disabled:opacity-50 h-9; @apply bg-[image:var(--chevron-down-icon-50)] bg-no-repeat bg-position-[center_right_0.75rem] bg-size-[1rem]; @@ -781,6 +978,9 @@ @apply content-['No_results_found']; } } + [data-popover]:has(> header input:not(:placeholder-shown)) [role='separator'] { + @apply hidden; + } &:not([data-select-initialized]) [data-popover] [role='option'] { @apply hover:bg-accent hover:text-accent-foreground; } @@ -909,7 +1109,7 @@ /* Switch */ @layer components { - .form input[type='checkbox'][role='switch'], + :is(.form, .field) input[type='checkbox'][role='switch'], .input[type='checkbox'][role='switch'] { @apply appearance-none focus-visible:border-ring focus-visible:ring-ring/50 inline-flex h-[1.15rem] w-8 shrink-0 items-center rounded-full border border-transparent shadow-xs transition-all outline-none focus-visible:ring-[3px] disabled:cursor-not-allowed disabled:opacity-50; @apply bg-input dark:bg-input/80 checked:bg-primary dark:checked:bg-primary; @@ -971,7 +1171,7 @@ /* Textarea */ @layer components { - .form textarea, + :is(.form, .field) textarea, .textarea { @apply border-input placeholder:text-muted-foreground focus-visible:border-ring focus-visible:ring-ring/50 aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive dark:bg-input/30 flex field-sizing-content min-h-16 w-full rounded-md border bg-transparent px-3 py-2 text-base shadow-xs transition-[color,box-shadow] outline-none focus-visible:ring-[3px] disabled:cursor-not-allowed disabled:opacity-50 md:text-sm; } diff --git a/src/jinja/command.html.jinja b/src/jinja/command.html.jinja new file mode 100644 index 0000000..b05feca --- /dev/null +++ b/src/jinja/command.html.jinja @@ -0,0 +1,187 @@ +{# + Renders a standalone command menu component with search and keyboard navigation. + + @param id {string} [optional] - Unique identifier for the command component. + @param items {array} [optional] - Array of items to render (alternative to using caller). + @param placeholder {string} [optional] [default="Type a command or search..."] - Placeholder text for the search input. + @param empty_text {string} [optional] [default="No results found."] - Text displayed when no results match the search. + @param main_attrs {object} [optional] - Additional HTML attributes for the main container div. + @param input_attrs {object} [optional] - Additional HTML attributes for the search input. + @param menu_attrs {object} [optional] - Additional HTML attributes for the menu div. +#} +{% macro command( + id=None, + items=None, + placeholder="Type a command or search...", + empty_text="No results found.", + main_attrs={}, + input_attrs={}, + menu_attrs={} +) %} +{% set id = id or ("command-" ~ range(100000, 999999) | random | string) %} +++{% endmacro %} + +{# + Renders a command dialog (modal command palette). + + @param id {string} [optional] - Unique identifier for the command dialog. + @param items {array} [optional] - Array of items to render (alternative to using caller). + @param placeholder {string} [optional] [default="Type a command or search..."] - Placeholder text for the search input. + @param empty_text {string} [optional] [default="No results found."] - Text displayed when no results match the search. + @param dialog_attrs {object} [optional] - Additional HTML attributes for the dialog element. + @param input_attrs {object} [optional] - Additional HTML attributes for the search input. + @param menu_attrs {object} [optional] - Additional HTML attributes for the menu div. + @param open {boolean} [optional] [default=False] - Whether the command dialog should be open initially. +#} +{% macro command_dialog( + id=None, + items=None, + placeholder="Type a command or search...", + empty_text="No results found.", + dialog_attrs={}, + input_attrs={}, + menu_attrs={}, + open=False +) %} +{% set id = id or ("command-dialog-" ~ range(100000, 999999) | random | string) %} + +{% endmacro %} + +{# + Renders a list of items for the command component. + + @param items {array} - Array of items to render. Each item can be: + - { type: "item", label: "Text", content: "HTML", keywords: "search terms", disabled: true, attrs: {} } + - { type: "group", label: "Group Title", items: [...] } + - { type: "separator" } + Note: Use attrs to add data-label for alternative search text if needed. + @param parent_id_prefix {string} [optional] - The prefix for the item id. +#} +{% macro render_command_items(items, parent_id_prefix="items") %} + {% for item in items %} + {% set item_id = parent_id_prefix ~ "-" ~ loop.index %} + {% if item.type == "group" %} + {% set group_label_id = item.id if item.id else "group-label-" + item_id %} ++ + + + ++ {{ item.label }} + {{ render_command_items(item.items, item_id) if item.items }} ++ {% elif item.type == "separator" %} +
+ {% elif item.type == "item" or not item.type %} ++ {{ item.content | safe if item.content else item.label }} ++ {% endif %} + {% endfor %} +{% endmacro %} diff --git a/src/jinja/dialog.html.jinja b/src/jinja/dialog.html.jinja index 02f523e..74737b7 100644 --- a/src/jinja/dialog.html.jinja +++ b/src/jinja/dialog.html.jinja @@ -8,7 +8,7 @@ @param footer {string} [optional] - HTML content for the dialog footer. @param main_attrs {object} [optional] - Additional HTML attributes for the main container div. @param trigger_attrs {object} [optional] - Additional HTML attributes for the trigger button. - @param dialog_attrs {object} [optional] - Additional HTML attributes for the dialog content article. + @param dialog_attrs {object} [optional] - Additional HTML attributes for the dialog content container. @param header_attrs {object} [optional] - Additional HTML attributes for the dialog header. @param body_attrs {object} [optional] - Additional HTML attributes for the dialog body section. @param footer_attrs {object} [optional] - Additional HTML attributes for the dialog footer. @@ -53,7 +53,7 @@ {% if key != 'class' %}{{ key }}="{{ value }}"{% endif %} {% endfor %} > -+ {% if title or description %}{% endmacro %} \ No newline at end of file diff --git a/src/js/command.js b/src/js/command.js new file mode 100644 index 0000000..c4970ea --- /dev/null +++ b/src/js/command.js @@ -0,0 +1,148 @@ +(() => { + const initCommand = (container) => { + const input = container.querySelector('header input'); + const menu = container.querySelector('[role="menu"]'); + + if (!input || !menu) { + const missing = []; + if (!input) missing.push('input'); + if (!menu) missing.push('menu'); + console.error(`Command component initialization failed. Missing element(s): ${missing.join(', ')}`, container); + return; + } + + const allMenuItems = Array.from(menu.querySelectorAll('[role="menuitem"]')); + const menuItems = allMenuItems.filter(item => + !item.hasAttribute('disabled') && + item.getAttribute('aria-disabled') !== 'true' + ); + let visibleMenuItems = [...menuItems]; + let activeIndex = -1; + + const setActiveItem = (index) => { + if (activeIndex > -1 && menuItems[activeIndex]) { + menuItems[activeIndex].classList.remove('active'); + } + + activeIndex = index; + + if (activeIndex > -1) { + const activeItem = menuItems[activeIndex]; + activeItem.classList.add('active'); + if (activeItem.id) { + input.setAttribute('aria-activedescendant', activeItem.id); + } else { + input.removeAttribute('aria-activedescendant'); + } + } else { + input.removeAttribute('aria-activedescendant'); + } + }; + + const filterMenuItems = () => { + const searchTerm = input.value.trim().toLowerCase(); + + setActiveItem(-1); + + visibleMenuItems = []; + allMenuItems.forEach(item => { + const itemText = (item.dataset.label || item.textContent).trim().toLowerCase(); + const keywords = (item.dataset.keywords || '').toLowerCase(); + const matches = itemText.includes(searchTerm) || keywords.includes(searchTerm); + item.setAttribute('aria-hidden', String(!matches)); + if (matches && menuItems.includes(item)) { + visibleMenuItems.push(item); + } + }); + + if (visibleMenuItems.length > 0) { + setActiveItem(menuItems.indexOf(visibleMenuItems[0])); + visibleMenuItems[0].scrollIntoView({ block: 'nearest' }); + } + }; + + input.addEventListener('input', filterMenuItems); + + const handleKeyNavigation = (event) => { + if (!['ArrowDown', 'ArrowUp', 'Enter', 'Home', 'End'].includes(event.key)) { + return; + } + + if (event.key === 'Enter') { + event.preventDefault(); + if (activeIndex > -1) { + menuItems[activeIndex]?.click(); + } + return; + } + + if (visibleMenuItems.length === 0) return; + + event.preventDefault(); + + const currentVisibleIndex = activeIndex > -1 ? visibleMenuItems.indexOf(menuItems[activeIndex]) : -1; + let nextVisibleIndex = currentVisibleIndex; + + switch (event.key) { + case 'ArrowDown': + if (currentVisibleIndex < visibleMenuItems.length - 1) { + nextVisibleIndex = currentVisibleIndex + 1; + } + break; + case 'ArrowUp': + if (currentVisibleIndex > 0) { + nextVisibleIndex = currentVisibleIndex - 1; + } else if (currentVisibleIndex === -1) { + nextVisibleIndex = 0; + } + break; + case 'Home': + nextVisibleIndex = 0; + break; + case 'End': + nextVisibleIndex = visibleMenuItems.length - 1; + break; + } + + if (nextVisibleIndex !== currentVisibleIndex) { + const newActiveItem = visibleMenuItems[nextVisibleIndex]; + setActiveItem(menuItems.indexOf(newActiveItem)); + newActiveItem.scrollIntoView({ block: 'nearest', behavior: 'smooth' }); + } + }; + + menu.addEventListener('mousemove', (event) => { + const menuItem = event.target.closest('[role="menuitem"]'); + if (menuItem && visibleMenuItems.includes(menuItem)) { + const index = menuItems.indexOf(menuItem); + if (index !== activeIndex) { + setActiveItem(index); + } + } + }); + + menu.addEventListener('click', (event) => { + const clickedItem = event.target.closest('[role="menuitem"]'); + if (clickedItem && visibleMenuItems.includes(clickedItem)) { + const dialog = container.closest('dialog.command-dialog'); + if (dialog && !clickedItem.hasAttribute('data-keep-command-open')) { + dialog.close(); + } + } + }); + + input.addEventListener('keydown', handleKeyNavigation); + + if (visibleMenuItems.length > 0) { + setActiveItem(menuItems.indexOf(visibleMenuItems[0])); + visibleMenuItems[0].scrollIntoView({ block: 'nearest' }); + } + + container.dataset.commandInitialized = true; + container.dispatchEvent(new CustomEvent('basecoat:initialized')); + }; + + if (window.basecoat) { + window.basecoat.register('command', '.command:not([data-command-initialized])', initCommand); + } +})(); diff --git a/src/js/select.js b/src/js/select.js index 8e10dc8..352dcb8 100644 --- a/src/js/select.js +++ b/src/js/select.js @@ -16,7 +16,8 @@ return; } - const options = Array.from(listbox.querySelectorAll('[role="option"]')); + const allOptions = Array.from(listbox.querySelectorAll('[role="option"]')); + const options = allOptions.filter(opt => opt.getAttribute('aria-disabled') !== 'true'); let visibleOptions = [...options]; let activeIndex = -1; @@ -69,7 +70,7 @@ const resetFilter = () => { filter.value = ''; visibleOptions = [...options]; - options.forEach(opt => opt.setAttribute('aria-hidden', 'false')); + allOptions.forEach(opt => opt.setAttribute('aria-hidden', 'false')); }; if (hasTransition()) { @@ -110,11 +111,11 @@ setActiveOption(-1); visibleOptions = []; - options.forEach(option => { + allOptions.forEach(option => { const optionText = (option.dataset.label || option.textContent).trim().toLowerCase(); const matches = optionText.includes(searchTerm); option.setAttribute('aria-hidden', String(!matches)); - if (matches) { + if (matches && options.includes(option)) { visibleOptions.push(option); } }); diff --git a/src/nunjucks/command.njk b/src/nunjucks/command.njk new file mode 100644 index 0000000..f3b6b84 --- /dev/null +++ b/src/nunjucks/command.njk @@ -0,0 +1,187 @@ +{# + Renders a standalone command menu component with search and keyboard navigation. + + @param id {string} [optional] - Unique identifier for the command component. + @param items {array} [optional] - Array of items to render (alternative to using caller). + @param placeholder {string} [optional] [default="Type a command or search..."] - Placeholder text for the search input. + @param empty_text {string} [optional] [default="No results found."] - Text displayed when no results match the search. + @param main_attrs {object} [optional] - Additional HTML attributes for the main container div. + @param input_attrs {object} [optional] - Additional HTML attributes for the search input. + @param menu_attrs {object} [optional] - Additional HTML attributes for the menu div. +#} +{% macro command( + id=None, + items=None, + placeholder="Type a command or search...", + empty_text="No results found.", + main_attrs={}, + input_attrs={}, + menu_attrs={} +) %} +{% set id = id or ("command-" + (range(100000, 999999) | random | string)) %} +{% endif %} - + ++{% endmacro %} + +{# + Renders a command dialog (modal command palette). + + @param id {string} [optional] - Unique identifier for the command dialog. + @param items {array} [optional] - Array of items to render (alternative to using caller). + @param placeholder {string} [optional] [default="Type a command or search..."] - Placeholder text for the search input. + @param empty_text {string} [optional] [default="No results found."] - Text displayed when no results match the search. + @param dialog_attrs {object} [optional] - Additional HTML attributes for the dialog element. + @param input_attrs {object} [optional] - Additional HTML attributes for the search input. + @param menu_attrs {object} [optional] - Additional HTML attributes for the menu div. + @param open {boolean} [optional] [default=false] - Whether the command dialog should be open initially. +#} +{% macro command_dialog( + id=None, + items=None, + placeholder="Type a command or search...", + empty_text="No results found.", + dialog_attrs={}, + input_attrs={}, + menu_attrs={}, + open=false +) %} +{% set id = id or ("command-dialog-" + (range(100000, 999999) | random | string)) %} + +{% endmacro %} + +{# + Renders a list of items for the command component. + + @param items {array} - Array of items to render. Each item can be: + - { type: "item", label: "Text", content: "HTML", keywords: "search terms", disabled: true, attrs: {} } + - { type: "group", label: "Group Title", items: [...] } + - { type: "separator" } + Note: Use attrs to add data-label for alternative search text if needed. + @param parent_id_prefix {string} [optional] - The prefix for the item id. +#} +{% macro render_command_items(items, parent_id_prefix="items") %} + {% for item in items %} + {% set item_id = parent_id_prefix ~ "-" ~ loop.index %} + {% if item.type == "group" %} + {% set group_label_id = item.id if item.id else "group-label-" + item_id %} ++ + + + ++ {{ item.label }} + {{ render_command_items(item.items, item_id) if item.items }} ++ {% elif item.type == "separator" %} +
+ {% elif item.type == "item" or not item.type %} ++ {{ item.content | safe if item.content else item.label }} ++ {% endif %} + {% endfor %} +{% endmacro %} diff --git a/src/nunjucks/dialog.njk b/src/nunjucks/dialog.njk index d5d05b5..52e2edb 100644 --- a/src/nunjucks/dialog.njk +++ b/src/nunjucks/dialog.njk @@ -8,7 +8,7 @@ @param footer {string} [optional] - HTML content for the dialog footer. @param main_attrs {object} [optional] - Additional HTML attributes for the main container div. @param trigger_attrs {object} [optional] - Additional HTML attributes for the trigger button. - @param dialog_attrs {object} [optional] - Additional HTML attributes for the dialog content article. + @param dialog_attrs {object} [optional] - Additional HTML attributes for the dialog content container. @param header_attrs {object} [optional] - Additional HTML attributes for the dialog header. @param body_attrs {object} [optional] - Additional HTML attributes for the dialog body section. @param footer_attrs {object} [optional] - Additional HTML attributes for the dialog footer. @@ -53,7 +53,7 @@ {% if key != 'class' %}{{ key }}="{{ value }}"{% endif %} {% endfor %} > -+ {% if title or description %}{% endmacro %} \ No newline at end of file{% endif %} - +