@moyarich/console-addon-search 0.0.0-stage → 0.1.0

package/README.md

@@ -1,3 +1,33 @@
-# Temporary Holding Version
+# @moyarich/console-addon-search
 
-This version is a temporary placeholder for this package. An operational version to replace this has been submitted for review and is awaiting a staged release.
+Search and highlight output. Find text matches, move between occurrences, and use optional controls and an observable controller.
+
+## Install
+
+```bash
+npm install @moyarich/console @moyarich/console-addon-search
+```
+
+## Quick start
+
+```tsx
+import { Console } from "@moyarich/console";
+import { createConsoleSearchAddon } from "@moyarich/console-addon-search";
+
+const addons = [createConsoleSearchAddon()];
+
+// Pass your application's structured messages to Console.
+<Console messages={messages} addons={addons} />;
+```
+
+The addon is optional and can be combined with other Console addons. The host application remains responsible for supplying and retaining messages.
+
+## Learn more
+
+Explore [runnable package examples](./examples) and the [Console documentation](https://moyarich.github.io/console/) for available settings and integration patterns.
+
+Review the [changelog](./CHANGELOG.md) for changes by version and [package metadata](./package.json) for dependency requirements.
+
+## License
+
+MIT

package/dist/components/ConsoleSearchControls/ConsoleSearchControls.d.ts

@@ -0,0 +1,5 @@
+import type { ConsoleSearchController } from "../../index";
+import "./ConsoleSearchControls.css";
+export declare function ConsoleSearchControls({ controller, }: {
+    controller: ConsoleSearchController;
+}): import("react").JSX.Element;

package/dist/components/ConsoleSearchHighlight/ConsoleSearchHighlight.d.ts

@@ -0,0 +1,6 @@
+import type { ConsoleSearchController } from "../../index";
+import "./ConsoleSearchHighlight.css";
+export declare function ConsoleSearchHighlight({ controller, index, }: {
+    controller: ConsoleSearchController;
+    index: number;
+}): import("react").JSX.Element | null;

package/dist/console-addon-search.css

@@ -0,0 +1,89 @@
+/* Public --console-search-* inputs resolve to private component-local tokens. */
+.console-search-controls {
+  --_console-search-background-color: var(
+    --console-search-background-color,
+    var(--console-panel-background-color, transparent)
+  );
+  --_console-search-color: var(
+    --console-search-color,
+    var(--console-panel-color, inherit)
+  );
+  --_console-search-border-color: var(
+    --console-search-border-color,
+    var(--console-panel-color, currentColor)
+  );
+  --_console-search-focus-color: var(
+    --console-search-focus-color,
+    var(--console-header-icon-color, currentColor)
+  );
+
+  display: flex;
+  flex-wrap: wrap;
+  align-items: center;
+  gap: 0.65rem;
+  padding: 0.5rem;
+  border-bottom: 1px solid var(--_console-search-border-color);
+  background: var(--_console-search-background-color);
+  color: var(--_console-search-color);
+  font: inherit;
+}
+
+.console-search-controls label {
+  display: inline-flex;
+  align-items: center;
+  gap: 0.35rem;
+}
+
+.console-search-controls input[type="search"] {
+  min-width: 12rem;
+  max-width: 100%;
+  background: var(--_console-search-background-color);
+  color: var(--_console-search-color);
+  border: 1px solid var(--_console-search-border-color);
+  border-radius: 4px;
+  padding: 0.3rem 0.5rem;
+}
+
+.console-search-controls button {
+  border: 1px solid var(--_console-search-border-color);
+  background: var(--_console-search-background-color);
+  color: var(--_console-search-color);
+  padding: 0.3rem 0.5rem;
+  border-radius: 4px;
+  cursor: pointer;
+}
+
+.console-search-controls :focus-visible {
+  outline: 2px solid var(--_console-search-focus-color);
+  outline-offset: 2px;
+}
+
+.console-search-controls button:disabled {
+  opacity: 0.5;
+  cursor: default;
+}
+/* Search match colors can be themed independently from the Console panel. */
+.console-search-highlight {
+  --_console-search-highlight-background-color: var(
+    --console-search-highlight-background-color,
+    light-dark(#ffdf70, #745b16)
+  );
+  --_console-search-highlight-color: var(
+    --console-search-highlight-color,
+    light-dark(#231c00, #fff7d6)
+  );
+  --_console-search-highlight-active-color: var(
+    --console-search-highlight-active-color,
+    var(--console-header-icon-color, currentColor)
+  );
+
+  background: var(--_console-search-highlight-background-color);
+  color: var(--_console-search-highlight-color);
+  border-radius: 2px;
+  padding: 0 0.2em;
+}
+
+.console-search-highlight[data-active] {
+  outline: 2px solid var(--_console-search-highlight-active-color);
+  outline-offset: 1px;
+}