@pokle/basecoat 0.3.10-beta2.pokle

package/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 %}
+
+<div class="alert mb-6">
+  {% lucide "circle-alert" %}
+  <h2>There is no dedicated Input Group component in Basecoat.</h2>
+</div>
+
+{% set code_default %}
+<div class="grid gap-6">
+  <div class="relative">
+    <input type="text" class="input pl-9 pr-20" placeholder="Search...">
+    <div class="absolute left-3 top-1/2 -translate-y-1/2 pointer-events-none text-muted-foreground [&>svg]:size-4">
+      {% lucide "search" %}
+    </div>
+    <div class="absolute right-3 top-1/2 -translate-y-1/2 pointer-events-none text-muted-foreground text-sm">12 results</div>
+  </div>
+
+  <div class="relative">
+    <input type="text" class="input pl-15 pr-9" placeholder="example.com">
+    <div class="absolute left-3 top-1/2 -translate-y-1/2 pointer-events-none text-muted-foreground text-sm">https://</div>
+    <div class="absolute right-3 top-1/2 -translate-y-1/2 text-muted-foreground [&>svg]:size-4" data-tooltip="This is content in a tooltip.">{% lucide "info" %}</div>
+  </div>
+
+  <div class="relative">
+    <textarea class="textarea pr-10 min-h-27 pb-12" placeholder="Ask, Search or Chat..."></textarea>
+    <footer role="group" class="absolute bottom-0 px-3 pb-3 pt-1.5 flex items-center w-full gap-2">
+      <button type="button" class="btn-icon-outline rounded-full size-6 text-muted-foreground hover:text-accent-foreground">
+        {% lucide "plus" %}
+      </button>
+      {{ dropdown_menu(
+        id="demo-dropdown-menu",
+        trigger="Auto",
+        trigger_attrs={"class": "btn-sm-ghost text-muted-foreground hover:text-accent-foreground h-6 p-2"},
+        popover_attrs={"data-side": "top", "class": "min-w-32"},
+        items=[
+          { type: "item", label: "Auto" },
+          { type: "item", label: "Agent" },
+          { type: "item", label: "Manual" }
+        ]
+      ) }}
+      <div class="text-muted-foreground text-sm ml-auto">52% used</div>
+      <hr class="w-0 h-4 border-r border-border shrink-0 m-0">
+      <button type="button" class="btn-icon rounded-full size-6 bg-muted-foreground hover:bg-foreground" disabled>
+        {% lucide "arrow-up" %}
+      </button>
+    </footer>
+  </div>
+
+  <div class="relative">
+    <input type="text" class="input pr-9" placeholder="@shadcn">
+    <div class="absolute right-3 top-1/2 -translate-y-1/2 pointer-events-none bg-primary text-primary-foreground flex size-4 items-center justify-center rounded-full [&>svg]:size-3">{% lucide "check" %}</div>
+  </div>
+</div>
+{% endset %}
+
+{{ code_preview("input-group-default", code_default, class="w-full max-w-sm") }}
+
+<h2 id="usage"><a href="#usage">Usage</a></h2>
+
+<section class="prose">
+  <p>Input groups are pure HTML composition using Tailwind utility classes. There is no dedicated component: use <code>relative</code> positioning on a wrapper, add your content with <code>absolute</code> positioning, and adjust input padding to make room.</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-icon"><a href="#example-icon">Icon</a></h3>
+
+{% set code_icon %}
+<div class="grid gap-6">
+  <div class="relative">
+    <input type="text" class="input pl-9" placeholder="Search...">
+    <div class="absolute left-3 top-1/2 -translate-y-1/2 pointer-events-none text-muted-foreground [&>svg]:size-4">
+      {% lucide "search" %}
+    </div>
+  </div>
+
+  <div class="relative">
+    <input type="email" class="input pl-9" placeholder="Enter your email">
+    <div class="absolute left-3 top-1/2 -translate-y-1/2 pointer-events-none text-muted-foreground [&>svg]:size-4">
+      {% lucide "mail" %}
+    </div>
+  </div>
+
+  <div class="relative">
+    <input type="text" class="input px-9" placeholder="Card number">
+    <div class="absolute left-3 top-1/2 -translate-y-1/2 pointer-events-none text-muted-foreground [&>svg]:size-4">
+      {% lucide "credit-card" %}
+    </div>
+    <div class="absolute right-3 top-1/2 -translate-y-1/2 pointer-events-none text-muted-foreground [&>svg]:size-4">
+      {% lucide "check" %}
+    </div>
+  </div>
+
+  <div class="relative">
+    <input type="text" class="input pr-16" placeholder="Card number">
+    <div class="absolute right-3 top-1/2 -translate-y-1/2 pointer-events-none text-muted-foreground [&>svg]:size-4 flex items-center gap-2">
+      {% lucide "star" %}
+      {% lucide "info" %}
+    </div>
+  </div>
+</div>
+{% endset %}
+
+{{ code_preview("input-group-icon-prefix", code_icon, class="w-full max-w-sm") }}
+
+<h3 id="example-text"><a href="#example-text">Text</a></h3>
+
+{% set code_text %}
+<div class="grid gap-6">
+  <div class="relative">
+    <input type="text" class="input pl-7 pr-12" placeholder="0.00">
+    <div class="absolute left-3 top-1/2 -translate-y-1/2 pointer-events-none text-muted-foreground text-sm">$</div>
+    <div class="absolute right-3 top-1/2 -translate-y-1/2 pointer-events-none text-muted-foreground text-sm">USD</div>
+  </div>
+
+  <div class="relative">
+    <input type="text" class="input pl-15 pr-12" placeholder="example.com">
+    <div class="absolute left-3 top-1/2 -translate-y-1/2 pointer-events-none text-muted-foreground text-sm">https://</div>
+    <div class="absolute right-3 top-1/2 -translate-y-1/2 pointer-events-none text-muted-foreground text-sm">.com</div>
+  </div>
+
+  <div class="relative">
+    <input type="text" class="input pr-30" placeholder="Enter your username">
+    <div class="absolute right-3 top-1/2 -translate-y-1/2 pointer-events-none text-muted-foreground text-sm">@company.com</div>
+  </div>
+
+  <div class="relative">
+    <textarea class="textarea pr-10 min-h-25 pb-12" placeholder="Enter your message"></textarea>
+    <footer role="group" class="absolute bottom-0 px-3 pb-3 pt-1.5 flex items-center w-full gap-2">
+      <div class="text-muted-foreground text-sm">120 characters left</div>
+    </footer>
+  </div>
+</div>
+{% endset %}
+
+{{ code_preview("input-group-text", code_text, class="w-full max-w-sm") }}
+
+<h3 id="example-button"><a href="#example-button">Button</a></h3>
+
+{% set code_button %}
+<div class="grid gap-6">
+  <div class="relative">
+    <input type="text" readonly class="input pr-9" value="https://x.com/hunvreus">
+    <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">
+    <button
+      aria-pressed="false" 
+      onclick="this.ariaPressed = this.ariaPressed === 'true' ? 'false' : 'true'"
+      class="absolute right-1.5 top-1/2 -translate-y-1/2 btn-icon-ghost text-muted-foreground hover:text-accent-foreground size-6 rounded-full aria-pressed:bg-transparent aria-pressed:hover:bg-accent dark:aria-pressed:hover:bg-accent/50 aria-pressed:text-blue-600 aria-pressed:[&>svg]:fill-blue-600"
+    >{% lucide "star" %}</button>
+    <div class="absolute left-1.5 top-1/2 -translate-y-1/2 flex items-center gap-1 z-10">
+      {% 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"}
+      ) %}
+        <h3 class="font-medium mb-1">Your connection is not secure.</h3>
+        <p>You should not enter any sensitive information on this site.</p>
+      {% endcall %}
+      <div class="text-muted-foreground text-sm pointer-events-none">https://</div>
+    </div>
+  </div>
+
+  <div class="relative">
+    <input type="text" readonly class="input pr-9" placeholder="Type to search...">
+    <button type="button" class="absolute right-1.5 top-1/2 -translate-y-1/2 btn-secondary h-6 p-2 rounded">Search</button>
+  </div>
+</div>
+{% endset %}
+
+{{ code_preview("input-group-button", code_button, class="w-full max-w-sm") }}
+
+<h3 id="example-tooltip"><a href="#example-tooltip">Tooltip</a></h3>
+
+{% set code_tooltip %}
+<div class="grid gap-6">
+  <div class="relative">
+    <input type="password" class="input pr-9" placeholder="Enter password">
+    <div class="absolute right-3 top-1/2 -translate-y-1/2 text-muted-foreground [&>svg]:size-4" data-tooltip="Password must be at least 8 characters long.">{% lucide "info" %}</div>
+  </div>
+
+  <div class="relative">
+    <input type="email" class="input pr-9" placeholder="Your email address">
+    <div class="absolute right-3 top-1/2 -translate-y-1/2 text-muted-foreground [&>svg]:size-4" data-tooltip="We'll use this to send your notifications.">{% lucide "circle-help" %}</div>
+  </div>
+
+  <div class="relative">
+    <input type="email" class="input pl-9" placeholder="Your email address">
+    <div class="absolute left-3 top-1/2 -translate-y-1/2 text-muted-foreground [&>svg]:size-4" data-tooltip="Click for help with API keys." data-side="left">{% lucide "circle-help" %}</div>
+  </div>
+</div>
+{% endset %}
+
+{{ code_preview("input-group-tooltip", code_tooltip, class="w-full max-w-sm") }}
+
+<h3 id="example-textarea"><a href="#example-textarea">Textarea</a></h3>
+
+{% set code_textarea %}
+<div class="relative">
+  <textarea class="textarea pt-15 pb-17 min-h-77" placeholder="console.log('Hello, world!')."></textarea>
+  <header class="absolute top-0 flex items-center w-full gap-2 p-3 border-b">
+    <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="tabler-icon tabler-icon-brand-javascript size-4 text-muted-foreground"><path d="M20 4l-2 14.5l-6 2l-6 -2l-2 -14.5z"></path><path d="M7.5 8h3v8l-2 -1"></path><path d="M16.5 8h-2.5a.5 .5 0 0 0 -.5 .5v3a.5 .5 0 0 0 .5 .5h1.423a.5 .5 0 0 1 .495 .57l-.418 2.93l-2 .5"></path></svg>
+    <span class="font-mono text-sm text-muted-foreground mr-auto">script.js</span>
+    <button class="btn-sm-icon-ghost text-muted-foreground hover:text-accent-foreground size-6">
+      {% lucide "refresh-ccw" %}
+    </button>
+    <button class="btn-sm-icon-ghost text-muted-foreground hover:text-accent-foreground size-6">
+      {% lucide "copy" %}
+    </button>
+  </header>
+  <footer class="absolute bottom-0 flex items-center w-full gap-2 p-3 border-t">
+    <span class="text-sm text-muted-foreground mr-auto">Line 1, Column 1</span>
+    <button type="button" class="btn-sm">
+      Run
+      {% lucide "corner-down-left" %}
+    </button>
+  </footer>
+</div>
+{% endset %}
+
+{{ code_preview("input-group-textarea", code_textarea, class="w-full max-w-md") }}
+
+<h3 id="example-spinner"><a href="#example-spinner">Spinner</a></h3>
+
+{% set code_spinner %}
+<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 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 opacity-50">
+      {% lucide "loader-circle", { "class": "animate-spin" } %}
+    </div>
+  </div>
+
+  <div class="relative">
+    <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">
+        {% 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 opacity-50">
+      {% lucide "loader", { "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...
+    </div>
+  </div>
+</div>
+{% endset %}
+
+{{ code_preview("input-group-spinner", code_spinner, class="w-full max-w-md") }}
+
+<h3 id="example-dropdown"><a href="#example-dropdown">Dropdown</a></h3>
+
+{% set code_dropdown %}
+<div class="grid gap-6">
+  <div class="relative">
+    <input type="text" class="input pr-9" placeholder="Enter file name">
+    {% 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" }
+      ]
+    ) }}
+  </div>
+
+  <div class="relative">
+    <input type="text" class="input pr-30" placeholder="Enter search query">
+    {% 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" }
+      ]
+    ) }}
+  </div>
+</div>
+{% endset %}
+
+{{ code_preview("input-group-dropdown", code_dropdown, class="w-full max-w-sm") }}
+
+<h3 id="example-group"><a href="#example-group">Group</a></h3>
+
+{% set code_group %}
+<div class="flex w-fit items-stretch">
+  <label for="url" class="text-sm flex items-center bg-muted border border-r-0 px-4 rounded-l-md shadow-xs">https://</label>
+  <div class="relative">
+    <input type="text" class="input pr-9 rounded-none">
+    <div class="absolute right-3 top-1/2 -translate-y-1/2 text-muted-foreground [&>svg]:size-4">{% lucide "link-2" %}</div>
+  </div>
+  <div class="text-sm flex items-center bg-muted border border-l-0 px-4 rounded-r-md shadow-xs">.com</div>
+</div>
+{% endset %}
+
+{{ code_preview("input-group-group", code_group, class="w-full max-w-sm") }}

package/docs/src/components/input.njk

@@ -0,0 +1,90 @@
+---
+layout: layouts/page.njk
+title: Input
+description: Displays a form input field or a component that looks like an input field.
+toc:
+  - label: Usage
+    id: usage
+  - label: Examples
+    id: examples
+    children:
+      - label: Default
+        id: example-default
+      - label: Invalid
+        id: example-invalid
+      - label: Disabled
+        id: example-disabled
+      - label: With label
+        id: example-with-label
+      - label: With text
+        id: example-with-text
+      - label: With button
+        id: example-with-button
+      - label: Form
+        id: example-form
+---
+
+{% from "macros/code_preview.njk" import code_preview %}
+{% from "macros/code_block.njk" import code_block %}
+
+{% set code %}<input class="input" type="email" placeholder="Email">{% endset %}
+{{ code_preview("input", code) }}
+
+<h2 id="usage">Usage</h2>
+
+<section class="prose">
+  <p>Simply add the <code>input</code> class to your <code>&lt;input&gt;</code> element or have a parent with the <code>form</code> class (<a href="/components/form">read more about form</a>). You can also set the <code>aria-invalid</code> attribute to <code>true</code> to make the input invalid.</p>
+</section>
+
+{{ code_block(code) }}
+
+<h2 id="examples"><a href="#examples">Examples</a></h2>
+
+{{ code_preview("input-default", code) }}
+
+<h3 id="example-invalid"><a href="#example-invalid">Invalid</a></h3>
+
+{% set code %}<input class="input" type="email" placeholder="Email" aria-invalid="true">{% endset %}
+{{ code_preview("input-invalid", code) }}
+
+<h3 id="example-disabled"><a href="#example-disabled">Disabled</a></h3>
+
+{% set code %}<input class="input" type="email" placeholder="Email" disabled>{% endset %}
+{{ code_preview("input-disabled", code) }}
+
+<h3 id="example-with-label"><a href="#example-with-label">With label</a></h3>
+
+{% set code %}<div class="grid gap-3">
+  <label for="input-with-label" class="label">Label</label>
+  <input class="input" id="input-with-label" type="email" placeholder="Email">
+</div>{% endset %}
+{{ code_preview("input-with-label", code) }}
+
+<h3 id="example-with-text"><a href="#example-with-text">With text</a></h3>
+
+{% set code %}<div class="grid gap-3">
+  <label for="input-with-text" class="label">Label</label>
+  <input class="input" id="input-with-text" type="email" placeholder="Email">
+  <p class="text-muted-foreground text-sm">Fill in your email address.</p>
+</div>{% endset %}
+{{ code_preview("input-with-text", code) }}
+
+<h3 id="example-with-button"><a href="#example-with-button">With button</a></h3>
+
+{% set code %}<div class="flex items-center space-x-2">
+  <input class="input" type="email" placeholder="Email">
+  <button type="submit" class="btn">Submit</button>
+</div>{% endset %}
+{{ code_preview("textarea-form", code) }}
+
+<h3 id="example-form"><a href="#example-form">Form</a></h3>
+
+{% set code %}<form class="form space-y-6 w-full">
+  <div class="grid gap-3">
+    <label for="input-form" class="label">Username</label>
+    <input class="input" id="input-form" type="text" placeholder="hunvreus">
+    <p class="text-muted-foreground text-sm">This is your public display name.</p>
+  </div>
+  <button type="submit" class="btn">Submit</button>
+</form>{% endset %}
+{{ code_preview("input-form", code, "w-full max-w-sm") }}