highsoft-ui 1.0.140 → 1.0.143

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/components/Sidebar/NavDisclosure.d.ts

@@ -0,0 +1,14 @@
+import { ReactNode } from 'react';
+export interface NavDisclosureProps {
+    /** Label on the tap-to-expand toggle (shown only on narrow screens). */
+    label: ReactNode;
+    children: ReactNode;
+    className?: string;
+}
+/**
+ * Wraps a nav tree so that on narrow / docked layouts it collapses behind a
+ * tap-to-expand toggle, keeping content above the fold. On desktop the wrapper
+ * is inert (`display: contents`) — the children stay direct flex descendants of
+ * the sidebar body and keep their fill-and-scroll behaviour.
+ */
+export declare function NavDisclosure({ label, children, className }: NavDisclosureProps): import("react").JSX.Element;

package/dist/lib/components/Sidebar/NavGroup.d.ts

@@ -0,0 +1,25 @@
+import { ReactNode } from 'react';
+export interface NavGroupProps {
+    /** The group's label, shown on the toggle row. */
+    label: ReactNode;
+    children: ReactNode;
+    /** Leading icon (16×16) shown before the label. */
+    icon?: ReactNode;
+    /** Open on first render (uncontrolled). Ignored when `open` is provided. */
+    defaultOpen?: boolean;
+    /** Controlled open state. Provide together with `onOpenChange`. */
+    open?: boolean;
+    onOpenChange?: (open: boolean) => void;
+    /**
+     * Marks this group as lying on the path to the active item — tints its
+     * guide-line so the trail to the current page stands out. Set it when a
+     * descendant <NavItem> is `active`.
+     */
+    active?: boolean;
+    className?: string;
+}
+/**
+ * An expandable nav node — a toggle row that discloses a nested list of
+ * <NavItem>s (or further <NavGroup>s). Works controlled or uncontrolled.
+ */
+export declare function NavGroup({ label, children, icon, defaultOpen, open: openProp, onOpenChange, active, className }: NavGroupProps): import("react").JSX.Element;

package/dist/lib/components/Sidebar/NavItem.d.ts

@@ -0,0 +1,15 @@
+import { ElementType, ComponentPropsWithoutRef, ReactNode } from 'react';
+export type NavItemProps<T extends ElementType = 'a'> = {
+    as?: T;
+    /** Marks the item as the current page (brand-tinted, aria-current). */
+    active?: boolean;
+    /** Leading icon (16×16). */
+    icon?: ReactNode;
+    children?: ReactNode;
+} & Omit<ComponentPropsWithoutRef<T>, 'as'>;
+/**
+ * A single navigation link. Polymorphic — renders as `<a>` by default, or pass
+ * `as={RouterLink}` / `as="button"` for SPA navigation. Selecting an item
+ * automatically closes the mobile drawer when inside a <SidebarLayout>.
+ */
+export declare const NavItem: import('react').ForwardRefExoticComponent<Omit<NavItemProps<ElementType>, "ref"> & import('react').RefAttributes<any>>;

package/dist/lib/components/Sidebar/Sidebar.d.ts

@@ -0,0 +1,46 @@
+import { ReactNode } from 'react';
+export interface SidebarProps {
+    children: ReactNode;
+    /** Accessible label for the navigation landmark. */
+    'aria-label'?: string;
+    /** Label on the mobile drawer's close button. Default "Close navigation". */
+    closeLabel?: string;
+    className?: string;
+}
+/**
+ * The sidebar column. On desktop it's a fixed-position-free flex column filling
+ * the layout's first grid track; on narrow screens it becomes an off-canvas
+ * drawer driven by the layout's mobile state. Auto-renders the resize handle
+ * (when the layout is resizable) and the mobile close button.
+ */
+export declare function Sidebar({ children, 'aria-label': ariaLabel, closeLabel, className }: SidebarProps): import("react").JSX.Element;
+/** Fixed top region of the sidebar (switchers, search, logo). Does not scroll. */
+export declare function SidebarHeader({ children, className }: {
+    children: ReactNode;
+    className?: string;
+}): import("react").JSX.Element;
+/** Scrollable body of the sidebar — put nav sections / trees here. */
+export declare function SidebarBody({ children, className }: {
+    children: ReactNode;
+    className?: string;
+}): import("react").JSX.Element;
+export interface SidebarSectionProps {
+    children: ReactNode;
+    /** Section heading shown above the items. */
+    label?: ReactNode;
+    /**
+     * Surface a "Minimize" control that collapses every open <NavGroup> in this
+     * section. It appears only while at least one group is open. Default false.
+     */
+    collapsible?: boolean;
+    /** Label on the auto Minimize control. Default "Minimize". */
+    minimizeLabel?: ReactNode;
+    /**
+     * Custom control aligned to the right of the label. Overrides the auto
+     * Minimize button when provided.
+     */
+    action?: ReactNode;
+    className?: string;
+}
+/** A labelled group of nav items within the sidebar body. */
+export declare function SidebarSection({ children, label, collapsible, minimizeLabel, action, className }: SidebarSectionProps): import("react").JSX.Element;

package/dist/lib/components/Sidebar/SidebarLayout.d.ts

@@ -0,0 +1,41 @@
+import { ReactNode, CSSProperties } from 'react';
+export interface SidebarLayoutProps {
+    children: ReactNode;
+    /** Initial sidebar width in px. Default 320. */
+    defaultWidth?: number;
+    /** Smallest the sidebar can be dragged. Default 230. */
+    minWidth?: number;
+    /** Largest the sidebar can be dragged. Default 460. */
+    maxWidth?: number;
+    /** Show the drag-to-resize handle on desktop. Default true. */
+    resizable?: boolean;
+    /**
+     * localStorage key under which the chosen width is remembered. Omit to keep
+     * the width only for the current session (no persistence).
+     */
+    storageKey?: string;
+    /** Label on the mobile "open navigation" trigger bar. Default "Menu". */
+    mobileTriggerLabel?: ReactNode;
+    /**
+     * Grow to fill a flex/grid parent (sets `flex: 1 1 auto; min-height: 0`) so
+     * the shell takes the available height and the content column scrolls on its
+     * own. Default `true` — set `false` for a layout sized to its content.
+     */
+    fill?: boolean;
+    className?: string;
+    style?: CSSProperties;
+}
+/**
+ * The resizable two-column shell: a sidebar column (`--hs-sidebar-w` wide) and a
+ * fluid content column. Owns the resize width and the mobile drawer state, which
+ * <Sidebar>, <SidebarMain> and <NavItem> read from context.
+ *
+ * On narrow screens (<=760px) the grid collapses to a single column, the sidebar
+ * becomes an off-canvas drawer, and a sticky trigger bar appears at the top.
+ */
+export declare function SidebarLayout({ children, defaultWidth, minWidth, maxWidth, resizable, storageKey, mobileTriggerLabel, fill, className, style }: SidebarLayoutProps): import("react").JSX.Element;
+/** The fluid content column that sits beside the sidebar. */
+export declare function SidebarMain({ children, className, ...rest }: {
+    children: ReactNode;
+    className?: string;
+} & React.ComponentPropsWithoutRef<'main'>): import("react").JSX.Element;

package/dist/lib/components/Sidebar/SidebarResizer.d.ts

@@ -0,0 +1,6 @@
+/**
+ * Drag handle on the sidebar's right edge. Reads/writes the width through the
+ * layout context (which clamps and persists it) and is keyboard-operable via
+ * its `role="separator"` + arrow keys. The hatched edge is decorative.
+ */
+export declare function SidebarResizer(): import("react").JSX.Element;

package/dist/lib/components/Sidebar/context.d.ts

@@ -0,0 +1,29 @@
+export interface SidebarLayoutContextValue {
+    /** Whether the sidebar shows a drag-to-resize handle on desktop. */
+    resizable: boolean;
+    /** Current sidebar width in px (desktop). */
+    width: number;
+    /** Clamp + apply + persist a new sidebar width. */
+    setWidth: (w: number) => void;
+    minWidth: number;
+    maxWidth: number;
+    /** Whether the mobile off-canvas drawer is open. */
+    mobileOpen: boolean;
+    openMobile: () => void;
+    closeMobile: () => void;
+}
+export declare const SidebarLayoutContext: import('react').Context<SidebarLayoutContextValue | null>;
+/** Throws when used outside <SidebarLayout> — for components that require it. */
+export declare function useSidebarLayout(): SidebarLayoutContextValue;
+/** Non-throwing accessor — for components that also work standalone (NavItem). */
+export declare function useOptionalSidebarLayout(): SidebarLayoutContextValue | null;
+export interface SidebarSectionContextValue {
+    /** Bumped by the section's Minimize control to collapse its open groups. */
+    collapseNonce: number;
+    /** A descendant <NavGroup> reports its open state so the section knows
+     *  whether to surface the Minimize control. */
+    reportOpen: (id: string, open: boolean) => void;
+}
+export declare const SidebarSectionContext: import('react').Context<SidebarSectionContextValue | null>;
+/** Lets a <NavGroup> participate in its section's collapse-all behaviour. */
+export declare function useOptionalSidebarSection(): SidebarSectionContextValue | null;

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

@@ -0,0 +1,13 @@
+export { SidebarLayout, SidebarMain } from './SidebarLayout';
+export type { SidebarLayoutProps } from './SidebarLayout';
+export { Sidebar, SidebarHeader, SidebarBody, SidebarSection } from './Sidebar';
+export type { SidebarProps, SidebarSectionProps } from './Sidebar';
+export { SidebarResizer } from './SidebarResizer';
+export { NavItem } from './NavItem';
+export type { NavItemProps } from './NavItem';
+export { NavGroup } from './NavGroup';
+export type { NavGroupProps } from './NavGroup';
+export { NavDisclosure } from './NavDisclosure';
+export type { NavDisclosureProps } from './NavDisclosure';
+export { useSidebarLayout, useOptionalSidebarLayout } from './context';
+export type { SidebarLayoutContextValue } from './context';

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';
@@ -53,6 +55,8 @@ export { ModalContactFooter } from './components/Modal/ModalContactFooter';
 export type { ModalProps, ModalFooterType, ModalSubmitVariant } from './components/Modal';
 export type { ModalContactFooterProps } from './components/Modal/ModalContactFooter';
 export { Notification } from './components/Notification';
+export { SidebarLayout, SidebarMain, Sidebar, SidebarHeader, SidebarBody, SidebarSection, SidebarResizer, NavItem, NavGroup, NavDisclosure, useSidebarLayout, useOptionalSidebarLayout } from './components/Sidebar';
+export type { SidebarLayoutProps, SidebarProps, SidebarSectionProps, NavItemProps, NavGroupProps, NavDisclosureProps, SidebarLayoutContextValue } from './components/Sidebar';
 export { PrefPanel } from './components/PrefPanel';
 export { ThemeLoader, themeLoaderScript } from './components/ThemeLoader';
 export { useTheme, useClipboard, useSuccessFlash } from './utils';

package/dist/main.js

@@ -1,33 +1,42 @@
 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 { useOptionalSidebarLayout as G, useSidebarLayout as K } from "./components/Sidebar/context.js";
+import { SidebarLayout as q, SidebarMain as J } from "./components/Sidebar/SidebarLayout.js";
+import { SidebarResizer as Y } from "./components/Sidebar/SidebarResizer.js";
+import { Sidebar as X, SidebarBody as Z, SidebarHeader as Q, SidebarSection as $ } from "./components/Sidebar/Sidebar.js";
+import { NavItem as ee } from "./components/Sidebar/NavItem.js";
+import { NavGroup as te } from "./components/Sidebar/NavGroup.js";
+import { NavDisclosure as ne } from "./components/Sidebar/NavDisclosure.js";
+import "./components/Sidebar/index.js";
+import { ThemeLoader as re, themeLoaderScript as ie } 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, ne as NavDisclosure, te as NavGroup, ee as NavItem, 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, X as Sidebar, Z as SidebarBody, Q as SidebarHeader, q as SidebarLayout, J as SidebarMain, Y as SidebarResizer, $ as SidebarSection, F as SubHeader, L as Tabs, re as ThemeLoader, i as ThemeProvider, C as Typography, ie as themeLoaderScript, n as useClipboard, t as useNextTheme, G as useOptionalSidebarLayout, K as useSidebarLayout, 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/dist/styles.module-Bd4HbnpA.js

@@ -0,0 +1,42 @@
+var e = {
+	backdrop: "UvvIVG_backdrop",
+	backdropOpen: "UvvIVG_backdropOpen",
+	body: "UvvIVG_body",
+	close: "UvvIVG_close",
+	disclosure: "UvvIVG_disclosure",
+	disclosureBody: "UvvIVG_disclosureBody",
+	disclosureChevron: "UvvIVG_disclosureChevron",
+	disclosureToggle: "UvvIVG_disclosureToggle",
+	fill: "UvvIVG_fill",
+	groupActive: "UvvIVG_groupActive",
+	groupChevron: "UvvIVG_groupChevron",
+	groupChildren: "UvvIVG_groupChildren",
+	groupChildrenInner: "UvvIVG_groupChildrenInner",
+	groupLabel: "UvvIVG_groupLabel",
+	groupOpen: "UvvIVG_groupOpen",
+	groupToggle: "UvvIVG_groupToggle",
+	handle: "UvvIVG_handle",
+	hasStickyHead: "UvvIVG_hasStickyHead",
+	hatchClip: "UvvIVG_hatchClip",
+	hatchDrag: "UvvIVG_hatchDrag",
+	hatchHi: "UvvIVG_hatchHi",
+	hatchInner: "UvvIVG_hatchInner",
+	header: "UvvIVG_header",
+	item: "UvvIVG_item",
+	itemActive: "UvvIVG_itemActive",
+	itemIcon: "UvvIVG_itemIcon",
+	itemLabel: "UvvIVG_itemLabel",
+	layout: "UvvIVG_layout",
+	main: "UvvIVG_main",
+	minimizeBtn: "UvvIVG_minimizeBtn",
+	mobileBar: "UvvIVG_mobileBar",
+	overlay: "UvvIVG_overlay",
+	section: "UvvIVG_section",
+	sectionHead: "UvvIVG_sectionHead",
+	sectionLabel: "UvvIVG_sectionLabel",
+	sidebar: "UvvIVG_sidebar",
+	sidebarOpen: "UvvIVG_sidebarOpen",
+	trigger: "UvvIVG_trigger"
+};
+//#endregion
+export { e as t };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "highsoft-ui",
-  "version": "1.0.140",
+  "version": "1.0.143",
   "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 };