@meith/theme-raidframe 0.3.3 → 0.4.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@meith/theme-raidframe",
-  "version": "0.3.3",
+  "version": "0.4.0",
   "description": "A gaming theme for Meith — guild, raid and match boards — built on the default theme's slots.",
   "license": "LGPL-3.0-or-later",
   "repository": {
@@ -20,9 +20,9 @@
     "access": "public"
   },
   "dependencies": {
-    "@meith/theme-default": "^0.3.3",
-    "@meith/ui": "^0.3.3",
-    "@meith/theme-kit": "^0.3.3"
+    "@meith/theme-default": "^0.4.0",
+    "@meith/theme-kit": "^0.4.0",
+    "@meith/ui": "^0.4.0"
   },
   "peerDependencies": {
     "react": "^19.2.0"

package/src/slots/search-form.tsx

@@ -1,4 +1,4 @@
-import type { OptionModel, SearchFormModel } from '@meith/theme-kit'
+import type { OptionModel, SearchAdvancedModel, SearchFormModel } from '@meith/theme-kit'
 
 import { BUTTON_PRIMARY, Frame, MICRO, PanelHead } from '../shared'
 
@@ -34,6 +34,60 @@ function Choice({
   )
 }
 
+function Advanced({ label, isOpen, author, toggles, choices }: SearchAdvancedModel) {
+  return (
+    <details open={isOpen} className="border border-border">
+      <summary className={`${MICRO} cursor-default px-3 py-2 select-none`}>{label}</summary>
+
+      <div className="flex flex-col gap-4 border-t border-border px-3 py-3">
+        <div>
+          <label htmlFor="search-author" className={`${MICRO} mb-1 block`}>
+            {author.label}
+          </label>
+          <input
+            id="search-author"
+            type="text"
+            name={author.field}
+            defaultValue={author.value}
+            placeholder={author.placeholder}
+            autoComplete="off"
+            aria-describedby="search-author-hint"
+            className={CONTROL}
+          />
+          <p id="search-author-hint" className="mt-1.5 text-xs text-muted-foreground">
+            {author.hint}
+          </p>
+        </div>
+
+        {toggles.map((toggle) => (
+          <label key={toggle.field} className="flex items-center gap-2 text-sm select-none">
+            <input
+              type="checkbox"
+              name={toggle.field}
+              value={toggle.value}
+              defaultChecked={toggle.isOn}
+              className="size-4 border border-input accent-primary"
+            />
+            {toggle.label}
+          </label>
+        ))}
+
+        <div className="grid gap-4 sm:grid-cols-3">
+          {choices.map((choice) => (
+            <Choice
+              key={choice.field}
+              id={`search-${choice.field}`}
+              label={choice.label}
+              name={choice.field}
+              options={choice.options}
+            />
+          ))}
+        </div>
+      </div>
+    </details>
+  )
+}
+
 export function SearchForm({
   action,
   fields,
@@ -43,6 +97,7 @@ export function SearchForm({
   sorts,
   hint,
   errorMessage,
+  advanced,
 }: SearchFormModel) {
   const described = [
     hint === null ? null : 'search-hint',
@@ -91,6 +146,8 @@ export function SearchForm({
           <Choice id="search-sort" label="Sort by" name={fields.sort} options={sorts} />
         </div>
 
+        {advanced !== undefined && <Advanced {...advanced} />}
+
         <div>
           <button type="submit" className={BUTTON_PRIMARY}>
             search

package/src/slots/search-results.tsx

@@ -1,7 +1,10 @@
-import type { SearchResultsModel } from '@meith/theme-kit'
+import type { OptionModel, SearchRefineModel, SearchResultsModel } from '@meith/theme-kit'
 
 import { BUTTON_PRIMARY, Frame, HEADING, MICRO, RULE, Stamp } from '../shared'
 
+const CONTROL =
+  'w-full border border-input bg-surface px-3 py-2 text-sm text-foreground focus-visible:border-ring'
+
 export function SearchResults({
   terms,
   searchedAt,
@@ -10,6 +13,7 @@ export function SearchResults({
   nextLabel,
   newSearchHref,
   within,
+  refine,
 }: SearchResultsModel) {
   return (
     <main
@@ -32,6 +36,8 @@ export function SearchResults({
         <div className={RULE} aria-hidden="true" />
       </div>
 
+      {refine !== undefined && <Refine {...refine} />}
+
       <Frame>
         {hits.length === 0 ? (
           <div className="px-4 py-6 text-center">
@@ -72,6 +78,15 @@ export function SearchResults({
 
       <Frame>
         <form method="get" action={within.action} className="flex flex-col gap-3 px-4 py-4">
+          {(within.hidden ?? []).map((field) => (
+            <input
+              key={`${field.name}-${field.value}`}
+              type="hidden"
+              name={field.name}
+              value={field.value}
+            />
+          ))}
+
           <div>
             <label htmlFor="search-within" className={`${MICRO} mb-1 block`}>
               {within.label}
@@ -83,7 +98,7 @@ export function SearchResults({
               defaultValue={within.value}
               autoComplete="off"
               aria-describedby="search-within-hint"
-              className="w-full border border-input bg-surface px-3 py-2 text-sm text-foreground focus-visible:border-ring"
+              className={CONTROL}
             />
             <p id="search-within-hint" className="mt-1.5 text-xs text-muted-foreground">
               {within.hint}
@@ -106,3 +121,111 @@ export function SearchResults({
     </main>
   )
 }
+
+function Refine({
+  action,
+  label,
+  summary,
+  note,
+  sorts,
+  sortsLabel,
+  choices,
+  submitLabel,
+  applied,
+  clearHref,
+}: SearchRefineModel) {
+  return (
+    <section
+      aria-label={label}
+      className="flex flex-col gap-2.5 border border-border bg-card px-4 py-3 shadow-elevation"
+    >
+      <div className="flex flex-wrap items-center gap-x-3 gap-y-2">
+        <p className="text-sm font-medium text-foreground">{summary}</p>
+
+        <nav aria-label={sortsLabel} className="flex items-center gap-1">
+          {sorts.map((sort) => (
+            <a
+              key={sort.label}
+              href={sort.href}
+              {...(sort.isCurrent ? { 'aria-current': 'true' as const } : {})}
+              className={`${MICRO} border px-2 py-1 ${
+                sort.isCurrent
+                  ? 'border-primary bg-primary/10 text-primary'
+                  : 'border-transparent hover:text-primary'
+              }`}
+            >
+              {sort.label}
+            </a>
+          ))}
+        </nav>
+
+        {applied.map((chip) => (
+          <a
+            key={chip.label}
+            href={chip.removeHref}
+            className={`${MICRO} inline-flex items-center gap-1.5 border border-primary bg-primary/10 px-2 py-1 normal-case text-primary hover:bg-primary/20`}
+          >
+            {chip.label}
+            <span aria-hidden="true">×</span>
+            <span className="sr-only">— remove this filter</span>
+          </a>
+        ))}
+      </div>
+
+      <form
+        method="get"
+        action={action}
+        className="flex flex-wrap items-center gap-x-3 gap-y-2 border-t border-border pt-2.5"
+      >
+        {choices.map((choice) => (
+          <RefineChoice key={choice.field} {...choice} />
+        ))}
+
+        <button type="submit" className={`${BUTTON_PRIMARY} h-8 px-3`}>
+          {submitLabel}
+        </button>
+
+        {clearHref !== null && (
+          <a href={clearHref} className={`${MICRO} hover:text-primary`}>
+            clear filters
+          </a>
+        )}
+      </form>
+
+      {note !== null && <p className="text-xs text-muted-foreground">{note}</p>}
+    </section>
+  )
+}
+
+function RefineChoice({
+  field,
+  label,
+  options,
+}: {
+  field: string
+  label: string
+  options: readonly OptionModel[]
+}) {
+  const selected = options.find((option) => option.isSelected)
+  const id = `search-refine-${field}`
+
+  return (
+    <span className="inline-flex items-center gap-1.5">
+      <label htmlFor={id} className={MICRO}>
+        {label}
+      </label>
+      <select
+        id={id}
+        name={field}
+        defaultValue={selected?.value ?? ''}
+        className="h-8 border border-input bg-surface px-2 text-xs text-foreground focus-visible:border-ring"
+      >
+        {options.map((option) => (
+          <option key={option.value} value={option.value}>
+            {option.label}
+          </option>
+        ))}
+      </select>
+    </span>
+  )
+}