anchor_view_components 0.1.0

checksums.yaml

@@ -0,0 +1,7 @@
+---
+SHA256:
+  metadata.gz: 4a1787b8586a125669bb568cb6b27c5220354508e979264e44937291012380c7
+  data.tar.gz: f324e897a30739899f50a581c0242d312394ee79007de490d0ceb57616d003bb
+SHA512:
+  metadata.gz: d8752971ee67126aa612523a7ff44257a007c732df8d13361ee3fc701a551b451b4e2130b82eaba165b7663b862c3a22cd60239c5250c68dadbf9d5aad2fa5de
+  data.tar.gz: ce47a488e3b0207870ca973717bbf5be2dfd2555da5d822ec2363438c69ea7f9b4e5d42d1654ee846ad1bc84d5a4f96dd810581864414335cb25fcc3d14f05dc

data/CHANGELOG.md

@@ -0,0 +1,5 @@
+# Changelog
+
+## 0.1.0 - 2023-07-27
+
+- Initial release

data/LICENSE.txt

@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) [year] [fullname]
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

data/README.md

@@ -0,0 +1,61 @@
+# Anchor ViewComponents
+
+[ViewComponents] for Buoy’s Anchor Design System.
+
+[ViewComponents]: https://github.com/github/view_component
+
+## Dependencies
+
+- [Stimulus]
+
+[Stimulus]: https://stimulus.hotwired.dev
+
+## Installation
+
+1. Add `anchor_view_components` to your Gemfile and install:
+
+    ```bash
+    bundle add anchor_view_components && bundle install
+    ```
+
+2. Add `@buoysoftware/anchor-view-components` to your package.json and install:
+
+    ```bash
+    yarn add @buoysoftware/anchor-view-components && yarn
+    ```
+
+3. In `config/application.rb`, add the following statement:
+
+    ```rb
+    require "anchor/view_components/engine"
+    ```
+
+4. Add Anchor’s CSS to your application layout:
+
+    ```erb
+    <%= stylesheet_link_tag "anchor-view-components" %>
+    ```
+
+5. Import Anchor’s Stimulus controllers and register them:
+
+    ```js
+    import { registerAnchorControllers } from "@buoysoftware/anchor-view-components";
+
+    registerAnchorControllers(application);
+    ```
+
+6. Optionally, if you need Anchor’s Tailwind configuration to use its colors,
+   fonts, and other design system values, add the following to your project’s
+   `tailwind.config.js`:
+
+    ```js
+    presets: [require("@buoysoftware/anchor-view-components/tailwind.config.js")]
+    ```
+
+## Development
+
+TODO
+
+## License
+
+The gem is available as open source under the terms of the [MIT License](https://opensource.org/licenses/MIT).

data/app/assets/builds/anchor-view-components.css

@@ -0,0 +1 @@
+/*! tailwindcss v3.3.3 | MIT License | https://tailwindcss.com*/*,:after,:before{box-sizing:border-box;border:0 solid #e5e7eb}:after,:before{--tw-content:""}html{line-height:1.5;-webkit-text-size-adjust:100%;-moz-tab-size:4;-o-tab-size:4;tab-size:4;font-family:ui-sans-serif,system-ui,-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Helvetica Neue,Arial,Noto Sans,sans-serif,Apple Color Emoji,Segoe UI Emoji,Segoe UI Symbol,Noto Color Emoji;font-feature-settings:normal;font-variation-settings:normal}body{margin:0;line-height:inherit}hr{height:0;color:inherit;border-top-width:1px}abbr:where([title]){-webkit-text-decoration:underline dotted;text-decoration:underline dotted}h1,h2,h3,h4,h5,h6{font-size:inherit;font-weight:inherit}a{color:inherit;text-decoration:inherit}b,strong{font-weight:bolder}code,kbd,pre,samp{font-family:ui-monospace,SFMono-Regular,Menlo,Monaco,Consolas,Liberation Mono,Courier New,monospace;font-size:1em}small{font-size:80%}sub,sup{font-size:75%;line-height:0;position:relative;vertical-align:initial}sub{bottom:-.25em}sup{top:-.5em}table{text-indent:0;border-color:inherit;border-collapse:collapse}button,input,optgroup,select,textarea{font-family:inherit;font-feature-settings:inherit;font-variation-settings:inherit;font-size:100%;font-weight:inherit;line-height:inherit;color:inherit;margin:0;padding:0}button,select{text-transform:none}[type=button],[type=reset],[type=submit],button{-webkit-appearance:button;background-color:initial;background-image:none}:-moz-focusring{outline:auto}:-moz-ui-invalid{box-shadow:none}progress{vertical-align:initial}::-webkit-inner-spin-button,::-webkit-outer-spin-button{height:auto}[type=search]{-webkit-appearance:textfield;outline-offset:-2px}::-webkit-search-decoration{-webkit-appearance:none}::-webkit-file-upload-button{-webkit-appearance:button;font:inherit}summary{display:list-item}blockquote,dd,dl,figure,h1,h2,h3,h4,h5,h6,hr,p,pre{margin:0}fieldset{margin:0}fieldset,legend{padding:0}menu,ol,ul{list-style:none;margin:0;padding:0}dialog{padding:0}textarea{resize:vertical}input::-moz-placeholder,textarea::-moz-placeholder{opacity:1;color:#9ca3af}input::placeholder,textarea::placeholder{opacity:1;color:#9ca3af}[role=button],button{cursor:pointer}:disabled{cursor:default}audio,canvas,embed,iframe,img,object,svg,video{display:block;vertical-align:middle}img,video{max-width:100%;height:auto}[hidden]{display:none}[popover]{position:fixed;z-index:2147483647;inset:0;padding:.25em;width:-moz-fit-content;width:fit-content;height:-moz-fit-content;height:fit-content;border:initial solid;border-color:initial;-o-border-image:initial;border-image:initial;background-color:canvas;color:initial;overflow:auto;margin:auto}[popover]:not(.\:popover-open){display:none}[popover]:is(dialog[open]){display:revert}@supports not (background-color:canvas){[popover]{background-color:#fff;color:#000}}@supports (width:-moz-fit-content){[popover]{width:-moz-fit-content;height:-moz-fit-content}}@supports not (inset:0){[popover]{top:0;left:0;right:0;bottom:0}}*,::backdrop,:after,:before{--tw-border-spacing-x:0;--tw-border-spacing-y:0;--tw-translate-x:0;--tw-translate-y:0;--tw-rotate:0;--tw-skew-x:0;--tw-skew-y:0;--tw-scale-x:1;--tw-scale-y:1;--tw-pan-x: ;--tw-pan-y: ;--tw-pinch-zoom: ;--tw-scroll-snap-strictness:proximity;--tw-gradient-from-position: ;--tw-gradient-via-position: ;--tw-gradient-to-position: ;--tw-ordinal: ;--tw-slashed-zero: ;--tw-numeric-figure: ;--tw-numeric-spacing: ;--tw-numeric-fraction: ;--tw-ring-inset: ;--tw-ring-offset-width:0px;--tw-ring-offset-color:#fff;--tw-ring-color:#3b82f680;--tw-ring-offset-shadow:0 0 #0000;--tw-ring-shadow:0 0 #0000;--tw-shadow:0 0 #0000;--tw-shadow-colored:0 0 #0000;--tw-blur: ;--tw-brightness: ;--tw-contrast: ;--tw-grayscale: ;--tw-hue-rotate: ;--tw-invert: ;--tw-saturate: ;--tw-sepia: ;--tw-drop-shadow: ;--tw-backdrop-blur: ;--tw-backdrop-brightness: ;--tw-backdrop-contrast: ;--tw-backdrop-grayscale: ;--tw-backdrop-hue-rotate: ;--tw-backdrop-invert: ;--tw-backdrop-opacity: ;--tw-backdrop-saturate: ;--tw-backdrop-sepia: }.prose{color:#101112;max-width:65ch}.prose :where(p):not(:where([class~=not-prose] *)){margin-top:1.25em;margin-bottom:1.25em}.prose :where([class~=lead]):not(:where([class~=not-prose] *)){color:var(--tw-prose-lead);font-size:1.25em;line-height:1.6;margin-top:1.2em;margin-bottom:1.2em}.prose :where(a):not(:where([class~=not-prose] *)){color:var(--tw-prose-links);text-decoration:underline;font-weight:500}.prose :where(strong):not(:where([class~=not-prose] *)){color:var(--tw-prose-bold);font-weight:600}.prose :where(a strong):not(:where([class~=not-prose] *)){color:inherit}.prose :where(blockquote strong):not(:where([class~=not-prose] *)){color:inherit}.prose :where(thead th strong):not(:where([class~=not-prose] *)){color:inherit}.prose :where(ol):not(:where([class~=not-prose] *)){list-style-type:decimal;margin-top:1.25em;margin-bottom:1.25em;padding-left:1.625em}.prose :where(ol[type=A]):not(:where([class~=not-prose] *)){list-style-type:upper-alpha}.prose :where(ol[type=a]):not(:where([class~=not-prose] *)){list-style-type:lower-alpha}.prose :where(ol[type=A s]):not(:where([class~=not-prose] *)){list-style-type:upper-alpha}.prose :where(ol[type=a s]):not(:where([class~=not-prose] *)){list-style-type:lower-alpha}.prose :where(ol[type=I]):not(:where([class~=not-prose] *)){list-style-type:upper-roman}.prose :where(ol[type=i]):not(:where([class~=not-prose] *)){list-style-type:lower-roman}.prose :where(ol[type=I s]):not(:where([class~=not-prose] *)){list-style-type:upper-roman}.prose :where(ol[type=i s]):not(:where([class~=not-prose] *)){list-style-type:lower-roman}.prose :where(ol[type="1"]):not(:where([class~=not-prose] *)){list-style-type:decimal}.prose :where(ul):not(:where([class~=not-prose] *)){list-style-type:disc;margin-top:1.25em;margin-bottom:1.25em;padding-left:1.625em}.prose :where(ol>li):not(:where([class~=not-prose] *))::marker{font-weight:400;color:var(--tw-prose-counters)}.prose :where(ul>li):not(:where([class~=not-prose] *))::marker{color:var(--tw-prose-bullets)}.prose :where(hr):not(:where([class~=not-prose] *)){border-color:var(--tw-prose-hr);border-top-width:1px;margin-top:3em;margin-bottom:3em}.prose :where(blockquote):not(:where([class~=not-prose] *)){font-weight:500;font-style:italic;color:var(--tw-prose-quotes);border-left-width:.25rem;border-left-color:var(--tw-prose-quote-borders);quotes:"\201C""\201D""\2018""\2019";margin-top:1.6em;margin-bottom:1.6em;padding-left:1em}.prose :where(blockquote p:first-of-type):not(:where([class~=not-prose] *)):before{content:open-quote}.prose :where(blockquote p:last-of-type):not(:where([class~=not-prose] *)):after{content:close-quote}.prose :where(h1):not(:where([class~=not-prose] *)){color:var(--tw-prose-headings);font-weight:800;font-size:2.25em;margin-top:0;margin-bottom:.8888889em;line-height:1.1111111}.prose :where(h1 strong):not(:where([class~=not-prose] *)){font-weight:900;color:inherit}.prose :where(h2):not(:where([class~=not-prose] *)){color:var(--tw-prose-headings);font-weight:700;font-size:1.5em;margin-top:2em;margin-bottom:1em;line-height:1.3333333}.prose :where(h2 strong):not(:where([class~=not-prose] *)){font-weight:800;color:inherit}.prose :where(h3):not(:where([class~=not-prose] *)){color:var(--tw-prose-headings);font-weight:600;font-size:1.25em;margin-top:1.6em;margin-bottom:.6em;line-height:1.6}.prose :where(h3 strong):not(:where([class~=not-prose] *)){font-weight:700;color:inherit}.prose :where(h4):not(:where([class~=not-prose] *)){color:var(--tw-prose-headings);font-weight:600;margin-top:1.5em;margin-bottom:.5em;line-height:1.5}.prose :where(h4 strong):not(:where([class~=not-prose] *)){font-weight:700;color:inherit}.prose :where(img):not(:where([class~=not-prose] *)){margin-top:2em;margin-bottom:2em}.prose :where(figure>*):not(:where([class~=not-prose] *)){margin-top:0;margin-bottom:0}.prose :where(figcaption):not(:where([class~=not-prose] *)){color:var(--tw-prose-captions);font-size:.875em;line-height:1.4285714;margin-top:.8571429em}.prose :where(code):not(:where([class~=not-prose] *)){color:var(--tw-prose-code);font-weight:600;font-size:.875em}.prose :where(code):not(:where([class~=not-prose] *)):before{content:"`"}.prose :where(code):not(:where([class~=not-prose] *)):after{content:"`"}.prose :where(a code):not(:where([class~=not-prose] *)){color:inherit}.prose :where(h1 code):not(:where([class~=not-prose] *)){color:inherit}.prose :where(h2 code):not(:where([class~=not-prose] *)){color:inherit;font-size:.875em}.prose :where(h3 code):not(:where([class~=not-prose] *)){color:inherit;font-size:.9em}.prose :where(h4 code):not(:where([class~=not-prose] *)){color:inherit}.prose :where(blockquote code):not(:where([class~=not-prose] *)){color:inherit}.prose :where(thead th code):not(:where([class~=not-prose] *)){color:inherit}.prose :where(pre):not(:where([class~=not-prose] *)){color:var(--tw-prose-pre-code);background-color:var(--tw-prose-pre-bg);overflow-x:auto;font-weight:400;font-size:.875em;line-height:1.7142857;margin-top:1.7142857em;margin-bottom:1.7142857em;border-radius:.375rem;padding:.8571429em 1.1428571em}.prose :where(pre code):not(:where([class~=not-prose] *)){background-color:initial;border-width:0;border-radius:0;padding:0;font-weight:inherit;color:inherit;font-size:inherit;font-family:inherit;line-height:inherit}.prose :where(pre code):not(:where([class~=not-prose] *)):before{content:none}.prose :where(pre code):not(:where([class~=not-prose] *)):after{content:none}.prose :where(table):not(:where([class~=not-prose] *)){width:100%;table-layout:auto;text-align:left;margin-top:2em;margin-bottom:2em;font-size:.875em;line-height:1.7142857}.prose :where(thead):not(:where([class~=not-prose] *)){border-bottom-width:1px;border-bottom-color:var(--tw-prose-th-borders)}.prose :where(thead th):not(:where([class~=not-prose] *)){color:var(--tw-prose-headings);font-weight:600;vertical-align:bottom;padding-right:.5714286em;padding-bottom:.5714286em;padding-left:.5714286em}.prose :where(tbody tr):not(:where([class~=not-prose] *)){border-bottom-width:1px;border-bottom-color:var(--tw-prose-td-borders)}.prose :where(tbody tr:last-child):not(:where([class~=not-prose] *)){border-bottom-width:0}.prose :where(tbody td):not(:where([class~=not-prose] *)){vertical-align:initial}.prose :where(tfoot):not(:where([class~=not-prose] *)){border-top-width:1px;border-top-color:var(--tw-prose-th-borders)}.prose :where(tfoot td):not(:where([class~=not-prose] *)){vertical-align:top}.prose{--tw-prose-body:#374151;--tw-prose-headings:#111827;--tw-prose-lead:#4b5563;--tw-prose-links:#111827;--tw-prose-bold:#111827;--tw-prose-counters:#6b7280;--tw-prose-bullets:#d1d5db;--tw-prose-hr:#e5e7eb;--tw-prose-quotes:#111827;--tw-prose-quote-borders:#e5e7eb;--tw-prose-captions:#6b7280;--tw-prose-code:#111827;--tw-prose-pre-code:#e5e7eb;--tw-prose-pre-bg:#1f2937;--tw-prose-th-borders:#d1d5db;--tw-prose-td-borders:#e5e7eb;--tw-prose-invert-body:#d1d5db;--tw-prose-invert-headings:#fff;--tw-prose-invert-lead:#9ca3af;--tw-prose-invert-links:#fff;--tw-prose-invert-bold:#fff;--tw-prose-invert-counters:#9ca3af;--tw-prose-invert-bullets:#4b5563;--tw-prose-invert-hr:#374151;--tw-prose-invert-quotes:#f3f4f6;--tw-prose-invert-quote-borders:#374151;--tw-prose-invert-captions:#9ca3af;--tw-prose-invert-code:#fff;--tw-prose-invert-pre-code:#d1d5db;--tw-prose-invert-pre-bg:#00000080;--tw-prose-invert-th-borders:#4b5563;--tw-prose-invert-td-borders:#374151;font-size:.875rem;line-height:1rem}.prose :where(video):not(:where([class~=not-prose] *)){margin-top:2em;margin-bottom:2em}.prose :where(figure):not(:where([class~=not-prose] *)){margin-top:2em;margin-bottom:2em}.prose :where(li):not(:where([class~=not-prose] *)){margin-top:.5em;margin-bottom:.5em}.prose :where(ol>li):not(:where([class~=not-prose] *)){padding-left:.375em}.prose :where(ul>li):not(:where([class~=not-prose] *)){padding-left:.375em}.prose :where(.prose>ul>li p):not(:where([class~=not-prose] *)){margin-top:.75em;margin-bottom:.75em}.prose :where(.prose>ul>li>:first-child):not(:where([class~=not-prose] *)){margin-top:1.25em}.prose :where(.prose>ul>li>:last-child):not(:where([class~=not-prose] *)){margin-bottom:1.25em}.prose :where(.prose>ol>li>:first-child):not(:where([class~=not-prose] *)){margin-top:1.25em}.prose :where(.prose>ol>li>:last-child):not(:where([class~=not-prose] *)){margin-bottom:1.25em}.prose :where(ul ul,ul ol,ol ul,ol ol):not(:where([class~=not-prose] *)){margin-top:.75em;margin-bottom:.75em}.prose :where(hr+*):not(:where([class~=not-prose] *)){margin-top:0}.prose :where(h2+*):not(:where([class~=not-prose] *)){margin-top:0}.prose :where(h3+*):not(:where([class~=not-prose] *)){margin-top:0}.prose :where(h4+*):not(:where([class~=not-prose] *)){margin-top:0}.prose :where(thead th:first-child):not(:where([class~=not-prose] *)){padding-left:0}.prose :where(thead th:last-child):not(:where([class~=not-prose] *)){padding-right:0}.prose :where(tbody td,tfoot td):not(:where([class~=not-prose] *)){padding:.5714286em}.prose :where(tbody td:first-child,tfoot td:first-child):not(:where([class~=not-prose] *)){padding-left:0}.prose :where(tbody td:last-child,tfoot td:last-child):not(:where([class~=not-prose] *)){padding-right:0}.prose :where(.prose>:first-child):not(:where([class~=not-prose] *)){margin-top:0}.prose :where(.prose>:last-child):not(:where([class~=not-prose] *)){margin-bottom:0}.btn{display:inline-flex;height:2.5rem;align-items:center;gap:.5rem;border-radius:.25rem;border-width:1px;--tw-bg-opacity:1;background-color:rgb(255 255 255/var(--tw-bg-opacity));padding-left:1.25rem;padding-right:1.25rem;font-size:.75rem;line-height:1rem;font-weight:600;text-decoration-line:none}.btn:hover{--tw-bg-opacity:1;background-color:rgb(243 244 246/var(--tw-bg-opacity))}.btn-primary{--tw-border-opacity:1;border-color:rgb(37 99 235/var(--tw-border-opacity));--tw-bg-opacity:1;background-color:rgb(37 99 235/var(--tw-bg-opacity));--tw-text-opacity:1;color:rgb(255 255 255/var(--tw-text-opacity))}.btn-primary:hover{border-color:rgb(29 78 216/var(--tw-border-opacity));background-color:rgb(29 78 216/var(--tw-bg-opacity))}.btn-critical,.btn-primary:hover{--tw-border-opacity:1;--tw-bg-opacity:1}.btn-critical{border-color:rgb(191 47 29/var(--tw-border-opacity));background-color:rgb(191 47 29/var(--tw-bg-opacity));--tw-text-opacity:1;color:rgb(255 255 255/var(--tw-text-opacity))}.btn-critical:hover{--tw-border-opacity:1;border-color:rgb(148 38 25/var(--tw-border-opacity));--tw-bg-opacity:1;background-color:rgb(148 38 25/var(--tw-bg-opacity))}.btn-text{color:rgb(39 110 241/var(--tw-text-opacity))}.btn-text,.btn-text:hover{border-color:#0000;background-color:initial;--tw-text-opacity:1}.btn-text:hover{color:rgb(30 84 183/var(--tw-text-opacity))}.btn-small{height:1.75rem;padding-right:.75rem}.btn-small,.btn-with-starting-icon{padding-left:.75rem}.btn-with-ending-icon{padding-right:.75rem}.toast{align-items:center}.toast>:not([hidden])~:not([hidden]){--tw-space-x-reverse:0;margin-right:calc(.5rem*var(--tw-space-x-reverse));margin-left:calc(.5rem*(1 - var(--tw-space-x-reverse)))}.toast{border-radius:.25rem;padding:1rem;--tw-shadow:0 10px 15px -3px #0000001a,0 4px 6px -4px #0000001a;--tw-shadow-colored:0 10px 15px -3px var(--tw-shadow-color),0 4px 6px -4px var(--tw-shadow-color);box-shadow:var(--tw-ring-offset-shadow,0 0 #0000),var(--tw-ring-shadow,0 0 #0000),var(--tw-shadow)}.toast.\:popover-open{position:fixed;top:auto;bottom:2.5rem;margin-left:auto;margin-right:auto;display:flex;overflow:visible;border-width:0}.toast:popover-open{position:fixed;top:auto;bottom:2.5rem;margin-left:auto;margin-right:auto;display:flex;overflow:visible;border-width:0}.absolute{position:absolute}.relative{position:relative}.sticky{position:sticky}.bottom-0{bottom:0}.left-0{left:0}.z-10{z-index:10}.m-0{margin:0}.mx-2{margin-left:.5rem;margin-right:.5rem}.\!ml-10{margin-left:2.5rem!important}.ml-auto{margin-left:auto}.mt-1{margin-top:.25rem}.mt-2{margin-top:.5rem}.block{display:block}.inline-block{display:inline-block}.flex{display:flex}.contents{display:contents}.hidden{display:none}.h-12{height:3rem}.h-4{height:1rem}.h-5{height:1.25rem}.h-6{height:1.5rem}.max-h-\[200px\]{max-height:200px}.w-12{width:3rem}.w-4{width:1rem}.w-5{width:1.25rem}.w-6{width:1.5rem}.w-\[36rem\]{width:36rem}.w-full{width:100%}.w-max{width:-moz-max-content;width:max-content}@keyframes spin{to{transform:rotate(1turn)}}.animate-spin{animation:spin 1s linear infinite}.items-center{align-items:center}.justify-end{justify-content:flex-end}.justify-between{justify-content:space-between}.gap-2{gap:.5rem}.gap-4{gap:1rem}.overflow-y-auto{overflow-y:auto}.rounded{border-radius:.25rem}.rounded-full{border-radius:9999px}.rounded-lg{border-radius:.5rem}.rounded-md{border-radius:.375rem}.border{border-width:1px}.border-2{border-width:2px}.border-4{border-width:4px}.border-\[1\.5px\]{border-width:1.5px}.border-b{border-bottom-width:1px}.border-t{border-top-width:1px}.border-gray-300{--tw-border-opacity:1;border-color:rgb(209 213 219/var(--tw-border-opacity))}.border-grey-100{--tw-border-opacity:1;border-color:rgb(16 17 18/var(--tw-border-opacity))}.border-subdued{--tw-border-opacity:1;border-color:rgb(186 190 195/var(--tw-border-opacity))}.border-b-transparent{border-bottom-color:#0000}.bg-critical-subdued{--tw-bg-opacity:1;background-color:rgb(255 222 217/var(--tw-bg-opacity))}.bg-gray-900{--tw-bg-opacity:1;background-color:rgb(17 24 39/var(--tw-bg-opacity))}.bg-green-700{--tw-bg-opacity:1;background-color:rgb(21 128 61/var(--tw-bg-opacity))}.bg-informational-subdued{--tw-bg-opacity:1;background-color:rgb(212 226 252/var(--tw-bg-opacity))}.bg-neutral{--tw-bg-opacity:1;background-color:rgb(235 237 240/var(--tw-bg-opacity))}.bg-red-700{--tw-bg-opacity:1;background-color:rgb(185 28 28/var(--tw-bg-opacity))}.bg-success-subdued{--tw-bg-opacity:1;background-color:rgb(218 240 227/var(--tw-bg-opacity))}.bg-warning-subdued{--tw-bg-opacity:1;background-color:rgb(255 242 217/var(--tw-bg-opacity))}.bg-white{--tw-bg-opacity:1;background-color:rgb(255 255 255/var(--tw-bg-opacity))}.bg-yellow-600{--tw-bg-opacity:1;background-color:rgb(202 138 4/var(--tw-bg-opacity))}.p-0{padding:0}.p-6{padding:1.5rem}.px-0{padding-left:0;padding-right:0}.px-2{padding-left:.5rem;padding-right:.5rem}.px-3{padding-left:.75rem;padding-right:.75rem}.px-4{padding-left:1rem;padding-right:1rem}.px-5{padding-left:1.25rem;padding-right:1.25rem}.px-6{padding-left:1.5rem;padding-right:1.5rem}.py-0{padding-top:0;padding-bottom:0}.py-0\.5{padding-top:.125rem;padding-bottom:.125rem}.py-1{padding-top:.25rem;padding-bottom:.25rem}.py-2{padding-top:.5rem;padding-bottom:.5rem}.py-3{padding-top:.75rem;padding-bottom:.75rem}.py-4{padding-top:1rem;padding-bottom:1rem}.pb-1{padding-bottom:.25rem}.pb-6{padding-bottom:1.5rem}.text-center{text-align:center}.text-2xl{font-size:1.5rem;line-height:1.75rem}.text-3xl{font-size:2rem;line-height:2.5rem}.text-4xl{font-size:2.5rem;line-height:3rem}.text-base{font-size:.875rem;line-height:1rem}.text-lg{font-size:1rem;line-height:1.25rem}.text-sm{font-size:.75rem;line-height:1rem}.text-xl{font-size:1.25rem;line-height:1.5rem}.text-xs{font-size:.75rem;line-height:1rem}.font-bold{font-weight:700}.font-semibold{font-weight:600}.uppercase{text-transform:uppercase}.leading-4{line-height:1rem}.text-gray-500{--tw-text-opacity:1;color:rgb(107 114 128/var(--tw-text-opacity))}.text-gray-600{--tw-text-opacity:1;color:rgb(75 85 99/var(--tw-text-opacity))}.text-gray-900{--tw-text-opacity:1;color:rgb(17 24 39/var(--tw-text-opacity))}.text-grey-50{--tw-text-opacity:1;color:rgb(156 161 165/var(--tw-text-opacity))}.text-primary{--tw-text-opacity:1;color:rgb(16 17 18/var(--tw-text-opacity))}.text-tertiary{--tw-text-opacity:1;color:rgb(156 161 165/var(--tw-text-opacity))}.text-white{--tw-text-opacity:1;color:rgb(255 255 255/var(--tw-text-opacity))}.opacity-70{opacity:.7}.shadow-\[inset_0_-1px\]{--tw-shadow:inset 0 -1px;--tw-shadow-colored:inset 0 -1px var(--tw-shadow-color)}.shadow-\[inset_0_-1px\],.shadow-lg{box-shadow:var(--tw-ring-offset-shadow,0 0 #0000),var(--tw-ring-shadow,0 0 #0000),var(--tw-shadow)}.shadow-lg{--tw-shadow:0 10px 15px -3px #0000001a,0 4px 6px -4px #0000001a;--tw-shadow-colored:0 10px 15px -3px var(--tw-shadow-color),0 4px 6px -4px var(--tw-shadow-color)}.shadow-gray-400{--tw-shadow-color:#9ca3af;--tw-shadow:var(--tw-shadow-colored)}.backdrop\:bg-grey-100\/50::backdrop{background-color:#10111280}.after\:absolute:after{content:var(--tw-content);position:absolute}.after\:inset-x-0:after{content:var(--tw-content);left:0;right:0}.after\:-bottom-1:after{content:var(--tw-content);bottom:-.25rem}.after\:block:after{content:var(--tw-content);display:block}.after\:h-1:after{content:var(--tw-content);height:.25rem}.after\:bg-blue-500:after{content:var(--tw-content);--tw-bg-opacity:1;background-color:rgb(59 130 246/var(--tw-bg-opacity))}.hover\:bg-grey-10:hover{--tw-bg-opacity:1;background-color:rgb(245 246 247/var(--tw-bg-opacity))}.hover\:text-gray-900:hover{--tw-text-opacity:1;color:rgb(17 24 39/var(--tw-text-opacity))}.hover\:text-grey-70:hover{--tw-text-opacity:1;color:rgb(98 102 106/var(--tw-text-opacity))}.group[aria-expanded][data-empty=true][data-loading=false] .group-aria-\[expanded\]\[data-empty\=\'true\'\]\[data-loading\=\'false\'\]\:block,.group[aria-expanded][data-loading=true] .group-aria-\[expanded\]\[data-loading\=\'true\'\]\:block{display:block}.group[data-empty=true] .group-data-\[empty\=\'true\'\]\:hidden,.group[data-loading=true] .group-data-\[loading\=\'true\'\]\:hidden{display:none}.popover-open\:block:popover-open{display:block}.\[\&\>\[aria-selected\=\'true\'\]\]\:bg-blue-20>[aria-selected=true]{--tw-bg-opacity:1;background-color:rgb(212 226 252/var(--tw-bg-opacity))}.\[\&\>li\]\:cursor-pointer>li{cursor:pointer}.\[\&\>li\]\:px-3>li{padding-left:.75rem;padding-right:.75rem}.\[\&\>li\]\:py-2>li{padding-top:.5rem;padding-bottom:.5rem}

data/app/assets/stylesheets/anchor-view-components.tailwind.css

@@ -0,0 +1,8 @@
+@import "tailwindcss/base";
+@import "tailwindcss/components";
+@import "tailwindcss/utilities";
+
+@import "@oddbird/popover-polyfill/dist/popover" layer(base);
+
+@import "components/button" layer(components);
+@import "components/toast" layer(components);

data/app/assets/stylesheets/components/button.css

@@ -0,0 +1,29 @@
+@layer components {
+  .btn {
+    @apply inline-flex items-center gap-2 rounded bg-white hover:bg-gray-100 border h-10 px-5 text-sm font-semibold no-underline;
+  }
+
+  .btn-primary {
+    @apply bg-blue-600 border-blue-600 hover:bg-blue-700 hover:border-blue-700 text-white;
+  }
+
+  .btn-critical {
+    @apply bg-red-60 border-red-60 hover:bg-red-70 hover:border-red-70 text-white;
+  }
+
+  .btn-text {
+    @apply bg-transparent border-transparent hover:bg-transparent hover:border-transparent text-blue-50 hover:text-blue-60;
+  }
+
+  .btn-small {
+    @apply h-7 px-3;
+  }
+
+  .btn-with-starting-icon {
+    @apply pl-3;
+  }
+
+  .btn-with-ending-icon {
+    @apply pr-3;
+  }
+}

data/app/assets/stylesheets/components/toast.css

@@ -0,0 +1,21 @@
+@layer components {
+  .toast {
+    @apply p-4 rounded items-center space-x-2 shadow-lg;
+  }
+
+  /*
+    Styling for polyfilled version of `:popover-open` pseudo-class
+    https://github.com/oddbird/popover-polyfill
+  */
+  .toast.\:popover-open {
+    @apply flex fixed top-auto bottom-10 mx-auto border-0 overflow-visible;
+  }
+
+  /*
+    Styling for standards version of `:popover-open` pseudo-class
+    https://developer.mozilla.org/en-US/docs/Web/CSS/:popover-open
+  */
+  .toast:popover-open {
+    @apply flex fixed top-auto bottom-10 mx-auto border-0 overflow-visible;
+  }
+}

data/app/components/anchor/action_menu_component.html.erb

@@ -0,0 +1,19 @@
+<%= tag.div(
+  class: "contents",
+  data: { controller: "action-menu" },
+) do %>
+  <%= show_button if show_button? %>
+
+  <%= tag.div(
+    class: "absolute left-0 w-max m-0 mt-1 px-0 py-1 bg-white rounded border border-subdued popover-open:block",
+    data: { action: "toggle->action-menu#positionPopover" },
+    id: @menu_id,
+    popover: "auto",
+  ) do %>
+    <ul>
+      <% items.each do |item| %>
+        <%= tag.li item, class: "px-3 py-1 hover:bg-grey-10" %>
+      <% end %>
+    </ul>
+  <% end %>
+<% end %>

data/app/components/anchor/action_menu_component.rb

@@ -0,0 +1,23 @@
+module Anchor
+  class ActionMenuComponent < Component
+    renders_one :show_button, -> do
+      ButtonComponent.new(
+        data: { action_menu_target: "button" },
+        popovertarget: @menu_id
+      )
+    end
+    renders_many :items
+
+    def initialize
+      @menu_id = self.class.generate_id
+
+      super
+    end
+
+    private
+
+    def render?
+      items.present?
+    end
+  end
+end

data/app/components/anchor/action_menu_controller.ts

@@ -0,0 +1,21 @@
+import { Controller } from "@hotwired/stimulus";
+import { computePosition } from "@floating-ui/dom";
+
+export default class extends Controller<HTMLDivElement> {
+  static targets = ["button"];
+
+  declare readonly buttonTarget: HTMLButtonElement;
+
+  positionPopover = (event: { target: HTMLDivElement }): void => {
+    const popover = event.target;
+
+    computePosition(this.buttonTarget, popover, {
+      placement: "bottom-start",
+    }).then(({ x, y }) => {
+      Object.assign(popover.style, {
+        left: `${x}px`,
+        top: `${y + 4}px`,
+      });
+    });
+  };
+}

data/app/components/anchor/anchor_view_components.ts

@@ -0,0 +1,13 @@
+import "@oddbird/popover-polyfill";
+
+import ActionMenuController from "./action_menu_controller";
+import AutocompleteController from "./autocomplete_controller";
+import DialogController from "./dialog_controller";
+import ToastController from "./toast_controller";
+
+export function registerAnchorControllers(application) {
+  application.register("action-menu", ActionMenuController);
+  application.register("autocomplete", AutocompleteController);
+  application.register("dialog", DialogController);
+  application.register("toast", ToastController);
+}

data/app/components/anchor/autocomplete_component.en.yml

@@ -0,0 +1,3 @@
+en:
+  no_options: "No options"
+  loading: "Loading..."

data/app/components/anchor/autocomplete_component.html.erb

@@ -0,0 +1,36 @@
+<div 
+  data-controller="autocomplete" 
+  data-autocomplete-url-value="<%= src %>" 
+  role="combobox"
+  class="group relative"
+>
+  <%= form_builder.input(
+    "#{name}_search".to_sym,
+    input_html: {
+      data: {
+        autocomplete_target: "input",
+        autocomplete_min_length_value: 0,
+        action: "click->autocomplete#onInputClick",
+      }.merge(input_data),
+      readonly:,
+    }
+  ) %>
+  <div class="hidden">
+    <%= form_builder.input(
+      "#{name}_id".to_sym,
+      input_html: {
+        data: { autocomplete_target: "hidden" }
+      }) %>
+  </div>
+  <ul
+    data-autocomplete-target="results"
+    class="<%= list_box_classes %> group-data-[empty='true']:hidden group-data-[loading='true']:hidden [&>li]:py-2 [&>li]:px-3 [&>li]:cursor-pointer [&>[aria-selected='true']]:bg-blue-20"
+  >
+  </ul>
+  <div class="<%= list_box_classes %> text-center text-gray-500 hidden group-aria-[expanded][data-empty='true'][data-loading='false']:block">
+    <%= t(".no_options") %>
+  </div>
+  <div class="<%= list_box_classes %> text-center text-gray-500 hidden group-aria-[expanded][data-loading='true']:block">
+    <%= t(".loading") %>
+  </div>
+</div>

data/app/components/anchor/autocomplete_component.rb

@@ -0,0 +1,42 @@
+module Anchor
+  class AutocompleteComponent < Component
+    LIST_BOX_CLASSES = %w(
+      absolute
+      bg-white
+      border
+      border-gray-300
+      max-h-[200px]
+      mt-2
+      overflow-y-auto
+      py-2
+      rounded-md
+      shadow-lg
+      w-full
+      z-10
+    ).join(" ").freeze
+
+    def initialize(
+      form_builder:,
+      name:,
+      src:,
+      readonly: false,
+      input_data: {}
+    )
+      @form_builder = form_builder
+      @name = name
+      @readonly = readonly
+      @input_data = input_data
+      @src = src
+
+      super
+    end
+
+    def list_box_classes
+      LIST_BOX_CLASSES
+    end
+
+    private
+
+    attr_reader :form_builder, :name, :readonly, :input_data, :src
+  end
+end

data/app/components/anchor/autocomplete_controller.ts

@@ -0,0 +1,37 @@
+import type { ControllerConstructor } from "@hotwired/stimulus"
+import BaseAutocompleteController from "stimulus-autocomplete"
+
+class AutocompleteController extends BaseAutocompleteController {
+  connect(): void {
+    super.connect()
+    this.element.addEventListener("loadstart", this.onLoadStart)
+    this.element.addEventListener("loadend", this.onLoadEnd)
+  }
+
+  disconnect(): void {
+    super.disconnect()
+    this.element.removeEventListener("loadstart", this.onLoadStart)
+    this.element.removeEventListener("loadend", this.onLoadEnd)
+  }
+
+  onInputClick = (): void => {
+    const query = this.inputTarget.value.trim()
+
+    if (query.length >= this.minLengthValue) {
+      this.fetchResults(query)
+    } else {
+      this.hideAndRemoveOptions()
+    }
+  }
+
+  onLoadStart = (): void => {
+    this.element.dataset.loading = true
+  }
+
+  onLoadEnd = (): void => {
+    this.element.dataset.loading = false
+    this.element.dataset.empty = this.resultsTarget.childElementCount === 0
+  }
+}
+
+export default AutocompleteController as unknown as ControllerConstructor

data/app/components/anchor/badge_component.html.erb

@@ -0,0 +1,8 @@
+<%= tag.span(
+  class: class_names(
+    "inline-block px-2 py-0.5 rounded-full text-xs",
+    @variant,
+  ),
+) do %>
+  <%= content %>
+<% end %>

data/app/components/anchor/badge_component.rb

@@ -0,0 +1,27 @@
+module Anchor
+  class BadgeComponent < Component
+    VARIANT_DEFAULT = :neutral
+    VARIANT_MAPPINGS = {
+      VARIANT_DEFAULT => "bg-neutral text-base",
+      :informational => "bg-informational-subdued text-base",
+      :success => "bg-success-subdued text-base",
+      :critical => "bg-critical-subdued text-base",
+      :warning => "bg-warning-subdued text-base",
+    }.freeze
+    VARIANT_OPTIONS = VARIANT_MAPPINGS.keys
+
+    def initialize(variant: VARIANT_DEFAULT)
+      @variant = VARIANT_MAPPINGS[
+        fetch_or_fallback(VARIANT_OPTIONS, variant, VARIANT_DEFAULT)
+      ]
+
+      super
+    end
+
+    private
+
+    def render?
+      content.present?
+    end
+  end
+end

data/app/components/anchor/banner_component.html.erb

@@ -0,0 +1,9 @@
+<%= tag.div(
+  class: class_names(
+    "px-4 py-3 rounded",
+    @variant,
+    @classes,
+  ),
+) do %>
+  <%= content %>
+<% end %>

data/app/components/anchor/banner_component.rb

@@ -0,0 +1,28 @@
+module Anchor
+  class BannerComponent < Component
+    VARIANT_DEFAULT = :neutral
+    VARIANT_MAPPINGS = {
+      VARIANT_DEFAULT => "bg-neutral",
+      :informational => "bg-informational-subdued",
+      :success => "bg-success-subdued",
+      :critical => "bg-critical-subdued",
+      :warning => "bg-warning-subdued",
+    }.freeze
+    VARIANT_OPTIONS = VARIANT_MAPPINGS.keys
+
+    def initialize(variant: VARIANT_DEFAULT, classes: nil)
+      @variant = VARIANT_MAPPINGS[
+        fetch_or_fallback(VARIANT_OPTIONS, variant, VARIANT_DEFAULT)
+      ]
+      @classes = classes
+
+      super
+    end
+
+    private
+
+    def render?
+      content.present?
+    end
+  end
+end

data/app/components/anchor/breadcrumbs/item_component.html.erb

@@ -0,0 +1,16 @@
+<%= tag.li(
+  aria: {
+    current: { page: @active }
+  },
+) do %>
+  <%= link_to(
+    @href,
+    class: "flex"
+  ) do %>
+    <% if show_separator %>
+      <span aria-hidden="true" class="mx-2 text-tertiary">/</span>
+    <% end %>
+
+    <%= content %>
+  <% end %>
+<% end %>

data/app/components/anchor/breadcrumbs/item_component.rb

@@ -0,0 +1,15 @@
+module Anchor
+  module Breadcrumbs
+    class ItemComponent < Component
+      attr_accessor :active, :show_separator
+
+      def initialize(href:, active: false, show_separator: true)
+        @href = href
+        @active = active
+        @show_separator = show_separator
+
+        super
+      end
+    end
+  end
+end

data/app/components/anchor/breadcrumbs_component.html.erb

@@ -0,0 +1,10 @@
+<%= tag.nav aria: { label: @label } do %>
+  <ol class="flex items-center">
+    <% items.first.show_separator = false %>
+    <% items.last.active = true %>
+
+    <% items.each do |item| %>
+      <%= item %>
+    <% end %>
+  </ol>
+<% end %>

data/app/components/anchor/breadcrumbs_component.rb

@@ -0,0 +1,17 @@
+module Anchor
+  class BreadcrumbsComponent < Component
+    renders_many :items, Breadcrumbs::ItemComponent
+
+    def initialize(label: "Breadcrumb")
+      @label = label
+
+      super
+    end
+
+    private
+
+    def render?
+      items.present?
+    end
+  end
+end

data/app/components/anchor/button_component.html.erb

@@ -0,0 +1,22 @@
+<%= content_tag(
+  @tag,
+  type: @type,
+  href: @href,
+  data: @data,
+  form: @form,
+  popovertarget: @popovertarget,
+  popovertargetaction: @popovertargetaction,
+  class: class_names(
+    @size,
+    @variant,
+    @classes,
+    "btn-with-starting-icon" => starting_icon?,
+    "btn-with-ending-icon" => ending_icon?,
+  ),
+) do %>
+  <%= starting_icon if starting_icon? %>
+
+  <%= content %>
+
+  <%= ending_icon if ending_icon? %>
+<% end %>

data/app/components/anchor/button_component.rb

@@ -0,0 +1,76 @@
+module Anchor
+  class ButtonComponent < Component
+    TAG_DEFAULT = :button
+    TAG_OPTIONS = [TAG_DEFAULT, :a].freeze
+
+    TYPE_DEFAULT = :button
+    TYPE_OPTIONS = [TYPE_DEFAULT, :reset, :submit].freeze
+
+    VARIANT_DEFAULT = :basic
+    VARIANT_MAPPINGS = {
+      VARIANT_DEFAULT => "btn",
+      :primary => "btn btn-primary",
+      :critical => "btn btn-critical",
+      :text => "btn btn-text",
+    }.freeze
+    VARIANT_OPTIONS = VARIANT_MAPPINGS.keys
+
+    SIZE_DEFAULT = nil
+    SIZE_MAPPINGS = {
+      small: "btn-small",
+    }.freeze
+    SIZE_OPTIONS = SIZE_MAPPINGS.keys << SIZE_DEFAULT
+
+    renders_one :starting_icon, ->(icon:) do
+      Anchor::IconComponent.new(
+        icon:,
+        classes: "w-5 h-5",
+        data: { testid: "button-starting-icon" }
+      )
+    end
+    renders_one :ending_icon, ->(icon:) do
+      Anchor::IconComponent.new(
+        icon:,
+        classes: "w-5 h-5",
+        data: { testid: "button-ending-icon" }
+      )
+    end
+
+    def initialize(
+      tag: TAG_DEFAULT,
+      type: TYPE_DEFAULT,
+      href: nil,
+      size: SIZE_DEFAULT,
+      variant: VARIANT_DEFAULT,
+      data: {},
+      form: nil,
+      popovertarget: nil,
+      popovertargetaction: nil,
+      **kwargs
+    )
+      @tag = fetch_or_fallback(TAG_OPTIONS, tag, TAG_DEFAULT)
+      if @tag == :button
+        @type = fetch_or_fallback(
+          TYPE_OPTIONS, type, TYPE_DEFAULT
+        )
+      end
+      @data = data
+      @href = href if @tag == :a
+      @size = SIZE_MAPPINGS[fetch_or_fallback(SIZE_OPTIONS, size, SIZE_DEFAULT)]
+      @variant = VARIANT_MAPPINGS[
+        fetch_or_fallback(VARIANT_OPTIONS, variant, VARIANT_DEFAULT)
+      ]
+      @form = form
+      @popovertarget = popovertarget
+      @popovertargetaction = popovertargetaction
+
+      super
+    end
+
+    private
+
+    def render?
+      content.present?
+    end
+  end
+end