highsoft-ui 1.0.140 → 1.0.141

package/dist/lib/components/InputSolo/index.d.ts

@@ -1,8 +1,19 @@
 import { InputHTMLAttributes, ReactNode } from 'react';
 export type InputSoloVariant = 'default' | 'white';
+/**
+ * Field size. Each value pairs with the matching Button/ButtonGroup size for
+ * inline layouts:
+ * - `100` — compact (28px tall). Matches the outer height of a `ButtonGroup`
+ *   at `size={100}`, so the two sit flush side by side.
+ * - `200` — default (40px tall).
+ * - `300` — large (48px tall).
+ */
+export type InputSoloSize = 100 | 200 | 300;
 export interface InputSoloProps extends Omit<InputHTMLAttributes<HTMLInputElement>, 'size'> {
     /** Label shown above the input */
     label?: string;
+    /** Field size — `100` (compact), `200` (default), `300` (large) */
+    size?: InputSoloSize;
     /** Icon element rendered to the left of the input */
     iconLeft?: ReactNode;
     /** Button or action element rendered on the right */

package/dist/lib/components/Logo/index.d.ts

@@ -4,5 +4,10 @@ export interface LogoProps extends SVGProps<SVGSVGElement> {
     showText?: boolean;
     light?: boolean;
     withLink?: boolean;
+    /**
+     * Render the mark as single-color line art — the symbol facets are stroked
+     * instead of filled. Use for grayscale printing, engraving, or apparel.
+     */
+    outline?: boolean;
 }
-export declare function Logo({ title, light, showText, withLink, className, ...props }: LogoProps): import("react").JSX.Element;
+export declare function Logo({ title, light, showText, withLink, outline, className, ...props }: LogoProps): import("react").JSX.Element;

package/dist/lib/components/SearchDropdown/index.d.ts

@@ -0,0 +1,69 @@
+import { ReactNode } from 'react';
+import { InputSoloSize, InputSoloVariant } from '../InputSolo';
+export interface SearchDropdownItem {
+    /** Stable unique key for the row. */
+    id: string;
+    /** Text shown in the row and used for match highlighting. */
+    label: string;
+    /** Optional short badge shown on the right (e.g. a category/kind). */
+    kind?: ReactNode;
+    /** Optional leading icon, rendered before the label. */
+    iconLeft?: ReactNode;
+    /** Render the row dimmed and non-selectable. */
+    disabled?: boolean;
+    /**
+     * Offset into `label` from which highlighting may start. Use to skip a
+     * prefix you don't want matched — e.g. for `Highcharts.Chart`, pass the index
+     * just after the dot so only `Chart` highlights. Defaults to `0`.
+     */
+    highlightFrom?: number;
+}
+export interface SearchDropdownProps<T extends SearchDropdownItem = SearchDropdownItem> {
+    /** Items to search over (built-in filter) or the already-filtered list. */
+    items: T[];
+    /** Controlled query value. */
+    value?: string;
+    /** Initial query for uncontrolled usage. */
+    defaultValue?: string;
+    /** Called on every query change — run your own filter/rank here if needed. */
+    onQueryChange?: (query: string) => void;
+    /** Called when an item is chosen (click or Enter). */
+    onSelect?: (item: T) => void;
+    /**
+     * How to filter `items` against the query:
+     * - `true` (default) — built-in case-insensitive substring match on `label`.
+     * - a function — your own predicate `(item, query) => boolean`.
+     * - `false` — no filtering; `items` is assumed pre-filtered/ranked by the
+     *   caller (pair with `onQueryChange`). Highlighting still applies.
+     */
+    filter?: boolean | ((item: T, query: string) => boolean);
+    /** Placeholder for the input. */
+    placeholder?: string;
+    /** Visible label above the input. Omit for a bare field. */
+    label?: string;
+    /** Accessible name for the input. Defaults to `label` then `placeholder`. */
+    'aria-label'?: string;
+    /** Field size, forwarded to the underlying `InputSolo`. Default `200`. */
+    size?: InputSoloSize;
+    /** Surface variant, forwarded to `InputSolo`. */
+    variant?: InputSoloVariant;
+    /** Leading icon for the input. Defaults to a search glyph. */
+    iconLeft?: ReactNode;
+    /** Render row labels in a monospace font (handy for code/API names). */
+    mono?: boolean;
+    /** Minimum query length before the popover opens. Default `1`. */
+    minChars?: number;
+    /**
+     * Shown when the query is long enough but nothing matches. Defaults to
+     * `'No results'`; pass `null` to hide the popover instead.
+     */
+    emptyState?: ReactNode;
+    /** Max popover height before it scrolls. Number → px. Default `320`. */
+    maxHeight?: number | string;
+    /** Class applied to the positioning wrapper. */
+    className?: string;
+}
+export declare function SearchDropdown<T extends SearchDropdownItem = SearchDropdownItem>({ items, value, defaultValue, onQueryChange, onSelect, filter, placeholder, label, 'aria-label': ariaLabel, size, variant, iconLeft, mono, minChars, emptyState, maxHeight, className }: SearchDropdownProps<T>): import("react").JSX.Element;
+export declare namespace SearchDropdown {
+    var displayName: string;
+}

package/dist/lib/main.d.ts

@@ -9,7 +9,8 @@ export type { IconProps, IconSize } from './components/Icon';
 export type { LinkProps, LinkVariant } from './components/Link';
 export type { ProductIconProps, ProductIconTheme, ProductIconName } from './components/ProductIcon';
 export type { FrameworkIconProps, FrameworkIconTheme, FrameworkIconName } from './components/FrameworkIcon';
-export type { InputSoloProps, InputSoloVariant } from './components/InputSolo';
+export type { InputSoloProps, InputSoloVariant, InputSoloSize } from './components/InputSolo';
+export type { SearchDropdownProps, SearchDropdownItem } from './components/SearchDropdown';
 export type { InputGroupedProps, SelectGroupedProps, FormGroupProps, FormRowProps } from './components/InputGrouped';
 export type { BoxProps } from './components/Box';
 export type { HeaderProps, HeaderPosition, SubHeaderItem } from './components/Header';
@@ -25,6 +26,7 @@ export { FrameworkIcon } from './components/FrameworkIcon';
 export { Button } from './components/Button';
 export { ButtonGroup } from './components/ButtonGroup';
 export { InputSolo } from './components/InputSolo';
+export { SearchDropdown } from './components/SearchDropdown';
 export { InputGrouped, SelectGrouped, FormGroup, FormRow } from './components/InputGrouped';
 export { Container } from './components/Container';
 export { DiscordInvite } from './components/DiscordInvite';

package/dist/main.js

@@ -1,33 +1,34 @@
 import { c as e, d as t, r as n, s as r, u as i } from "./utils-K9S_6_Eq.js";
 import { t as a } from "./Box-BZgeSeCV.js";
-import { t as o } from "./Button-Dc8NFRWQ.js";
-import { t as s } from "./CopyCode-DH9Jh7PD.js";
+import { t as o } from "./Button-awCDIEXQ.js";
+import { t as s } from "./CopyCode-QiPNPCQN.js";
 import { t as c } from "./FrameworkIcon-Ds6WrxO0.js";
-import { t as l } from "./CodeBlock-BreFXfK5.js";
+import { t as l } from "./CodeBlock-BIdeK3gz.js";
 import { t as u } from "./Icon-VeXJMj8Q.js";
 import { t as d } from "./Link-CYR92_U0.js";
 import { t as f } from "./ProductIcon-DFLAYWbu.js";
-import { t as p } from "./ButtonGroup-CYmrw7gQ.js";
-import { t as m } from "./InputSolo-2RPRX0wM.js";
-import { i as h, n as g, r as _, t as v } from "./InputGrouped-CIokpRn5.js";
-import { t as y } from "./Container-BDssaLig.js";
-import { t as b } from "./DiscordInvite-CLYxexdH.js";
-import { t as x } from "./Heading-DNDHqYWO.js";
-import { t as S } from "./Typography-AvvBRu-u.js";
-import { t as C } from "./Logo-DTfFHBgU.js";
-import { t as w } from "./NewsletterSignup-Dw9YbhEh.js";
-import { n as T, r as E, t as D } from "./Dropdown-DbXr3sb-.js";
-import { t as O } from "./PrefPanel-BG4jW8wc.js";
-import { n as k, t as A } from "./Label-BM4vL0vA.js";
-import { t as j } from "./Footer-DtFs2Sgb.js";
-import { n as M } from "./GPTInput-C0YG1990.js";
-import { t as N } from "./Notification-BgmhEw6w.js";
-import { n as P, t as F } from "./Header-C7MCiwiz.js";
-import { t as I } from "./Tabs-BuDaPqdN.js";
-import { n as L, t as R } from "./RadioBox-o1Ssyj0s.js";
-import { n as z, t as B } from "./Checkbox-CErz7eBz.js";
-import { Modal as V } from "./components/Modal/index.js";
-import { t as H } from "./RoadmapDetails-DXxJNZh9.js";
-import { ModalContactFooter as U } from "./components/Modal/ModalContactFooter.js";
-import { ThemeLoader as W, themeLoaderScript as G } from "./components/ThemeLoader/index.js";
-export { a as Box, o as Button, p as ButtonGroup, B as Checkbox, z as CheckboxGroup, l as CodeBlock, y as Container, s as CopyCode, b as DiscordInvite, D as Dropdown, T as DropdownItem, E as DropdownSeparator, j as Footer, v as FormGroup, g as FormRow, c as FrameworkIcon, M as GPTInput, F as Header, x as Heading, u as Icon, _ as InputGrouped, m as InputSolo, A as Label, d as Link, C as Logo, V as Modal, U as ModalContactFooter, k as NewTag, w as NewsletterSignup, N as Notification, O as PrefPanel, f as ProductIcon, R as RadioBox, L as RadioBoxGroup, H as RoadmapDetails, h as SelectGrouped, P as SubHeader, I as Tabs, W as ThemeLoader, i as ThemeProvider, S as Typography, G as themeLoaderScript, n as useClipboard, t as useNextTheme, r as useSuccessFlash, e as useTheme };
+import { t as p } from "./ButtonGroup-Cwn0djAz.js";
+import { t as m } from "./InputSolo-DUdKtZjX.js";
+import { t as h } from "./SearchDropdown-D65lySm_.js";
+import { i as g, n as _, r as v, t as y } from "./InputGrouped-DyxraUpb.js";
+import { t as b } from "./Container-BDssaLig.js";
+import { t as x } from "./DiscordInvite-CLYxexdH.js";
+import { t as S } from "./Heading-DNDHqYWO.js";
+import { t as C } from "./Typography-AvvBRu-u.js";
+import { t as w } from "./Logo-Bz0G2G-k.js";
+import { t as T } from "./NewsletterSignup-BMRnrbw8.js";
+import { n as E, r as D, t as O } from "./Dropdown-0Vn7yro7.js";
+import { t as k } from "./PrefPanel-DDD8R_-o.js";
+import { n as A, t as j } from "./Label-DdXaM1Bo.js";
+import { t as M } from "./Footer-BlCmsIDd.js";
+import { n as N } from "./GPTInput-C0YG1990.js";
+import { t as P } from "./Notification-DM31Uzfz.js";
+import { n as F, t as I } from "./Header-DY4mJxHm.js";
+import { t as L } from "./Tabs-BuDaPqdN.js";
+import { n as R, t as z } from "./RadioBox-o1Ssyj0s.js";
+import { n as B, t as V } from "./Checkbox-CrF45NBl.js";
+import { Modal as H } from "./components/Modal/index.js";
+import { t as U } from "./RoadmapDetails-DsLtsnqg.js";
+import { ModalContactFooter as W } from "./components/Modal/ModalContactFooter.js";
+import { ThemeLoader as G, themeLoaderScript as K } from "./components/ThemeLoader/index.js";
+export { a as Box, o as Button, p as ButtonGroup, V as Checkbox, B as CheckboxGroup, l as CodeBlock, b as Container, s as CopyCode, x as DiscordInvite, O as Dropdown, E as DropdownItem, D as DropdownSeparator, M as Footer, y as FormGroup, _ as FormRow, c as FrameworkIcon, N as GPTInput, I as Header, S as Heading, u as Icon, v as InputGrouped, m as InputSolo, j as Label, d as Link, w as Logo, H as Modal, W as ModalContactFooter, A as NewTag, T as NewsletterSignup, P as Notification, k as PrefPanel, f as ProductIcon, z as RadioBox, R as RadioBoxGroup, U as RoadmapDetails, h as SearchDropdown, g as SelectGrouped, F as SubHeader, L as Tabs, G as ThemeLoader, i as ThemeProvider, C as Typography, K as themeLoaderScript, n as useClipboard, t as useNextTheme, r as useSuccessFlash, e as useTheme };

package/dist/{prism-light-hml_uDoc.js → prism-light-B3yrtgki.js}

@@ -1,5 +1,5 @@
 import { r as e } from "./chunk-jwUa06l-.js";
-import { r as t, t as n } from "./create-element-B4K6TXvP.js";
+import { r as t, t as n } from "./create-element-CWTzyETe.js";
 import r from "react";
 //#region node_modules/@babel/runtime/helpers/esm/objectWithoutPropertiesLoose.js
 function i(e, t) {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "highsoft-ui",
-  "version": "1.0.140",
+  "version": "1.0.141",
   "description": "Highsoft UI",
   "type": "module",
   "repository": {
@@ -35,14 +35,21 @@
     "claude"
   ],
   "scripts": {
-    "dev": "vite",
+    "generate:api": "node scripts/extract-component-api.mjs",
+    "predev": "node scripts/extract-component-api.mjs",
+    "dev": "astro dev",
     "build": "tsc -p ./tsconfig.build.json && vite build",
+    "build:app": "astro build",
+    "preview:app": "astro preview --port 4180",
+    "sync:storybook": "node scripts/sync-storybook-index.mjs",
+    "test": "node --test",
     "lint": "eslint . --report-unused-disable-directives --max-warnings 0",
     "preview": "vite preview",
     "storybook": "storybook dev -p 6006",
     "build-storybook": "storybook build",
     "prettier": "npx prettier . --write",
     "prettier-ci": "npx prettier . --check",
+    "prebuild:app": "node scripts/extract-component-api.mjs",
     "icons": "node scripts/convert-product-icons.cjs",
     "icons:frameworks": "node scripts/convert-framework-icons.cjs",
     "stylelint": "npx stylelint '**/*.css'",
@@ -63,14 +70,18 @@
   "author": "",
   "license": "ISC",
   "dependencies": {
+    "@astrojs/react": "^6.0.0",
+    "@paper-design/shaders-react": "^0.0.76",
     "@untitled-ui/icons-react": "^0.1.4",
     "addsearch-js-client": "^1.2.1",
+    "astro": "^7.0.0",
     "clsx": "^2.1.0",
     "highsoft-design-tokens": "^2.10.0",
     "modern-normalize": "^3.0.1",
     "next-themes": "^0.4.6",
     "radix-ui": "^1.4.1",
     "react-icons": "^5.5.0",
+    "react-router-dom": "^7.18.0",
     "react-syntax-highlighter": "^16.1.1"
   },
   "devDependencies": {

package/dist/InputSolo-2RPRX0wM.js

@@ -1,123 +0,0 @@
-import { t as e } from "./clsx-BWCAbrjV.js";
-import { forwardRef as t, useCallback as n, useEffect as r, useId as i, useRef as a, useState as o } from "react";
-import { jsx as s, jsxs as c } from "react/jsx-runtime";
-var l = {
-	autofilled: "YDdfMa_autofilled",
-	buttonSlot: "YDdfMa_buttonSlot",
-	default: "YDdfMa_default",
-	dirty: "YDdfMa_dirty",
-	disabled: "YDdfMa_disabled",
-	field: "YDdfMa_field",
-	focus: "YDdfMa_focus",
-	hasError: "YDdfMa_hasError",
-	helpText: "YDdfMa_helpText",
-	iconLeft: "YDdfMa_iconLeft",
-	inputElement: "YDdfMa_inputElement",
-	inputRow: "YDdfMa_inputRow",
-	inputSolo: "YDdfMa_inputSolo",
-	label: "YDdfMa_label",
-	labelRow: "YDdfMa_labelRow",
-	onAutoFillStart: "YDdfMa_onAutoFillStart",
-	required: "YDdfMa_required",
-	success: "YDdfMa_success",
-	white: "YDdfMa_white"
-}, u = t(({ label: t, iconLeft: u, button: d, helpText: f, showHelpText: p, variant: m = "default", hasError: h = !1, success: g = !1, disabled: _ = !1, required: v = !1, className: y, wrapperClassName: b, onFocus: x, onBlur: S, id: C, "aria-label": w, "aria-describedby": T, value: E, defaultValue: D, onChange: O, ...k }, A) => {
-	let j = a(null), M = A || j, N = i(), [P, F] = o(!1), [I, L] = o(!1), [R, z] = o(D === void 0 ? "" : String(D)), B = E !== void 0, V = p ?? !!f, H = V && f ? `${C ?? N}-help-text` : void 0, U = [T, H].filter(Boolean).join(" ") || void 0, W = B ? String(E ?? "").length > 0 : R.length > 0, G = n((e) => {
-		e.animationName.includes("onAutoFillStart") && L(!0);
-	}, []);
-	r(() => {
-		let e = M.current;
-		if (!e) return;
-		let t = () => {
-			try {
-				e.matches(":-webkit-autofill") && L(!0);
-			} catch {}
-		}, n = setTimeout(t, 100), r = setTimeout(t, 500);
-		return () => {
-			clearTimeout(n), clearTimeout(r);
-		};
-	}, [M]);
-	let K = n((e) => {
-		F(!0), x?.(e);
-	}, [x]), q = n((e) => {
-		F(!1), S?.(e);
-	}, [S]), J = n((e) => {
-		B || z(e.target.value), O?.(e);
-	}, [B, O]);
-	return /* @__PURE__ */ c("div", {
-		onClick: n(() => {
-			!_ && M.current && M.current.focus();
-		}, [_, M]),
-		className: e("hsui-input-solo", l.inputSolo, {
-			[l[m]]: m,
-			[l.focus]: P,
-			[l.hasError]: h,
-			[l.success]: g,
-			[l.disabled]: _,
-			[l.dirty]: W || I,
-			[l.autofilled]: I
-		}, b),
-		children: [
-			t && /* @__PURE__ */ s("div", {
-				className: l.labelRow,
-				children: C ? /* @__PURE__ */ c("label", {
-					className: l.label,
-					htmlFor: C,
-					children: [t, v && /* @__PURE__ */ s("span", {
-						className: l.required,
-						children: " *"
-					})]
-				}) : /* @__PURE__ */ c("span", {
-					className: l.label,
-					children: [t, v && /* @__PURE__ */ s("span", {
-						className: l.required,
-						children: " *"
-					})]
-				})
-			}),
-			/* @__PURE__ */ s("div", {
-				className: l.field,
-				children: /* @__PURE__ */ c("div", {
-					className: l.inputRow,
-					children: [
-						u && /* @__PURE__ */ s("span", {
-							className: l.iconLeft,
-							children: u
-						}),
-						/* @__PURE__ */ s("input", {
-							ref: M,
-							id: C,
-							className: e(l.inputElement, y),
-							disabled: _,
-							required: v,
-							"aria-invalid": h,
-							"aria-label": w ?? t,
-							"aria-describedby": U,
-							value: E,
-							defaultValue: D,
-							onFocus: K,
-							onBlur: q,
-							onChange: J,
-							onAnimationStart: G,
-							...k
-						}),
-						d && /* @__PURE__ */ s("span", {
-							className: l.buttonSlot,
-							onClick: (e) => e.stopPropagation(),
-							onMouseDown: (e) => e.stopPropagation(),
-							children: d
-						})
-					]
-				})
-			}),
-			V && f && /* @__PURE__ */ s("span", {
-				id: H,
-				className: l.helpText,
-				children: f
-			})
-		]
-	});
-});
-u.displayName = "InputSolo";
-//#endregion
-export { u as t };