highsoft-ui 1.0.171 → 1.0.173

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

@@ -0,0 +1,67 @@
+import { HTMLAttributes, MouseEvent, ReactNode } from 'react';
+/** One row of the list — a heading on the page. */
+export interface TableOfContentsItem {
+    /** The heading element's `id`: the link target (`#id`) and what the scroll spy watches. */
+    id: string;
+    /** The heading text. */
+    title: ReactNode;
+    /** Nesting depth. `1` (default) is a top-level row; `2` and `3` indent 12px per step. */
+    level?: 1 | 2 | 3;
+    /** Link target. Defaults to `#${id}`. */
+    href?: string;
+}
+export interface TableOfContentsProps extends Omit<HTMLAttributes<HTMLElement>, 'title'> {
+    /** The page's headings, in document order. Renders nothing when empty. */
+    items: TableOfContentsItem[];
+    /**
+     * Heading above the list — the `<nav>`'s accessible name. Default
+     * `'On this page'`. Pass `null` to hide it; the nav then falls back to
+     * `aria-label` (or the default text).
+     */
+    title?: ReactNode;
+    /**
+     * The current heading's `id`. Controlled: when given, the built-in scroll
+     * spy is off and the highlight follows this prop. `null` highlights nothing.
+     */
+    activeId?: string | null;
+    /**
+     * The row that starts current in uncontrolled mode. The scroll spy takes
+     * over once it finds the headings; until then (or with `spy={false}`) this
+     * row stays current and clicks move the highlight.
+     */
+    defaultActiveId?: string | null;
+    /**
+     * Called when the current heading changes — by the scroll spy or by a click
+     * on a row. In controlled mode, use it to update `activeId`.
+     */
+    onActiveChange?: (id: string | null) => void;
+    /**
+     * Built-in scroll spy (default `true`): the current heading is the last one
+     * whose top has scrolled past `spyOffset`. Ignored when `activeId` is given.
+     */
+    spy?: boolean;
+    /**
+     * The fold line in px from the top of the viewport that a heading has to
+     * cross to become current. Set it to the height of a sticky header (plus
+     * any `scroll-margin-top` on the headings). Default `0`.
+     */
+    spyOffset?: number;
+    /**
+     * Called when a row is clicked, before the browser navigates to the hash.
+     * Call `event.preventDefault()` to take the navigation over (e.g. for an
+     * eased scroll with a header offset).
+     */
+    onItemClick?: (item: TableOfContentsItem, event: MouseEvent<HTMLAnchorElement>) => void;
+}
+/**
+ * "On this page" navigation — a rule down the left, a semibold title and one
+ * link per heading. Rows are tertiary text; hovering lifts one to primary and
+ * grows a 2px bar over the rule, which the current row keeps in a stronger
+ * colour — the bar animates in and out on the bounce token.
+ *
+ * Uncontrolled by default: a scroll spy marks the last heading that has
+ * crossed `spyOffset`, and a clicked row stays current while its heading is on
+ * screen (so a jump to a short last section doesn't snap back to the section
+ * above it). Pass `activeId` to drive the highlight yourself.
+ */
+export declare const TableOfContents: import('react').ForwardRefExoticComponent<TableOfContentsProps & import('react').RefAttributes<HTMLElement>>;

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

@@ -0,0 +1,34 @@
+import { ButtonHTMLAttributes, CSSProperties, ReactNode } from 'react';
+export type ToggleSize = 50 | 100 | 200 | 300 | 400 | 500;
+export type ToggleVariant = 'brand' | 'success' | 'attention' | 'danger';
+export interface ToggleProps extends Omit<ButtonHTMLAttributes<HTMLButtonElement>, 'onChange' | 'value' | 'defaultValue' | 'children' | 'role' | 'type' | 'color'> {
+    /** Visible label. Clicking it toggles the switch. Omit only with `aria-label`. */
+    label?: ReactNode;
+    /** Secondary line under the label, wired up as the switch's description. */
+    description?: ReactNode;
+    /** Controlled on/off state */
+    checked?: boolean;
+    /** Initial state for uncontrolled use */
+    defaultChecked?: boolean;
+    /** Called with the next state when the user flips the switch */
+    onChange?: (checked: boolean) => void;
+    /** Matches the Button size scale; the row is as tall as a Button of the same size */
+    size?: ToggleSize;
+    /**
+     * Colour of the track when on — the Button colour of the same name.
+     * `brand` (default) for ordinary settings; a status colour only when the
+     * on state itself means something (e.g. `danger` for "Maintenance mode").
+     */
+    variant?: ToggleVariant;
+    /** Which side of the switch the label sits on */
+    labelPosition?: 'left' | 'right';
+    /** Stretch the row to its container; the label fills it, so the switch sits on the far edge (with `labelPosition="left"`: a settings row) */
+    fullWidth?: boolean;
+    /** Form field name — a hidden input submits `value` while the switch is on */
+    name?: string;
+    /** Value submitted with `name` while on (default `'on'`, like a checkbox) */
+    value?: string;
+    className?: string;
+    style?: CSSProperties;
+}
+export declare const Toggle: import('react').ForwardRefExoticComponent<ToggleProps & import('react').RefAttributes<HTMLButtonElement>>;

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

@@ -0,0 +1,19 @@
+import { CSSProperties } from 'react';
+import { ToggleProps } from '../Toggle';
+export interface ToggleCardProps extends Omit<ToggleProps, 'fullWidth' | 'className' | 'style'> {
+    /**
+     * No fill, the transparent Button's hairline — for tinted surfaces or next
+     * to transparent Buttons. Default is a background-0 card.
+     */
+    transparent?: boolean;
+    /** Class for the card */
+    className?: string;
+    /** Style for the card */
+    style?: CSSProperties;
+}
+/**
+ * A bordered card around a Toggle — a "switch card". A click or tap anywhere
+ * on the card flips the switch; hover only previews. The switch inside is
+ * still the one and only control, so AT hears a single switch.
+ */
+export declare const ToggleCard: import('react').ForwardRefExoticComponent<ToggleCardProps & import('react').RefAttributes<HTMLButtonElement>>;

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

@@ -0,0 +1,8 @@
+import { ToggleSize, ToggleVariant } from '../Toggle';
+export interface ToggleListContextValue {
+    size?: ToggleSize;
+    variant?: ToggleVariant;
+    transparent?: boolean;
+}
+export declare const ToggleListContext: import('react').Context<ToggleListContextValue | null>;
+export declare const useToggleList: () => ToggleListContextValue | null;

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

@@ -0,0 +1,20 @@
+import { HTMLAttributes, ReactNode } from 'react';
+import { ToggleSize, ToggleVariant } from '../Toggle';
+export interface ToggleListProps extends HTMLAttributes<HTMLDivElement> {
+    /** `ToggleCard` rows */
+    children: ReactNode;
+    /** Name the group: `aria-label`, or `aria-labelledby` pointing at a visible heading */
+    'aria-label'?: string;
+    'aria-labelledby'?: string;
+    /** Default size for every row; a row's own `size` wins */
+    size?: ToggleSize;
+    /** Default on-colour for every row; a row's own `variant` wins */
+    variant?: ToggleVariant;
+    /** No fill, the transparent Button's hairline — for tinted surfaces */
+    transparent?: boolean;
+}
+/**
+ * A settings list: `ToggleCard` rows in one frame with dividers. Each row is
+ * a whole-row click target; the list is a named `role="group"`.
+ */
+export declare const ToggleList: import('react').ForwardRefExoticComponent<ToggleListProps & import('react').RefAttributes<HTMLDivElement>>;

package/dist/lib/main.d.ts

@@ -54,6 +54,12 @@ export { RadioBox, RadioBoxGroup } from './components/RadioBox';
 export type { RadioBoxProps, RadioBoxGroupProps } from './components/RadioBox';
 export { Checkbox, CheckboxGroup } from './components/Checkbox';
 export type { CheckboxProps, CheckboxGroupProps } from './components/Checkbox';
+export { Toggle } from './components/Toggle';
+export type { ToggleProps, ToggleSize, ToggleVariant } from './components/Toggle';
+export { ToggleCard } from './components/ToggleCard';
+export type { ToggleCardProps } from './components/ToggleCard';
+export { ToggleList } from './components/ToggleList';
+export type { ToggleListProps } from './components/ToggleList';
 export { Dropdown, DropdownItem, DropdownSeparator } from './components/Dropdown';
 export type { DropdownProps, DropdownItemProps, DropdownOption, DropdownAlign, DropdownSide } from './components/Dropdown';
 export { NewsletterSignup } from './components/NewsletterSignup';
@@ -70,6 +76,8 @@ export type { SidebarLayoutProps, SidebarProps, SidebarSectionProps, SidebarSwit
 export { PrefPanel } from './components/PrefPanel';
 export { PrevNextNav } from './components/PrevNextNav';
 export type { PrevNextNavProps, PrevNextNavItem, PrevNextNavBack } from './components/PrevNextNav';
+export { TableOfContents } from './components/TableOfContents';
+export type { TableOfContentsProps, TableOfContentsItem } from './components/TableOfContents';
 export { VideoPlayer } from './components/VideoPlayer';
 export type { VideoPlayerProps, VideoPlayerSource, VideoPlayerTrack } from './components/VideoPlayer';
 export { VideoPlayerModal } from './components/VideoPlayer/VideoPlayerModal';

package/dist/main.js

@@ -35,18 +35,22 @@ import { n as K, t as q } from "./Header-CQKgp8xy.js";
 import { t as J } from "./Tabs-TRXBM5Zr.js";
 import { n as Y, t as X } from "./RadioBox-C7bDjItJ.js";
 import { n as Z, t as Q } from "./Checkbox-DU_KGp-P.js";
-import { Modal as $ } from "./components/Modal/index.js";
-import { t as ee } from "./RoadmapDetails-CLQzIxv7.js";
-import { ModalContactFooter as te } from "./components/Modal/ModalContactFooter.js";
-import { useOptionalSidebarLayout as ne, useSidebarLayout as re } from "./components/Sidebar/context.js";
-import { SidebarLayout as ie, SidebarMain as ae } from "./components/Sidebar/SidebarLayout.js";
-import { SidebarResizer as oe } from "./components/Sidebar/SidebarResizer.js";
-import { Sidebar as se, SidebarBody as ce, SidebarHeader as le, SidebarSection as ue } from "./components/Sidebar/Sidebar.js";
-import { SidebarSwitcher as de } from "./components/Sidebar/SidebarSwitcher.js";
-import { NavItem as fe } from "./components/Sidebar/NavItem.js";
-import { NavGroup as pe } from "./components/Sidebar/NavGroup.js";
-import { NavDisclosure as me } from "./components/Sidebar/NavDisclosure.js";
+import { t as $ } from "./Toggle-BHjptO7-.js";
+import { t as ee } from "./ToggleCard-kMpxzTnh.js";
+import { t as te } from "./ToggleList-Dh7wb2-W.js";
+import { Modal as ne } from "./components/Modal/index.js";
+import { t as re } from "./RoadmapDetails-CLQzIxv7.js";
+import { ModalContactFooter as ie } from "./components/Modal/ModalContactFooter.js";
+import { useOptionalSidebarLayout as ae, useSidebarLayout as oe } from "./components/Sidebar/context.js";
+import { SidebarLayout as se, SidebarMain as ce } from "./components/Sidebar/SidebarLayout.js";
+import { SidebarResizer as le } from "./components/Sidebar/SidebarResizer.js";
+import { Sidebar as ue, SidebarBody as de, SidebarHeader as fe, SidebarSection as pe } from "./components/Sidebar/Sidebar.js";
+import { SidebarSwitcher as me } from "./components/Sidebar/SidebarSwitcher.js";
+import { NavItem as he } from "./components/Sidebar/NavItem.js";
+import { NavGroup as ge } from "./components/Sidebar/NavGroup.js";
+import { NavDisclosure as _e } from "./components/Sidebar/NavDisclosure.js";
 import "./components/Sidebar/index.js";
-import { t as he } from "./PrevNextNav-XaxS2FTm.js";
-import { ThemeLoader as ge, themeLoaderScript as _e } from "./components/ThemeLoader/index.js";
-export { a as Box, s as BrowserFrame, o as Button, _ as ButtonGroup, Q as Checkbox, Z as CheckboxGroup, f as ClientLogo, u as CodeBlock, w as Container, c as CopyCode, T as DiscordInvite, I as Dropdown, P as DropdownItem, F as DropdownSeparator, j as FeatureItem, A as Features, U as Footer, C as FormGroup, x as FormRow, l as FrameworkIcon, W as GPTInput, q as Header, E as Heading, m as Icon, S as InputGrouped, v as InputSolo, z as Label, h as Link, k as List, O as ListItem, M as Logo, p as LogoCarousel, $ as Modal, te as ModalContactFooter, me as NavDisclosure, pe as NavGroup, fe as NavItem, R as NewTag, N as NewsletterSignup, G as Notification, L as PrefPanel, he as PrevNextNav, g as ProductIcon, X as RadioBox, Y as RadioBoxGroup, ee as RoadmapDetails, y as SearchDropdown, b as SelectGrouped, se as Sidebar, ce as SidebarBody, le as SidebarHeader, ie as SidebarLayout, ae as SidebarMain, oe as SidebarResizer, ue as SidebarSection, de as SidebarSwitcher, K as SubHeader, J as Tabs, ge as ThemeLoader, i as ThemeProvider, D as Typography, B as VideoCover, V as VideoPlayer, H as VideoPlayerModal, d as clientLogoLabels, _e as themeLoaderScript, n as useClipboard, t as useNextTheme, ne as useOptionalSidebarLayout, re as useSidebarLayout, r as useSuccessFlash, e as useTheme };
+import { t as ve } from "./PrevNextNav-XaxS2FTm.js";
+import { t as ye } from "./TableOfContents-d26S7KYx.js";
+import { ThemeLoader as be, themeLoaderScript as xe } from "./components/ThemeLoader/index.js";
+export { a as Box, s as BrowserFrame, o as Button, _ as ButtonGroup, Q as Checkbox, Z as CheckboxGroup, f as ClientLogo, u as CodeBlock, w as Container, c as CopyCode, T as DiscordInvite, I as Dropdown, P as DropdownItem, F as DropdownSeparator, j as FeatureItem, A as Features, U as Footer, C as FormGroup, x as FormRow, l as FrameworkIcon, W as GPTInput, q as Header, E as Heading, m as Icon, S as InputGrouped, v as InputSolo, z as Label, h as Link, k as List, O as ListItem, M as Logo, p as LogoCarousel, ne as Modal, ie as ModalContactFooter, _e as NavDisclosure, ge as NavGroup, he as NavItem, R as NewTag, N as NewsletterSignup, G as Notification, L as PrefPanel, ve as PrevNextNav, g as ProductIcon, X as RadioBox, Y as RadioBoxGroup, re as RoadmapDetails, y as SearchDropdown, b as SelectGrouped, ue as Sidebar, de as SidebarBody, fe as SidebarHeader, se as SidebarLayout, ce as SidebarMain, le as SidebarResizer, pe as SidebarSection, me as SidebarSwitcher, K as SubHeader, ye as TableOfContents, J as Tabs, be as ThemeLoader, i as ThemeProvider, $ as Toggle, ee as ToggleCard, te as ToggleList, D as Typography, B as VideoCover, V as VideoPlayer, H as VideoPlayerModal, d as clientLogoLabels, xe as themeLoaderScript, n as useClipboard, t as useNextTheme, ae as useOptionalSidebarLayout, oe as useSidebarLayout, r as useSuccessFlash, e as useTheme };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "highsoft-ui",
-  "version": "1.0.171",
+  "version": "1.0.173",
   "description": "Highsoft UI",
   "type": "module",
   "repository": {
@@ -36,7 +36,7 @@
   ],
   "scripts": {
     "generate:api": "node scripts/extract-component-api.mjs",
-    "predev": "node scripts/extract-component-api.mjs",
+    "predev": "node scripts/extract-component-api.mjs && npm run studio:assets",
     "dev": "astro dev",
     "build": "tsc -p ./tsconfig.build.json && vite build",
     "build:app": "astro build",
@@ -49,12 +49,17 @@
     "build-storybook": "storybook build",
     "prettier": "npx prettier . --write",
     "prettier-ci": "npx prettier . --check",
-    "prebuild:app": "node scripts/extract-component-api.mjs",
+    "prebuild:app": "node scripts/extract-component-api.mjs && npm run studio:assets",
     "icons": "node scripts/convert-product-icons.cjs",
     "icons:frameworks": "node scripts/convert-framework-icons.cjs",
     "icons:clients": "node scripts/convert-client-logos.cjs",
     "stylelint": "npx stylelint '**/*.css'",
-    "prepare": "husky && husky install"
+    "prepare": "husky && husky install",
+    "studio:assets": "node tools/icon-studio/scripts/prepare-assets.mjs",
+    "studio:serve": "python3 tools/icon-studio/viewer/serve.py",
+    "test:studio": "node --test tools/icon-studio/viewer/test-*.mjs && python3 -m unittest discover -s tools/icon-studio/viewer -p 'test_*.py'",
+    "studio:test-browser": "node tools/icon-studio/scripts/prepare-assets.mjs --test-browser",
+    "studio:verify-addon": "python3 tools/icon-studio/scripts/verify-addon.py"
   },
   "lint-staged": {
     "*.{js,jsx,ts,tsx}": [
@@ -104,6 +109,7 @@
     "eslint-plugin-react": "^7.34.1",
     "eslint-plugin-react-hooks": "^7.0.1",
     "eslint-plugin-react-refresh": "^0.5.0",
+    "fflate": "^0.8.2",
     "glob": "^13.0.0",
     "globals": "^17.0.0",
     "husky": "^9.0.11",
@@ -118,6 +124,7 @@
     "stylelint": "^17.0.0",
     "stylelint-config-standard": "^40.0.0",
     "stylelint-config-standard-scss": "^17.0.0",
+    "three": "^0.186.0",
     "typescript": "^6.0.2",
     "typescript-eslint": "^8.31.1",
     "vite": "^8.0.0",