@meith/theme-default 0.3.3 → 0.4.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@meith/theme-default",
-  "version": "0.3.3",
+  "version": "0.4.0",
   "description": "Meith's default theme — every slot and every token, and the reference for what a complete theme fills.",
   "license": "LGPL-3.0-or-later",
   "repository": {
@@ -20,8 +20,8 @@
     "access": "public"
   },
   "dependencies": {
-    "@meith/theme-kit": "^0.3.3",
-    "@meith/ui": "^0.3.3"
+    "@meith/theme-kit": "^0.4.0",
+    "@meith/ui": "^0.4.0"
   },
   "peerDependencies": {
     "react": "^19.2.0"

package/src/slots/search-form.tsx

@@ -4,12 +4,13 @@ import {
   AlertTitle,
   Card,
   CardContent,
+  Disclosure,
   Field,
   Input,
   NativeSelect,
   buttonVariants,
 } from '@meith/ui'
-import type { OptionModel, SearchFormModel } from '@meith/theme-kit'
+import type { OptionModel, SearchAdvancedModel, SearchFormModel } from '@meith/theme-kit'
 
 export function SearchForm({
   action,
@@ -20,6 +21,7 @@ export function SearchForm({
   sorts,
   hint,
   errorMessage,
+  advanced,
 }: SearchFormModel) {
   return (
     <Card>
@@ -48,6 +50,8 @@ export function SearchForm({
             <Choice label="Sort by" name={fields.sort} options={sorts} />
           </div>
 
+          {advanced !== undefined && <Advanced {...advanced} />}
+
           <div>
             <button type="submit" className={buttonVariants({ variant: 'primary' })}>
               Search
@@ -67,6 +71,52 @@ export function SearchForm({
   )
 }
 
+function Advanced({ label, isOpen, author, toggles, choices }: SearchAdvancedModel) {
+  return (
+    <Disclosure summary={label} open={isOpen}>
+      <div className="flex flex-col gap-4">
+        <Field name={author.field} label={author.label} description={author.hint}>
+          {(control) => (
+            <Input
+              {...control}
+              defaultValue={author.value}
+              placeholder={author.placeholder}
+              autoComplete="off"
+            />
+          )}
+        </Field>
+
+        {toggles.map((toggle) => (
+          <label
+            key={toggle.field}
+            className="flex items-center gap-2 text-sm text-foreground select-none"
+          >
+            <input
+              type="checkbox"
+              name={toggle.field}
+              value={toggle.value}
+              defaultChecked={toggle.isOn}
+              className="size-4 rounded border border-input accent-primary"
+            />
+            {toggle.label}
+          </label>
+        ))}
+
+        <div className="grid gap-4 sm:grid-cols-3">
+          {choices.map((choice) => (
+            <Choice
+              key={choice.field}
+              label={choice.label}
+              name={choice.field}
+              options={choice.options}
+            />
+          ))}
+        </div>
+      </div>
+    </Disclosure>
+  )
+}
+
 function Choice({
   label,
   name,

package/src/slots/search-results.tsx

@@ -8,9 +8,11 @@ import {
   EmptyTitle,
   Field,
   Input,
+  NativeSelect,
   buttonVariants,
+  cn,
 } from '@meith/ui'
-import type { SearchResultsModel } from '@meith/theme-kit'
+import type { OptionModel, SearchRefineModel, SearchResultsModel } from '@meith/theme-kit'
 
 import { LINK, Stamp, pageAt } from '../shared'
 
@@ -22,6 +24,7 @@ export function SearchResults({
   nextLabel,
   newSearchHref,
   within,
+  refine,
 }: SearchResultsModel) {
   return (
     <main
@@ -39,6 +42,8 @@ export function SearchResults({
         </p>
       </div>
 
+      {refine !== undefined && <Refine {...refine} />}
+
       <Card>
         {hits.length === 0 ? (
           <Empty>
@@ -78,6 +83,15 @@ export function SearchResults({
       <Card>
         <CardContent className="p-4 sm:p-5">
           <form method="get" action={within.action} className="flex flex-col gap-4">
+            {(within.hidden ?? []).map((field) => (
+              <input
+                key={`${field.name}-${field.value}`}
+                type="hidden"
+                name={field.name}
+                value={field.value}
+              />
+            ))}
+
             <Field name={within.field} label={within.label} description={within.hint}>
               {(control) => (
                 <Input
@@ -104,3 +118,122 @@ 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 rounded-lg border border-border bg-card px-3 py-2.5"
+    >
+      <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 rounded-md border border-border p-0.5"
+        >
+          {sorts.map((sort) => (
+            <a
+              key={sort.label}
+              href={sort.href}
+              {...(sort.isCurrent ? { 'aria-current': 'true' as const } : {})}
+              className={`rounded px-2.5 py-1 text-xs font-medium ${
+                sort.isCurrent
+                  ? 'bg-secondary text-foreground'
+                  : 'text-muted-foreground hover:bg-muted hover:text-foreground'
+              }`}
+            >
+              {sort.label}
+            </a>
+          ))}
+        </nav>
+
+        {applied.map((chip) => (
+          <a
+            key={chip.label}
+            href={chip.removeHref}
+            className="inline-flex items-center gap-1.5 rounded-full border border-primary/40 bg-primary/10 px-2.5 py-1 text-xs font-medium text-foreground 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) => (
+          <Filter
+            key={choice.field}
+            label={choice.label}
+            name={choice.field}
+            options={choice.options}
+          />
+        ))}
+
+        <button
+          type="submit"
+          className={cn(buttonVariants({ variant: 'secondary', size: 'sm' }), 'h-8')}
+        >
+          {submitLabel}
+        </button>
+
+        {clearHref !== null && (
+          <a href={clearHref} className={`text-xs font-medium text-foreground ${LINK}`}>
+            Clear filters
+          </a>
+        )}
+      </form>
+
+      {note !== null && <p className="text-xs text-muted-foreground">{note}</p>}
+    </section>
+  )
+}
+
+function Filter({
+  label,
+  name,
+  options,
+}: {
+  label: string
+  name: string
+  options: readonly OptionModel[]
+}) {
+  const selected = options.find((option) => option.isSelected)
+  const id = `filter-${name}`
+
+  return (
+    <span className="inline-flex items-center gap-1.5">
+      <label htmlFor={id} className="text-xs font-medium text-muted-foreground">
+        {label}
+      </label>
+      <NativeSelect
+        id={id}
+        name={name}
+        defaultValue={selected?.value ?? ''}
+        className="h-8 w-auto min-w-0 py-0 text-xs"
+      >
+        {options.map((option) => (
+          <option key={option.value} value={option.value}>
+            {option.label}
+          </option>
+        ))}
+      </NativeSelect>
+    </span>
+  )
+}