highsoft-ui 1.0.134 → 1.0.136

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

@@ -23,6 +23,6 @@ export type BoxProps<T extends ElementType = 'div'> = {
     hoverable?: boolean;
 } & Omit<ComponentPropsWithoutRef<T>, 'as'>;
 export declare const Box: <T extends ElementType = "div">(props: BoxProps<T> & {
-    ref?: React.Ref<any>;
+    ref?: React.Ref<Element>;
 }) => React.JSX.Element;
 export {};

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

@@ -23,7 +23,15 @@ export interface ButtonGroupProps extends Omit<HTMLAttributes<HTMLDivElement>, '
     onChange?: (value: string, item: ButtonGroupItem) => void;
     /** Shared button size */
     size?: ButtonSize;
+    /**
+     * Container surface treatment. Pick the one that contrasts with the surface
+     * behind the group:
+     * - `default` — on cards and panels (`--HS-surface-ui-background-0`).
+     * - `alt` — a darker surface, on the page (`--HS-common-background`), where the
+     *   default surface would blend in (in dark mode it matches the page exactly).
+     */
+    variant?: 'default' | 'alt';
     /** Stretch items to fill the available width */
     fullWidth?: boolean;
 }
-export declare function ButtonGroup({ items, value, defaultValue, onChange, size, fullWidth, className, ...props }: ButtonGroupProps): import("react").JSX.Element;
+export declare function ButtonGroup({ items, value, defaultValue, onChange, size, variant, fullWidth, className, ...props }: ButtonGroupProps): import("react").JSX.Element;

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

@@ -4,6 +4,8 @@ export type DropdownSide = 'top' | 'right' | 'bottom' | 'left';
 export interface DropdownOption {
     value: string;
     label: ReactNode;
+    /** Optional leading icon, rendered before the label (e.g. a ProductIcon). */
+    icon?: ReactNode;
     disabled?: boolean;
 }
 export interface DropdownProps {
@@ -53,6 +55,8 @@ export interface DropdownItemProps {
     value?: string;
     disabled?: boolean;
     children: ReactNode;
+    /** Optional leading icon, rendered before the label (e.g. a ProductIcon). */
+    icon?: ReactNode;
     /**
      * Called when the user picks the item. For non-`value` items this is the
      * primary way to react to a click; for `value` items prefer `onValueChange`
@@ -61,7 +65,7 @@ export interface DropdownItemProps {
     onSelect?: () => void;
     className?: string;
 }
-export declare function DropdownItem({ value, disabled, children, onSelect, className }: DropdownItemProps): import("react").JSX.Element;
+export declare function DropdownItem({ value, disabled, children, icon, onSelect, className }: DropdownItemProps): import("react").JSX.Element;
 export declare const DropdownSeparator: ({ className }: {
     className?: string;
 }) => import("react").JSX.Element;

package/dist/lib/components/FrameworkIcon/icons/monochrome/Android.d.ts

@@ -0,0 +1,2 @@
+import { SVGProps } from 'react';
+export default function Android(props: SVGProps<SVGSVGElement>): import("react").JSX.Element;

package/dist/lib/components/FrameworkIcon/icons/monochrome/Angular.d.ts

@@ -0,0 +1,2 @@
+import { SVGProps } from 'react';
+export default function Angular(props: SVGProps<SVGSVGElement>): import("react").JSX.Element;

package/dist/lib/components/FrameworkIcon/icons/monochrome/Css.d.ts

@@ -0,0 +1,2 @@
+import { SVGProps } from 'react';
+export default function Css(props: SVGProps<SVGSVGElement>): import("react").JSX.Element;

package/dist/lib/components/FrameworkIcon/icons/monochrome/Dotnet.d.ts

@@ -0,0 +1,2 @@
+import { SVGProps } from 'react';
+export default function Dotnet(props: SVGProps<SVGSVGElement>): import("react").JSX.Element;

package/dist/lib/components/FrameworkIcon/icons/monochrome/Html.d.ts

@@ -0,0 +1,2 @@
+import { SVGProps } from 'react';
+export default function Html(props: SVGProps<SVGSVGElement>): import("react").JSX.Element;

package/dist/lib/components/FrameworkIcon/icons/monochrome/Javascript.d.ts

@@ -0,0 +1,2 @@
+import { SVGProps } from 'react';
+export default function Javascript(props: SVGProps<SVGSVGElement>): import("react").JSX.Element;

package/dist/lib/components/FrameworkIcon/icons/monochrome/Python.d.ts

@@ -0,0 +1,2 @@
+import { SVGProps } from 'react';
+export default function Python(props: SVGProps<SVGSVGElement>): import("react").JSX.Element;

package/dist/lib/components/FrameworkIcon/icons/monochrome/React.d.ts

@@ -0,0 +1,2 @@
+import { SVGProps } from 'react';
+export default function React(props: SVGProps<SVGSVGElement>): import("react").JSX.Element;

package/dist/lib/components/FrameworkIcon/icons/monochrome/Swift.d.ts

@@ -0,0 +1,2 @@
+import { SVGProps } from 'react';
+export default function Swift(props: SVGProps<SVGSVGElement>): import("react").JSX.Element;

package/dist/lib/components/FrameworkIcon/icons/monochrome/Typescript.d.ts

@@ -0,0 +1,2 @@
+import { SVGProps } from 'react';
+export default function Typescript(props: SVGProps<SVGSVGElement>): import("react").JSX.Element;

package/dist/lib/components/FrameworkIcon/icons/monochrome/Vue.d.ts

@@ -0,0 +1,2 @@
+import { SVGProps } from 'react';
+export default function Vue(props: SVGProps<SVGSVGElement>): import("react").JSX.Element;

package/dist/lib/components/FrameworkIcon/icons/monochrome/index.d.ts

@@ -0,0 +1,11 @@
+export { default as Android } from './Android';
+export { default as Angular } from './Angular';
+export { default as Css } from './Css';
+export { default as Dotnet } from './Dotnet';
+export { default as Html } from './Html';
+export { default as Javascript } from './Javascript';
+export { default as Python } from './Python';
+export { default as React } from './React';
+export { default as Swift } from './Swift';
+export { default as Typescript } from './Typescript';
+export { default as Vue } from './Vue';

package/dist/lib/components/FrameworkIcon/icons/multi/Android.d.ts

@@ -0,0 +1,2 @@
+import { SVGProps } from 'react';
+export default function Android(props: SVGProps<SVGSVGElement>): import("react").JSX.Element;

package/dist/lib/components/FrameworkIcon/icons/multi/Angular.d.ts

@@ -0,0 +1,2 @@
+import { SVGProps } from 'react';
+export default function Angular(props: SVGProps<SVGSVGElement>): import("react").JSX.Element;

package/dist/lib/components/FrameworkIcon/icons/multi/Css.d.ts

@@ -0,0 +1,2 @@
+import { SVGProps } from 'react';
+export default function Css(props: SVGProps<SVGSVGElement>): import("react").JSX.Element;

package/dist/lib/components/FrameworkIcon/icons/multi/Dotnet.d.ts

@@ -0,0 +1,2 @@
+import { SVGProps } from 'react';
+export default function Dotnet(props: SVGProps<SVGSVGElement>): import("react").JSX.Element;

package/dist/lib/components/FrameworkIcon/icons/multi/Html.d.ts

@@ -0,0 +1,2 @@
+import { SVGProps } from 'react';
+export default function Html(props: SVGProps<SVGSVGElement>): import("react").JSX.Element;

package/dist/lib/components/FrameworkIcon/icons/multi/Javascript.d.ts

@@ -0,0 +1,2 @@
+import { SVGProps } from 'react';
+export default function Javascript(props: SVGProps<SVGSVGElement>): import("react").JSX.Element;

package/dist/lib/components/FrameworkIcon/icons/multi/Python.d.ts

@@ -0,0 +1,2 @@
+import { SVGProps } from 'react';
+export default function Python(props: SVGProps<SVGSVGElement>): import("react").JSX.Element;

package/dist/lib/components/FrameworkIcon/icons/multi/React.d.ts

@@ -0,0 +1,2 @@
+import { SVGProps } from 'react';
+export default function React(props: SVGProps<SVGSVGElement>): import("react").JSX.Element;

package/dist/lib/components/FrameworkIcon/icons/multi/Swift.d.ts

@@ -0,0 +1,2 @@
+import { SVGProps } from 'react';
+export default function Swift(props: SVGProps<SVGSVGElement>): import("react").JSX.Element;

package/dist/lib/components/FrameworkIcon/icons/multi/Typescript.d.ts

@@ -0,0 +1,2 @@
+import { SVGProps } from 'react';
+export default function Typescript(props: SVGProps<SVGSVGElement>): import("react").JSX.Element;

package/dist/lib/components/FrameworkIcon/icons/multi/Vue.d.ts

@@ -0,0 +1,2 @@
+import { SVGProps } from 'react';
+export default function Vue(props: SVGProps<SVGSVGElement>): import("react").JSX.Element;

package/dist/lib/components/FrameworkIcon/icons/multi/index.d.ts

@@ -0,0 +1,11 @@
+export { default as Android } from './Android';
+export { default as Angular } from './Angular';
+export { default as Css } from './Css';
+export { default as Dotnet } from './Dotnet';
+export { default as Html } from './Html';
+export { default as Javascript } from './Javascript';
+export { default as Python } from './Python';
+export { default as React } from './React';
+export { default as Swift } from './Swift';
+export { default as Typescript } from './Typescript';
+export { default as Vue } from './Vue';

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

@@ -0,0 +1,47 @@
+import { SVGProps } from 'react';
+import { IconSize } from '../Icon';
+/**
+ * Visual theme for framework / language icons.
+ * - `multi` — Full brand color (default)
+ * - `monochrome` — Single tone, follows the surrounding text color (currentColor)
+ */
+export type FrameworkIconTheme = 'multi' | 'monochrome';
+/**
+ * Available framework, language and platform icons.
+ *
+ * **Languages:** `javascript`, `typescript`, `python`, `swift`, `dotnet`
+ * **Markup & styling:** `html`, `css`
+ * **Frameworks:** `react`, `vue`, `angular`
+ * **Platforms:** `android`
+ *
+ * @see FrameworkIcon.stories.tsx for visual examples of all icons and themes
+ */
+export type FrameworkIconName = 'javascript' | 'typescript' | 'react' | 'vue' | 'angular' | 'python' | 'swift' | 'android' | 'html' | 'css' | 'dotnet';
+export interface FrameworkIconProps extends Omit<SVGProps<SVGSVGElement>, 'name'> {
+    /** Framework, language or platform name */
+    icon: FrameworkIconName;
+    /** Visual theme (defaults to 'multi') */
+    theme?: FrameworkIconTheme;
+    /** Size in pixels — must be a design-system size (12 | 16 | 20 | 24 | 32 | 40 | 52 | 64 | 72) */
+    size?: IconSize;
+    /**
+     * Wraps the icon in a layered box tile.
+     * Outer shell: `--HS-surface-ui-background-100` background with 2px padding.
+     * Inner tile: white background with shadow-50 and rounded corners.
+     * Includes a hover lift effect.
+     */
+    box?: boolean;
+    /** Additional class name */
+    className?: string;
+}
+/**
+ * FrameworkIcon displays language, framework and platform brand icons with
+ * color and monochrome theme variants.
+ *
+ * @example
+ * ```tsx
+ * <FrameworkIcon icon="javascript" size={16} />
+ * <FrameworkIcon icon="typescript" theme="monochrome" size={24} />
+ * ```
+ */
+export declare function FrameworkIcon({ icon, theme, size, box, className, ...props }: FrameworkIconProps): import("react").JSX.Element | null;

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

@@ -10,5 +10,5 @@ export declare function Notification({ id, content, variant, closable, onClose }
     content: NotificationItem | Array<NotificationItem>;
     variant?: NotificationVariant;
     closable?: boolean;
-    onClose?: Function;
+    onClose?: () => void;
 }): import("react").JSX.Element | null;

package/dist/lib/main.d.ts

@@ -8,6 +8,7 @@ export type { TypographyProps, TypographyColor, TypographySize, TypographyWeight
 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 { InputGroupedProps, SelectGroupedProps, FormGroupProps, FormRowProps } from './components/InputGrouped';
 export type { BoxProps } from './components/Box';
@@ -18,6 +19,7 @@ export type { CopyCodeProps } from './components/CopyCode';
 export { Icon } from './components/Icon';
 export { Link } from './components/Link';
 export { ProductIcon } from './components/ProductIcon';
+export { FrameworkIcon } from './components/FrameworkIcon';
 export { Button } from './components/Button';
 export { ButtonGroup } from './components/ButtonGroup';
 export { InputSolo } from './components/InputSolo';

package/dist/main.js

@@ -1,31 +1,32 @@
 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-K3WlRB7Q.js";
-import { t as s } from "./CopyCode-CPC5QPAz.js";
+import { t as o } from "./Button-CTdphXmG.js";
+import { t as s } from "./CopyCode-DS-3fQBn.js";
 import { t as c } from "./Icon-VeXJMj8Q.js";
 import { t as l } from "./Link-CYR92_U0.js";
 import { t as u } from "./ProductIcon-DFLAYWbu.js";
-import { t as d } from "./ButtonGroup-Di8R8XMS.js";
-import { t as f } from "./InputSolo-BUg1ip7e.js";
-import { i as p, n as m, r as h, t as g } from "./InputGrouped-ENTLSUR_.js";
-import { t as _ } from "./Container--5g4TI1z.js";
-import { t as v } from "./DiscordInvite-CLYxexdH.js";
-import { t as y } from "./Heading-pg3St8MI.js";
-import { t as b } from "./Typography-CJ7GcPcE.js";
-import { t as x } from "./Logo-DTfFHBgU.js";
-import { t as S } from "./NewsletterSignup-hFZm8H5q.js";
-import { n as C, r as w, t as T } from "./Dropdown-CMR98u7M.js";
-import { t as E } from "./PrefPanel-pFTxxuQW.js";
-import { n as D, t as O } from "./Label-gTAMwE0j.js";
-import { t as k } from "./Footer-DJ2xOs6M.js";
-import { n as A } from "./GPTInput-C0YG1990.js";
-import { t as j } from "./Notification-DcC9pjzU.js";
-import { n as M, t as N } from "./Header-CB4t3RmW.js";
-import { t as P } from "./Tabs-BEpADhmv.js";
-import { n as F, t as I } from "./RadioBox-o1Ssyj0s.js";
-import { n as L, t as R } from "./Checkbox-Yg8sUFcu.js";
-import { Modal as z } from "./components/Modal/index.js";
-import { t as B } from "./RoadmapDetails-Cv-T7-lm.js";
-import { ModalContactFooter as V } from "./components/Modal/ModalContactFooter.js";
-import { ThemeLoader as H, themeLoaderScript as U } from "./components/ThemeLoader/index.js";
-export { a as Box, o as Button, d as ButtonGroup, R as Checkbox, L as CheckboxGroup, _ as Container, s as CopyCode, v as DiscordInvite, T as Dropdown, C as DropdownItem, w as DropdownSeparator, k as Footer, g as FormGroup, m as FormRow, A as GPTInput, N as Header, y as Heading, c as Icon, h as InputGrouped, f as InputSolo, O as Label, l as Link, x as Logo, z as Modal, V as ModalContactFooter, D as NewTag, S as NewsletterSignup, j as Notification, E as PrefPanel, u as ProductIcon, I as RadioBox, F as RadioBoxGroup, B as RoadmapDetails, p as SelectGrouped, M as SubHeader, P as Tabs, H as ThemeLoader, i as ThemeProvider, b as Typography, U as themeLoaderScript, n as useClipboard, t as useNextTheme, r as useSuccessFlash, e as useTheme };
+import { t as d } from "./FrameworkIcon-Ds6WrxO0.js";
+import { t as f } from "./ButtonGroup-D5_sI3QL.js";
+import { t as p } from "./InputSolo-2RPRX0wM.js";
+import { i as m, n as h, r as g, t as _ } from "./InputGrouped-RLCBTqtp.js";
+import { t as v } from "./Container-BDssaLig.js";
+import { t as y } from "./DiscordInvite-CLYxexdH.js";
+import { t as b } from "./Heading-DNDHqYWO.js";
+import { t as x } from "./Typography-AvvBRu-u.js";
+import { t as S } from "./Logo-DTfFHBgU.js";
+import { t as C } from "./NewsletterSignup-BawMuwkc.js";
+import { n as w, r as T, t as E } from "./Dropdown-CgbtoeLA.js";
+import { t as D } from "./PrefPanel-0iwUb8OU.js";
+import { n as O, t as k } from "./Label-gTAMwE0j.js";
+import { t as A } from "./Footer-DSJzETEs.js";
+import { n as j } from "./GPTInput-C0YG1990.js";
+import { t as M } from "./Notification-icY33paf.js";
+import { n as N, t as P } from "./Header-4bkW4MNM.js";
+import { t as F } from "./Tabs-BuDaPqdN.js";
+import { n as I, t as L } from "./RadioBox-o1Ssyj0s.js";
+import { n as R, t as z } from "./Checkbox-Yg8sUFcu.js";
+import { Modal as B } from "./components/Modal/index.js";
+import { t as V } from "./RoadmapDetails-BPt5Ava0.js";
+import { ModalContactFooter as H } from "./components/Modal/ModalContactFooter.js";
+import { ThemeLoader as U, themeLoaderScript as W } from "./components/ThemeLoader/index.js";
+export { a as Box, o as Button, f as ButtonGroup, z as Checkbox, R as CheckboxGroup, v as Container, s as CopyCode, y as DiscordInvite, E as Dropdown, w as DropdownItem, T as DropdownSeparator, A as Footer, _ as FormGroup, h as FormRow, d as FrameworkIcon, j as GPTInput, P as Header, b as Heading, c as Icon, g as InputGrouped, p as InputSolo, k as Label, l as Link, S as Logo, B as Modal, H as ModalContactFooter, O as NewTag, C as NewsletterSignup, M as Notification, D as PrefPanel, u as ProductIcon, L as RadioBox, I as RadioBoxGroup, V as RoadmapDetails, m as SelectGrouped, N as SubHeader, F as Tabs, U as ThemeLoader, i as ThemeProvider, x as Typography, W as themeLoaderScript, n as useClipboard, t as useNextTheme, r as useSuccessFlash, e as useTheme };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "highsoft-ui",
-  "version": "1.0.134",
+  "version": "1.0.136",
   "description": "Highsoft UI",
   "type": "module",
   "repository": {
@@ -37,13 +37,14 @@
   "scripts": {
     "dev": "vite",
     "build": "tsc -p ./tsconfig.build.json && vite build",
-    "lint": "eslint . --ext ts,tsx --report-unused-disable-directives --max-warnings 0",
+    "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",
     "icons": "node scripts/convert-product-icons.cjs",
+    "icons:frameworks": "node scripts/convert-framework-icons.cjs",
     "stylelint": "npx stylelint '**/*.css'",
     "prepare": "husky && husky install"
   },
@@ -65,7 +66,7 @@
     "@untitled-ui/icons-react": "^0.1.4",
     "addsearch-js-client": "^1.2.1",
     "clsx": "^2.1.0",
-    "highsoft-design-tokens": "^2.9.5",
+    "highsoft-design-tokens": "^2.10.0",
     "modern-normalize": "^3.0.1",
     "next-themes": "^0.4.6",
     "radix-ui": "^1.4.1",