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

package/dist/styles.css

@@ -0,0 +1,169 @@
+/* src/components/ConsoleSearchControls/ConsoleSearchControls.css */
+/* 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;
+}
+
+/* src/components/ConsoleSearchHighlight/ConsoleSearchHighlight.css */
+/* 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;
+}

package/package.json

@@ -1,6 +1,69 @@
 {
   "name": "@moyarich/console-addon-search",
-  "version": "0.0.0-stage",
-  "stub": true,
-  "description": "Temporary package placeholder for staged publishing"
-}
+  "version": "0.2.0",
+  "description": "Optional text search and match navigation for Console",
+  "license": "MIT",
+  "type": "module",
+  "main": "./dist/index.cjs",
+  "module": "./dist/index.js",
+  "types": "./dist/index.d.ts",
+  "exports": {
+    ".": {
+      "import": {
+        "types": "./dist/index.d.ts",
+        "default": "./dist/index.js"
+      },
+      "require": {
+        "types": "./dist/index.d.cts",
+        "default": "./dist/index.cjs"
+      }
+    },
+    "./styles.css": "./dist/styles.css"
+  },
+  "files": [
+    "dist"
+  ],
+  "publishConfig": {
+    "registry": "https://npm.pkg.github.com"
+  },
+  "scripts": {
+    "build": "vite build && tsc -p tsconfig.build.json && node ../../../scripts/prepare-cjs-types.mjs && node ../../../scripts/prepare-addon-styles.mjs",
+    "typecheck": "tsc --noEmit"
+  },
+  "peerDependencies": {
+    "@moyarich/console-core": "^0.2.0",
+    "react": ">=18"
+  },
+  "devDependencies": {
+    "@moyarich/console-core": "0.2.0",
+    "typescript": "^5.9.2",
+    "vite": "^7.1.5",
+    "react": "^19.2.7",
+    "@types/react": "^19.1.12"
+  },
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/moyarich/console.git",
+    "directory": "packages/addons/search"
+  },
+  "bugs": {
+    "url": "https://github.com/moyarich/console/issues"
+  },
+  "homepage": "https://github.com/moyarich/console#readme",
+  "keywords": [
+    "console",
+    "addon",
+    "search"
+  ],
+  "sideEffects": [
+    "./src/components/ConsoleSearchControls/ConsoleSearchControls.css",
+    "./src/components/ConsoleSearchHighlight/ConsoleSearchHighlight.css",
+    "./dist/styles.css"
+  ],
+  "publisher": "moyarich",
+  "author": "Moya Richards",
+  "engines": {
+    "node": ">=24"
+  },
+  "private": false
+}