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

package/README.md

@@ -1,3 +1,39 @@
-# 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.
+
+[Documentation and live examples](https://moyarich.github.io/console/)
+
+## Install
+
+```bash
+npm install @moyarich/console @moyarich/console-addon-search react
+```
+
+Configure the `@moyarich` scope and authenticate with GitHub Packages as described in the [installation guide](../../../README.md#installation).
+
+Required peer dependencies: `@moyarich/console-core@^0.2.0`, `react@>=18`.
+
+## 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.cts

@@ -0,0 +1,8 @@
+import { type AddonTranslations } from "../../localization.cjs";
+import type { ConsoleSearchController } from "../../index.cjs";
+
+export declare function ConsoleSearchControls({ controller, locale, translations, }: {
+    controller: ConsoleSearchController;
+    locale?: string;
+    translations?: AddonTranslations;
+}): import("react").JSX.Element;

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

@@ -0,0 +1,8 @@
+import { type AddonTranslations } from "../../localization.js";
+import type { ConsoleSearchController } from "../../index.js";
+
+export declare function ConsoleSearchControls({ controller, locale, translations, }: {
+    controller: ConsoleSearchController;
+    locale?: string;
+    translations?: AddonTranslations;
+}): import("react").JSX.Element;

package/dist/components/ConsoleSearchHighlight/ConsoleSearchHighlight.d.cts

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

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

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

package/dist/console-addon-search.css

@@ -0,0 +1,166 @@
+/* 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, light-dark(#27272a, #f4f4f5))
+  );
+  --_console-search-border-color: var(
+    --console-search-border-color,
+    color-mix(in srgb, var(--_console-search-color) 16%, transparent)
+  );
+  --_console-search-focus-color: var(--console-search-focus-color, #635bff);
+
+  box-sizing: border-box;
+  flex: 1 1 22rem;
+  min-width: 0;
+  display: grid;
+  gap: 8px;
+  padding: 12px;
+  background: var(--_console-search-background-color);
+  color: var(--_console-search-color);
+  font:
+    400 12px/1.4 ui-sans-serif,
+    system-ui,
+    sans-serif;
+}
+
+.console-search-controls-row {
+  display: flex;
+  align-items: center;
+  gap: 4px;
+  min-width: 0;
+  padding-inline-end: 4px;
+  border: 1px solid var(--_console-search-border-color);
+  border-radius: 8px;
+  background: color-mix(
+    in srgb,
+    var(--_console-search-color) 3%,
+    var(--_console-search-background-color)
+  );
+}
+
+.console-search-controls-field {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  flex: 1;
+  min-width: 0;
+  padding-inline-start: 10px;
+}
+
+.console-search-controls-field svg {
+  flex-shrink: 0;
+  opacity: 0.6;
+}
+
+.console-search-controls input[type="search"] {
+  box-sizing: border-box;
+  width: 100%;
+  min-width: 0;
+  border: 0;
+  padding: 9px 0;
+  background: transparent;
+  color: inherit;
+  font: inherit;
+}
+
+.console-search-controls input::placeholder {
+  color: inherit;
+  opacity: 0.55;
+}
+
+.console-search-controls-row:focus-within {
+  border-color: var(--_console-search-focus-color);
+  box-shadow: 0 0 0 2px
+    color-mix(in srgb, var(--_console-search-focus-color) 15%, transparent);
+}
+
+.console-search-controls-row [role="status"] {
+  max-width: 10rem;
+  font-size: 11px;
+  opacity: 0.65;
+}
+
+.console-search-controls button {
+  flex-shrink: 0;
+  width: 28px;
+  height: 28px;
+  padding: 0;
+  border: 0;
+  border-radius: 5px;
+  background: transparent;
+  color: inherit;
+  font: inherit;
+  font-size: 16px;
+  cursor: pointer;
+}
+
+.console-search-controls button:hover:not(:disabled) {
+  background: color-mix(in srgb, var(--_console-search-color) 9%, transparent);
+}
+
+.console-search-controls-options {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 6px 14px;
+}
+
+.console-search-controls-options label {
+  display: inline-flex;
+  align-items: center;
+  gap: 5px;
+  cursor: pointer;
+}
+
+.console-search-controls input[type="checkbox"] {
+  margin: 0;
+  accent-color: var(--_console-search-focus-color);
+}
+
+.console-search-controls :focus-visible {
+  outline: 2px solid var(--_console-search-focus-color);
+  outline-offset: 2px;
+}
+
+.console-search-controls input[type="search"]:focus-visible {
+  outline: none;
+}
+
+.console-search-controls button:disabled {
+  opacity: 0.3;
+  cursor: default;
+}
+
+.console-search-controls-error {
+  color: var(--console-error-color, light-dark(#b42318, #fda4af));
+  overflow-wrap: anywhere;
+}
+/* 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;
+}