highsoft-ui 1.0.161 → 1.0.162

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

@@ -1,6 +1,9 @@
 import { ReactNode } from 'react';
 export type DropdownAlign = 'start' | 'center' | 'end';
 export type DropdownSide = 'top' | 'right' | 'bottom' | 'left';
+export type DropdownSize = 100 | 200;
+export type DropdownVariant = 'plain' | 'divided';
+export type DropdownIndicator = 'fill' | 'check';
 export interface DropdownOption {
     value: string;
     label: ReactNode;
@@ -16,9 +19,16 @@ export interface DropdownProps {
     /** Called with the new value when the user picks an item. */
     onValueChange?: (value: string) => void;
     /**
-     * Whether to render a check indicator on each item.
-     * Defaults to `true` — set to `false` to hide the check column entirely.
+     * How the selected item is marked in single-select mode. Defaults follow
+     * the variant: `plain` → `fill`, `divided` → `check`.
+     * - `fill` — the selected row takes the brand selected pair (brand surface
+     *   + brand text), no leading column.
+     * - `check` — a check glyph in a leading column; the row itself stays
+     *   unfilled. Pick this when the menu sits on a brand-tinted surface or
+     *   the rows already carry colour (product icons).
      */
+    indicator?: DropdownIndicator;
+    /** @deprecated Use `indicator="check"` / `indicator="fill"` instead. */
     showCheck?: boolean;
     /**
      * Whether the menu closes when an item is selected. Defaults to `false`
@@ -44,9 +54,28 @@ export interface DropdownProps {
      * - `number | string` — explicit width (number → px, string → CSS length)
      */
     width?: number | string | 'trigger';
+    /**
+     * Row density. `200` (default) is the menu that hangs off a size-300
+     * Button: 14px labels on ~30px rows. `100` is the compact menu for small
+     * triggers such as `SidebarSwitcher`: 12px labels on ~26px rows with a
+     * 12px check, so the list reads at the same size as the trigger's label
+     * instead of two steps above it.
+     */
+    size?: DropdownSize;
+    /**
+     * Surface treatment. `plain` (default) is a padded white panel with
+     * transparent, rounded rows — hover is a soft inset wash and the selected
+     * row is marked by `indicator` (brand fill or check), so the menu reads as
+     * a floating menu in the same language as the Button or SidebarSwitcher it
+     * hangs off.
+     * `divided` is the list treatment: edge-to-edge rows separated by
+     * hairlines, hover lifts a row to white, keyboard focus adds a brand bar
+     * down the left.
+     */
+    variant?: DropdownVariant;
     className?: string;
 }
-export declare function Dropdown({ trigger, value, onValueChange, showCheck, closeOnSelect, options, children, side, align, sideOffset, alignOffset, open, onOpenChange, defaultOpen, width, className }: DropdownProps): import("react").JSX.Element;
+export declare function Dropdown({ trigger, value, onValueChange, indicator: indicatorProp, showCheck, closeOnSelect, options, children, side, align, sideOffset, alignOffset, open, onOpenChange, defaultOpen, width, size, variant, className }: DropdownProps): import("react").JSX.Element;
 export interface DropdownItemProps {
     /**
      * Item value. When set, the item participates in single-select mode

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

@@ -5,6 +5,11 @@ export type NavItemProps<T extends ElementType = 'a'> = {
     active?: boolean;
     /** Leading icon (16×16). */
     icon?: ReactNode;
+    /**
+     * Trailing badge after the label — typically a `<Label>` ("Pro", "New").
+     * Purely visual; it's read as part of the link text.
+     */
+    badge?: ReactNode;
     children?: ReactNode;
 } & Omit<ComponentPropsWithoutRef<T>, 'as'>;
 /**

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

@@ -45,7 +45,18 @@ export interface SidebarSectionProps {
      * Minimize button when provided.
      */
     action?: ReactNode;
+    /**
+     * Let the whole section fold away behind its label: the head becomes a
+     * toggle with a chevron and the items slide closed. Needs a `label`.
+     * Default false.
+     */
+    expandable?: boolean;
+    /** Open on first render (uncontrolled). Default true. Ignored when `open` is provided. */
+    defaultOpen?: boolean;
+    /** Controlled open state. Provide together with `onOpenChange`. */
+    open?: boolean;
+    onOpenChange?: (open: boolean) => void;
     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;
+export declare function SidebarSection({ children, label, collapsible, minimizeLabel, action, expandable, defaultOpen, open: openProp, onOpenChange, className }: SidebarSectionProps): import("react").JSX.Element;

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

@@ -0,0 +1,31 @@
+import { ComponentPropsWithoutRef, ReactNode } from 'react';
+export interface SidebarSwitcherProps extends ComponentPropsWithoutRef<'button'> {
+    /**
+     * Glyph in the leading tile — a `<ProductIcon size={20} />`,
+     * `<FrameworkIcon size={20} />` or `<Icon size={16} />`. The tile is 32px
+     * with 6px padding, so anything up to 20px sits centred.
+     */
+    icon: ReactNode;
+    /** Primary line — the current choice ("Highcharts Core"). */
+    label: ReactNode;
+    /** Secondary line — what the choice is ("Currently viewing", "Version 12.2.0"). */
+    description?: ReactNode;
+    /** Show the up/down selector chevron. Default `true`. */
+    chevron?: boolean;
+    /**
+     * Render as a static row when there's nothing to switch to — no button, no
+     * chevron, no hover. Default `true`.
+     */
+    interactive?: boolean;
+}
+/**
+ * The trigger row for a sidebar-header picker: an icon tile, a two-line text
+ * block and a selector chevron. It's a plain `<button>`, so it slots straight
+ * into `<Dropdown trigger={…}>` (Radix spreads its `aria-expanded` and
+ * `aria-haspopup` onto it) and takes any button prop directly.
+ *
+ * Its accessible name is the visible text — label then description, so
+ * "Highcharts Core, Currently viewing" — which is usually what you want; pass
+ * `aria-label` to override.
+ */
+export declare const SidebarSwitcher: import('react').ForwardRefExoticComponent<SidebarSwitcherProps & import('react').RefAttributes<HTMLButtonElement>>;

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

@@ -2,6 +2,8 @@ export { SidebarLayout, SidebarMain } from './SidebarLayout';
 export type { SidebarLayoutProps } from './SidebarLayout';
 export { Sidebar, SidebarHeader, SidebarBody, SidebarSection } from './Sidebar';
 export type { SidebarProps, SidebarSectionProps } from './Sidebar';
+export { SidebarSwitcher } from './SidebarSwitcher';
+export type { SidebarSwitcherProps } from './SidebarSwitcher';
 export { SidebarResizer } from './SidebarResizer';
 export { NavItem } from './NavItem';
 export type { NavItemProps } from './NavItem';

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

@@ -0,0 +1,30 @@
+import { RefObject } from 'react';
+/**
+ * Clips a grid-row slide (0fr → 1fr) for exactly as long as it runs.
+ *
+ * An open list settles at `overflow: visible`, because clipping it would
+ * create a scroll container and stop any nested sticky row from pinning.
+ * While it's sliding open, though, the children are laid out at full height
+ * inside a row that hasn't grown yet, so visible overflow spills them over
+ * whatever follows. So: clip for the length of the slide, then release.
+ *
+ * Driven from state rather than a delayed discrete `transition: overflow`:
+ * that flipped inconsistently — sometimes immediately, sometimes never.
+ * Collapsing needs none of this, since the base rule clips from frame one.
+ *
+ * `expanding` is set during render, not in an effect. Effects run *after*
+ * paint, so doing it there left one painted frame carrying the open class
+ * without the clip — the full-height list flashed over the rows below before
+ * being clipped. Adjusting state during render makes React re-render before
+ * it paints, so both classes land in the same commit. Something that starts
+ * open never animated, so `prevOpen` starting equal to `open` means it isn't
+ * clipped.
+ *
+ * Attach `ref` to the element carrying the `grid-template-rows` transition and
+ * pair `expanding` with a rule that keeps its inner wrapper at
+ * `overflow: hidden`.
+ */
+export declare function useSlideClip<T extends HTMLElement>(open: boolean): {
+    expanding: boolean;
+    ref: RefObject<T | null>;
+};

package/dist/lib/main.d.ts

@@ -61,8 +61,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 { SidebarLayout, SidebarMain, Sidebar, SidebarHeader, SidebarBody, SidebarSection, SidebarSwitcher, SidebarResizer, NavItem, NavGroup, NavDisclosure, useSidebarLayout, useOptionalSidebarLayout } from './components/Sidebar';
+export type { SidebarLayoutProps, SidebarProps, SidebarSectionProps, SidebarSwitcherProps, NavItemProps, NavGroupProps, NavDisclosureProps, SidebarLayoutContextValue } from './components/Sidebar';
 export { PrefPanel } from './components/PrefPanel';
 export { VideoPlayer } from './components/VideoPlayer';
 export type { VideoPlayerProps, VideoPlayerSource, VideoPlayerTrack } from './components/VideoPlayer';

package/dist/main.js

@@ -1,48 +1,49 @@
 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-CjxX21gW.js";
-import { t as s } from "./BrowserFrame-BUneieY7.js";
-import { t as c } from "./CopyCode-90z6BfV0.js";
+import { t as o } from "./Button-BCbWIPg1.js";
+import { t as s } from "./BrowserFrame-D-DoBOXv.js";
+import { t as c } from "./CopyCode-_sKjpGqB.js";
 import { t as l } from "./FrameworkIcon-B8GmMx0r.js";
-import { t as u } from "./CodeBlock-BkSyiiCb.js";
+import { t as u } from "./CodeBlock-Ugik4xMM.js";
 import { n as d, t as f } from "./ClientLogo-Dj7K48YL.js";
-import { t as p } from "./LogoCarousel-DEvwvCfr.js";
+import { t as p } from "./LogoCarousel-pRYdmphl.js";
 import { t as m } from "./Icon-DJTgdvsG.js";
 import { t as h } from "./Link-CYR92_U0.js";
 import { t as g } from "./ProductIcon-C5yvnjHr.js";
-import { t as _ } from "./ButtonGroup-DanFXfXA.js";
+import { t as _ } from "./ButtonGroup-DGEDf4ic.js";
 import { t as v } from "./InputSolo-DUdKtZjX.js";
-import { t as y } from "./SearchDropdown-fcfDUjOp.js";
-import { i as b, n as x, r as S, t as C } from "./InputGrouped-BUJKBG0D.js";
+import { t as y } from "./SearchDropdown-BSUAlaMY.js";
+import { i as b, n as x, r as S, t as C } from "./InputGrouped-y0JyshpR.js";
 import { t as w } from "./Container-BDssaLig.js";
 import { t as T } from "./DiscordInvite-CLYxexdH.js";
 import { t as E } from "./Heading-DNDHqYWO.js";
 import { t as D } from "./Typography-AvvBRu-u.js";
 import { t as O } from "./Logo-Bz0G2G-k.js";
-import { t as k } from "./NewsletterSignup-BP3AxNHH.js";
-import { n as A, r as j, t as M } from "./Dropdown-8bjCO1Lx.js";
-import { t as N } from "./PrefPanel-B4MyeLGu.js";
-import { n as P, t as F } from "./Label-DgPVoDMR.js";
-import { t as I } from "./VideoCover-BXIkxFuT.js";
-import { t as L } from "./VideoPlayer-BB8jVMa5.js";
-import { t as R } from "./VideoPlayerModal-fnAUwVMI.js";
-import { t as z } from "./Footer-DVZIe2ax.js";
+import { t as k } from "./NewsletterSignup-BrmQ7pXZ.js";
+import { n as A, r as j, t as M } from "./Dropdown-LiG-JAoo.js";
+import { t as N } from "./PrefPanel-CHkc6r6b.js";
+import { n as P, t as F } from "./Label-k6e4Rqb-.js";
+import { t as I } from "./VideoCover-C18NhQcY.js";
+import { t as L } from "./VideoPlayer-UM4M4C5b.js";
+import { t as R } from "./VideoPlayerModal-IRwjMLoy.js";
+import { t as z } from "./Footer-DzIGLnEz.js";
 import { n as B } from "./GPTInput-C0YG1990.js";
-import { t as V } from "./Notification-D4-209sL.js";
-import { n as H, t as U } from "./Header-CkWQ4zk-.js";
+import { t as V } from "./Notification-BFLAktZo.js";
+import { n as H, t as U } from "./Header-CTO6Y6oH.js";
 import { t as W } from "./Tabs-BuDaPqdN.js";
 import { n as G, t as K } from "./RadioBox-o1Ssyj0s.js";
-import { n as q, t as J } from "./Checkbox-BkxibNey.js";
+import { n as q, t as J } from "./Checkbox-CO0SRaAZ.js";
 import { Modal as Y } from "./components/Modal/index.js";
-import { t as X } from "./RoadmapDetails-CATh63TE.js";
+import { t as X } from "./RoadmapDetails-BWt0J4Pn.js";
 import { ModalContactFooter as Z } from "./components/Modal/ModalContactFooter.js";
 import { useOptionalSidebarLayout as Q, useSidebarLayout as $ } from "./components/Sidebar/context.js";
 import { SidebarLayout as ee, SidebarMain as te } from "./components/Sidebar/SidebarLayout.js";
 import { SidebarResizer as ne } from "./components/Sidebar/SidebarResizer.js";
 import { Sidebar as re, SidebarBody as ie, SidebarHeader as ae, SidebarSection as oe } from "./components/Sidebar/Sidebar.js";
-import { NavItem as se } from "./components/Sidebar/NavItem.js";
-import { NavGroup as ce } from "./components/Sidebar/NavGroup.js";
-import { NavDisclosure as le } from "./components/Sidebar/NavDisclosure.js";
+import { SidebarSwitcher as se } from "./components/Sidebar/SidebarSwitcher.js";
+import { NavItem as ce } from "./components/Sidebar/NavItem.js";
+import { NavGroup as le } from "./components/Sidebar/NavGroup.js";
+import { NavDisclosure as ue } from "./components/Sidebar/NavDisclosure.js";
 import "./components/Sidebar/index.js";
-import { ThemeLoader as ue, themeLoaderScript as de } from "./components/ThemeLoader/index.js";
-export { a as Box, s as BrowserFrame, o as Button, _ as ButtonGroup, J as Checkbox, q as CheckboxGroup, f as ClientLogo, u as CodeBlock, w as Container, c as CopyCode, T as DiscordInvite, M as Dropdown, A as DropdownItem, j as DropdownSeparator, z as Footer, C as FormGroup, x as FormRow, l as FrameworkIcon, B as GPTInput, U as Header, E as Heading, m as Icon, S as InputGrouped, v as InputSolo, F as Label, h as Link, O as Logo, p as LogoCarousel, Y as Modal, Z as ModalContactFooter, le as NavDisclosure, ce as NavGroup, se as NavItem, P as NewTag, k as NewsletterSignup, V as Notification, N as PrefPanel, g as ProductIcon, K as RadioBox, G as RadioBoxGroup, X as RoadmapDetails, y as SearchDropdown, b as SelectGrouped, re as Sidebar, ie as SidebarBody, ae as SidebarHeader, ee as SidebarLayout, te as SidebarMain, ne as SidebarResizer, oe as SidebarSection, H as SubHeader, W as Tabs, ue as ThemeLoader, i as ThemeProvider, D as Typography, I as VideoCover, L as VideoPlayer, R as VideoPlayerModal, d as clientLogoLabels, de as themeLoaderScript, n as useClipboard, t as useNextTheme, Q as useOptionalSidebarLayout, $ as useSidebarLayout, r as useSuccessFlash, e as useTheme };
+import { ThemeLoader as de, themeLoaderScript as fe } from "./components/ThemeLoader/index.js";
+export { a as Box, s as BrowserFrame, o as Button, _ as ButtonGroup, J as Checkbox, q as CheckboxGroup, f as ClientLogo, u as CodeBlock, w as Container, c as CopyCode, T as DiscordInvite, M as Dropdown, A as DropdownItem, j as DropdownSeparator, z as Footer, C as FormGroup, x as FormRow, l as FrameworkIcon, B as GPTInput, U as Header, E as Heading, m as Icon, S as InputGrouped, v as InputSolo, F as Label, h as Link, O as Logo, p as LogoCarousel, Y as Modal, Z as ModalContactFooter, ue as NavDisclosure, le as NavGroup, ce as NavItem, P as NewTag, k as NewsletterSignup, V as Notification, N as PrefPanel, g as ProductIcon, K as RadioBox, G as RadioBoxGroup, X as RoadmapDetails, y as SearchDropdown, b as SelectGrouped, re as Sidebar, ie as SidebarBody, ae as SidebarHeader, ee as SidebarLayout, te as SidebarMain, ne as SidebarResizer, oe as SidebarSection, se as SidebarSwitcher, H as SubHeader, W as Tabs, de as ThemeLoader, i as ThemeProvider, D as Typography, I as VideoCover, L as VideoPlayer, R as VideoPlayerModal, d as clientLogoLabels, fe as themeLoaderScript, n as useClipboard, t as useNextTheme, Q as useOptionalSidebarLayout, $ as useSidebarLayout, r as useSuccessFlash, e as useTheme };

package/dist/{prism-light-CqF2CLQS.js → prism-light-Czk1yGD_.js}

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

package/dist/{styles.module-DGKft2EO.js → styles.module-B9V15An9.js}

@@ -28,6 +28,7 @@ var e = {
 	header: "UvvIVG_header",
 	item: "UvvIVG_item",
 	itemActive: "UvvIVG_itemActive",
+	itemBadge: "UvvIVG_itemBadge",
 	itemIcon: "UvvIVG_itemIcon",
 	itemLabel: "UvvIVG_itemLabel",
 	layout: "UvvIVG_layout",
@@ -37,11 +38,26 @@ var e = {
 	mobileBarAction: "UvvIVG_mobileBarAction",
 	overlay: "UvvIVG_overlay",
 	section: "UvvIVG_section",
+	sectionBody: "UvvIVG_sectionBody",
+	sectionBodyInner: "UvvIVG_sectionBodyInner",
+	sectionChevron: "UvvIVG_sectionChevron",
+	sectionExpandable: "UvvIVG_sectionExpandable",
+	sectionExpanding: "UvvIVG_sectionExpanding",
 	sectionHead: "UvvIVG_sectionHead",
 	sectionLabel: "UvvIVG_sectionLabel",
+	sectionOpen: "UvvIVG_sectionOpen",
+	sectionToggle: "UvvIVG_sectionToggle",
+	sectionToggleText: "UvvIVG_sectionToggleText",
 	sheetDragging: "UvvIVG_sheetDragging",
 	sidebar: "UvvIVG_sidebar",
 	sidebarOpen: "UvvIVG_sidebarOpen",
+	switcher: "UvvIVG_switcher",
+	switcherChevron: "UvvIVG_switcherChevron",
+	switcherDescription: "UvvIVG_switcherDescription",
+	switcherLabel: "UvvIVG_switcherLabel",
+	switcherStatic: "UvvIVG_switcherStatic",
+	switcherText: "UvvIVG_switcherText",
+	switcherTile: "UvvIVG_switcherTile",
 	trigger: "UvvIVG_trigger",
 	triggerChevron: "UvvIVG_triggerChevron",
 	triggerIcon: "UvvIVG_triggerIcon",

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "highsoft-ui",
-  "version": "1.0.161",
+  "version": "1.0.162",
   "description": "Highsoft UI",
   "type": "module",
   "repository": {