highsoft-ui 1.0.122 → 1.0.124

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

@@ -0,0 +1,44 @@
+import { ReactNode, CSSProperties } from 'react';
+export interface RadioBoxGroupProps {
+    /** Shared name attribute for all child radio inputs */
+    name: string;
+    /** Controlled selected value */
+    value?: string;
+    /** Initial value for uncontrolled usage */
+    defaultValue?: string;
+    onChange?: (value: string) => void;
+    children: ReactNode;
+    className?: string;
+    style?: CSSProperties;
+}
+export declare function RadioBoxGroup({ name, value: valueProp, defaultValue, onChange, children, className, style }: RadioBoxGroupProps): import("react/jsx-runtime").JSX.Element;
+export interface RadioBoxProps {
+    /** Value submitted when this option is selected */
+    value: string;
+    children: ReactNode;
+    disabled?: boolean;
+    /** Controlled checked state (standalone usage) */
+    checked?: boolean;
+    /** Initial checked state (uncontrolled standalone usage) */
+    defaultChecked?: boolean;
+    /** Called with the value when selected */
+    onChange?: (value: string) => void;
+    /** Radio group name (auto-provided when inside RadioBoxGroup) */
+    name?: string;
+    /**
+     * Visual layout variant.
+     * - `'default'` — horizontal row with text content and a radio dot (default)
+     * - `'icon'` — compact square, content centred, no dot indicator
+     */
+    variant?: 'default' | 'icon';
+    /**
+     * Icon thumbnail rendered to the left of the content.
+     * Accepts any ReactNode — typically a `<ProductIcon />`.
+     * Displayed in a small rounded tile that stays visually distinct from the
+     * selection background, keeping the icon readable in all states.
+     */
+    iconLeft?: ReactNode;
+    className?: string;
+    style?: CSSProperties;
+}
+export declare function RadioBox({ value, children, disabled, checked: checkedProp, defaultChecked, onChange, name: nameProp, variant, iconLeft, className, style }: RadioBoxProps): import("react/jsx-runtime").JSX.Element;

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

@@ -0,0 +1,24 @@
+import { HTMLAttributes, ReactNode } from 'react';
+export interface TabItem {
+    /** Stable item value */
+    value: string;
+    /** Visible label */
+    label: ReactNode;
+    /** Optional leading icon */
+    iconLeft?: ReactNode;
+    /** Disable a single tab */
+    disabled?: boolean;
+}
+export interface TabsProps extends Omit<HTMLAttributes<HTMLDivElement>, 'children' | 'onChange'> {
+    /** Tab items */
+    items: TabItem[];
+    /** Controlled selected value */
+    value?: string;
+    /** Initial selected value for uncontrolled usage */
+    defaultValue?: string;
+    /** Called when selection changes */
+    onChange?: (value: string, item: TabItem) => void;
+    /** Stretch items to fill the available width */
+    fullWidth?: boolean;
+}
+export declare function Tabs({ items, value, defaultValue, onChange, fullWidth, className, ...props }: TabsProps): import("react/jsx-runtime").JSX.Element;

package/dist/lib/main.d.ts

@@ -7,6 +7,7 @@ export type { HeadingProps, HeadingLevel } from './components/Heading';
 export type { TypographyProps, TypographyColor, TypographySize, TypographyWeight } from './components/Typography';
 export type { IconProps, IconSize } from './components/Icon';
 export type { LinkProps, LinkVariant } from './components/Link';
+export type { ProductIconProps, ProductIconTheme, ProductIconName } from './components/ProductIcon';
 export type { InputSoloProps, InputSoloVariant } from './components/InputSolo';
 export type { InputGroupedProps, SelectGroupedProps, FormGroupProps, FormRowProps } from './components/InputGrouped';
 export type { BoxProps } from './components/Box';
@@ -16,6 +17,7 @@ export { CopyCode } from './components/CopyCode';
 export type { CopyCodeProps } from './components/CopyCode';
 export { Icon } from './components/Icon';
 export { Link } from './components/Link';
+export { ProductIcon } from './components/ProductIcon';
 export { Button } from './components/Button';
 export { ButtonGroup } from './components/ButtonGroup';
 export { InputSolo } from './components/InputSolo';
@@ -29,7 +31,11 @@ export { GPTInput } from './components/GPTInput';
 export { Header, SubHeader } from './components/Header';
 export { Logo } from './components/Logo';
 export { Label, NewTag } from './components/Label';
+export { Tabs } from './components/Tabs';
+export type { TabsProps, TabItem } from './components/Tabs';
 export type { LabelProps, LabelVariant, NewTagProps, NewTagVariant } from './components/Label';
+export { RadioBox, RadioBoxGroup } from './components/RadioBox';
+export type { RadioBoxProps, RadioBoxGroupProps } from './components/RadioBox';
 export { NewsletterSignup } from './components/NewsletterSignup';
 export type { NewsletterSignupProps } from './components/NewsletterSignup';
 export { Notification } from './components/Notification';

package/dist/main.js

@@ -4,20 +4,23 @@ import { t as o } from "./Button-CJp__tle.js";
 import { t as s } from "./CopyCode-BLXf0o74.js";
 import { t as c } from "./Icon-Dwo9ZDNX.js";
 import { t as l } from "./Link-DGMiLJES.js";
-import { t as u } from "./ButtonGroup-M9-A5Xva.js";
-import { t as d } from "./InputSolo-cLqKBh1c.js";
-import { i as f, n as p, r as m, t as h } from "./InputGrouped-CiA86XL7.js";
-import { t as g } from "./Container-DI2smQRq.js";
-import { t as _ } from "./DiscordInvite-Mkr81Pib.js";
-import { t as v } from "./Heading-DuolDa27.js";
-import { t as y } from "./Typography-nzBx3Yxn.js";
-import { t as b } from "./Logo-h9bQL-cT.js";
-import { t as x } from "./NewsletterSignup-eGx4jwiM.js";
-import { t as S } from "./PrefPanel-25erkPRB.js";
-import { n as C, t as w } from "./Label-BH3YxfNt.js";
-import { t as T } from "./Footer-bUIou6Hl.js";
-import { n as E } from "./GPTInput-DKxJOGYt.js";
-import { t as D } from "./Notification-CJ3iQv3Z.js";
-import { n as O, t as k } from "./Header-fTlA6ysy.js";
-import { ThemeLoader as A, themeLoaderScript as j } from "./components/ThemeLoader/index.js";
-export { a as Box, o as Button, u as ButtonGroup, g as Container, s as CopyCode, _ as DiscordInvite, T as Footer, h as FormGroup, p as FormRow, E as GPTInput, k as Header, v as Heading, c as Icon, m as InputGrouped, d as InputSolo, w as Label, l as Link, b as Logo, C as NewTag, x as NewsletterSignup, D as Notification, S as PrefPanel, f as SelectGrouped, O as SubHeader, A as ThemeLoader, i as ThemeProvider, y as Typography, j as themeLoaderScript, n as useClipboard, t as useNextTheme, r as useSuccessFlash, e as useTheme };
+import { t as u } from "./ProductIcon-DjgAODwc.js";
+import { t as d } from "./ButtonGroup-CfNp_xXf.js";
+import { t as f } from "./InputSolo-DOZp13Mv.js";
+import { i as p, n as m, r as h, t as g } from "./InputGrouped-jbMns5qa.js";
+import { t as _ } from "./Container-mH6tG_kR.js";
+import { t as v } from "./DiscordInvite-CR7g5hay.js";
+import { t as y } from "./Heading-DvLlRFvQ.js";
+import { t as b } from "./Typography-Dw2_XzMu.js";
+import { t as x } from "./Logo-BRXxiQk8.js";
+import { t as S } from "./NewsletterSignup-DEgL93rH.js";
+import { t as C } from "./PrefPanel-CPWoS-hm.js";
+import { n as w, t as T } from "./Label-bbLlUYRM.js";
+import { t as E } from "./Footer-Bcxt0km4.js";
+import { n as D } from "./GPTInput-CZF0-SfI.js";
+import { t as O } from "./Notification-CuVjbJzV.js";
+import { n as k, t as A } from "./Header-CLt3O6Di.js";
+import { t as j } from "./Tabs-CNkFaolf.js";
+import { n as M, t as N } from "./RadioBox-C_KZn7fw.js";
+import { ThemeLoader as P, themeLoaderScript as F } from "./components/ThemeLoader/index.js";
+export { a as Box, o as Button, d as ButtonGroup, _ as Container, s as CopyCode, v as DiscordInvite, E as Footer, g as FormGroup, m as FormRow, D as GPTInput, A as Header, y as Heading, c as Icon, h as InputGrouped, f as InputSolo, T as Label, l as Link, x as Logo, w as NewTag, S as NewsletterSignup, O as Notification, C as PrefPanel, u as ProductIcon, N as RadioBox, M as RadioBoxGroup, p as SelectGrouped, k as SubHeader, j as Tabs, P as ThemeLoader, i as ThemeProvider, b as Typography, F as themeLoaderScript, n as useClipboard, t as useNextTheme, r as useSuccessFlash, e as useTheme };

package/dist/scss/variables.scss

@@ -407,6 +407,29 @@ $body-1000: var(--typography-size-1000);
   --tags-danger-text: var(--primitives-danger-900);
   --tags-danger-background: var(--primitives-danger-100);
   --tags-danger-border: var(--primitives-danger-700);
+
+  --radiobox-background-default: var(--primitives-neutral-0);
+  --radiobox-background-disabled: rgba(255, 255, 255, 0);
+  --radiobox-background-focus: var(--primitives-neutral-0);
+  --radiobox-background-hover: var(--primitives-neutral-0);
+  --radiobox-background-selected: var(--primitives-success-50);
+  --radiobox-border-default: var(--primitives-neutral-200);
+  --radiobox-border-disabled: var(--primitives-neutral-100);
+  --radiobox-border-focus: var(--primitives-neutral-600);
+  --radiobox-border-hover: var(--primitives-neutral-600);
+  --radiobox-border-selected: var(--primitives-success-700);
+  --radiobox-dot-background-selected: var(--primitives-neutral-0);
+  --radiobox-dot-border-default: var(--primitives-neutral-200);
+  --radiobox-dot-border-disabled: var(--primitives-neutral-100);
+  --radiobox-dot-border-focus: var(--primitives-neutral-600);
+  --radiobox-dot-border-hover: var(--primitives-neutral-600);
+  --radiobox-dot-border-selected: var(--primitives-success-700);
+  --radiobox-text-default: var(--primitives-neutral-800);
+  --radiobox-text-disabled: var(--primitives-neutral-300);
+  --radiobox-text-focus: var(--primitives-neutral-1000);
+  --radiobox-text-hover: var(--primitives-neutral-1000);
+  --radiobox-text-price: var(--primitives-success-700);
+  --radiobox-text-selected: var(--primitives-success-1000);
 }
 
 [data-theme='dark'] {
@@ -568,6 +591,29 @@ $body-1000: var(--typography-size-1000);
   --tags-danger-text: var(--primitives-neutral-0);
   --tags-danger-background: var(--primitives-danger-600);
   --tags-danger-border: var(--primitives-danger-500);
+
+  --radiobox-background-default: var(--primitives-neutral-900);
+  --radiobox-background-disabled: rgba(24, 23, 28, 0);
+  --radiobox-background-focus: var(--primitives-neutral-900);
+  --radiobox-background-hover: var(--primitives-neutral-900);
+  --radiobox-background-selected: var(--primitives-success-1000);
+  --radiobox-border-default: var(--primitives-neutral-750);
+  --radiobox-border-disabled: var(--primitives-neutral-750);
+  --radiobox-border-focus: var(--primitives-neutral-200);
+  --radiobox-border-hover: var(--primitives-neutral-200);
+  --radiobox-border-selected: var(--primitives-success-600);
+  --radiobox-dot-background-selected: var(--primitives-neutral-0);
+  --radiobox-dot-border-default: var(--primitives-neutral-750);
+  --radiobox-dot-border-disabled: var(--primitives-neutral-750);
+  --radiobox-dot-border-focus: var(--primitives-neutral-200);
+  --radiobox-dot-border-hover: var(--primitives-neutral-200);
+  --radiobox-dot-border-selected: var(--primitives-success-700);
+  --radiobox-text-default: var(--primitives-neutral-100);
+  --radiobox-text-disabled: var(--primitives-neutral-600);
+  --radiobox-text-focus: var(--primitives-neutral-0);
+  --radiobox-text-hover: var(--primitives-neutral-0);
+  --radiobox-text-price: var(--primitives-neutral-0);
+  --radiobox-text-selected: var(--primitives-neutral-0);
 }
 
 /* Semantics - Light */
@@ -617,6 +663,67 @@ $body-1000: var(--typography-size-1000);
   --HS-surface-attention-background-boxed: var(--primitives-attention-100);
   --HS-surface-attention-border: var(--primitives-attention-200);
   --HS-surface-attention-border-boxed: var(--primitives-attention-300);
+
+  /* Product Icon Variables - Light Mode */
+  --icon-background-brand: var(--primitives-brand-1000);
+  --icon-background-neutral: var(--primitives-neutral-50);
+  --icon-grayscale-just-black: var(--primitives-neutral-1000);
+  --icon-grayscale-just-white: var(--primitives-neutral-0);
+  --icon-grayscale-primary-neutral-100: var(--primitives-neutral-100);
+  --icon-grayscale-primary-neutral-1000: var(--primitives-neutral-1000);
+  --icon-grayscale-primary-neutral-200: var(--primitives-neutral-200);
+  --icon-grayscale-primary-neutral-300: var(--primitives-neutral-300);
+  --icon-grayscale-primary-neutral-50: var(--primitives-neutral-50);
+  --icon-grayscale-primary-neutral-500: var(--primitives-neutral-500);
+  --icon-monochrome-accent-brand-100: var(--hs-surface-brand-background-100);
+  --icon-monochrome-accent-brand-1000: var(--primitives-brand-1000);
+  --icon-monochrome-accent-neutral-50: var(--primitives-neutral-50);
+  --icon-monochrome-just-black: var(--primitives-neutral-1000);
+  --icon-monochrome-just-white: var(--primitives-neutral-0);
+  --icon-monochrome-knockount-0: var(--hs-surface-ui-background-0);
+  --icon-monochrome-knockout-50: var(--hs-surface-ui-background-50);
+  --icon-monochrome-primary-brand-1000: var(--primitives-brand-1000);
+  --icon-monochrome-primary-brand-200: var(--primitives-brand-200);
+  --icon-monochrome-primary-brand-300: var(--primitives-brand-300);
+  --icon-monochrome-primary-brand-500: var(--primitives-brand-500);
+  --icon-monochrome-primary-neutral-50: var(--primitives-neutral-50);
+  --icon-multicolor-accent-brand-1000: var(--primitives-neutral-1000);
+  --icon-multicolor-accent-logo-navy: var(--logo-navy);
+  --icon-multicolor-accent-logo-teal: var(--logo-teal);
+  --icon-multicolor-accent-neutral-0: var(--primitives-neutral-0);
+  --icon-multicolor-accent-neutral-100: var(--primitives-neutral-100);
+  --icon-multicolor-accent-neutral-1000: var(--primitives-neutral-1000);
+  --icon-multicolor-accent-neutral-200: var(--primitives-neutral-200);
+  --icon-multicolor-accent-neutral-300: var(--primitives-neutral-300);
+  --icon-multicolor-accent-neutral-50: var(--primitives-neutral-50);
+  --icon-multicolor-accent-neutral-500: var(--primitives-neutral-500);
+  --icon-multicolor-accent-neutral-600: var(--primitives-neutral-600);
+  --icon-multicolor-just-black: var(--primitives-neutral-1000);
+  --icon-multicolor-just-white: var(--primitives-neutral-0);
+  --icon-multicolor-knockout-neutral-0: var(--hs-surface-ui-background-0);
+  --icon-multicolor-knockout-neutral-50: var(--hs-common-background);
+  --icon-multicolor-primary-brand-500: var(--primitives-brand-500);
+  --icon-multicolor-primary-neutral-0: var(--primitives-neutral-0);
+  --icon-multicolor-primary-neutral-50: var(--primitives-neutral-50);
+  --icon-multicolor-primary-neutral-500: var(--primitives-neutral-500);
+  --icon-multicolor-primary-success-200: var(--primitives-success-200);
+
+  /* Product Icon Variables v2 - Light Mode */
+  --hs-surface-ui-background-0: var(--primitives-neutral-0);
+  --icon-duotone-duotone-brand-dark: var(--primitives-brand-1000);
+  --icon-duotone-duotone-brand-key: var(--primitives-brand-500);
+  --icon-duotone-duotone-brand-light: var(--primitives-brand-200);
+  --icon-monotone-mono-key-1000: var(--primitives-neutral-1000);
+  --icon-monotone-mono-key-300: var(--primitives-neutral-300);
+  --icon-monotone-mono-key-50: var(--primitives-neutral-50);
+  --icon-monotone-mono-key-600: var(--primitives-neutral-600);
+  --icon-multicolor-multicolor-brand-accent: var(--primitives-success-200);
+  --icon-multicolor-multicolor-brand-brand: var(--primitives-brand-500);
+  --icon-multicolor-multicolor-brand-key-1000: var(--primitives-neutral-1000);
+  --icon-multicolor-multicolor-brand-key-200: var(--primitives-neutral-200);
+  --icon-multicolor-multicolor-brand-key-50: var(--primitives-neutral-50);
+  --icon-multicolor-multicolor-brand-key-500: var(--primitives-neutral-500);
+  --icon-single-line-color: var(--primitives-neutral-1000);
 }
 
 /* Semantics - Dark */
@@ -666,4 +773,65 @@ $body-1000: var(--typography-size-1000);
   --HS-surface-attention-background-boxed: var(--primitives-attention-200);
   --HS-surface-attention-border: var(--primitives-attention-300);
   --HS-surface-attention-border-boxed: var(--primitives-attention-300);
+
+  /* Product Icon Variables - Dark Mode */
+  --icon-background-brand: var(--primitives-brand-1000);
+  --icon-background-neutral: var(--primitives-neutral-800);
+  --icon-grayscale-just-black: var(--primitives-neutral-1000);
+  --icon-grayscale-just-white: var(--primitives-neutral-0);
+  --icon-grayscale-primary-neutral-100: var(--primitives-neutral-300);
+  --icon-grayscale-primary-neutral-1000: var(--primitives-neutral-0);
+  --icon-grayscale-primary-neutral-200: var(--primitives-neutral-300);
+  --icon-grayscale-primary-neutral-300: var(--primitives-neutral-400);
+  --icon-grayscale-primary-neutral-50: var(--primitives-neutral-100);
+  --icon-grayscale-primary-neutral-500: var(--primitives-neutral-600);
+  --icon-monochrome-accent-brand-100: var(--hs-surface-brand-background-100);
+  --icon-monochrome-accent-brand-1000: var(--primitives-brand-1000);
+  --icon-monochrome-accent-neutral-50: var(--primitives-neutral-500);
+  --icon-monochrome-just-black: var(--primitives-neutral-1000);
+  --icon-monochrome-just-white: var(--primitives-neutral-0);
+  --icon-monochrome-knockount-0: var(--hs-surface-ui-background-0);
+  --icon-monochrome-knockout-50: var(--hs-surface-ui-background-50);
+  --icon-monochrome-primary-brand-1000: var(--primitives-brand-200);
+  --icon-monochrome-primary-brand-200: var(--primitives-brand-400);
+  --icon-monochrome-primary-brand-300: var(--primitives-brand-600);
+  --icon-monochrome-primary-brand-500: var(--primitives-brand-600);
+  --icon-monochrome-primary-neutral-50: var(--primitives-neutral-50);
+  --icon-multicolor-accent-brand-1000: var(--primitives-brand-100);
+  --icon-multicolor-accent-logo-navy: var(--logo-navy);
+  --icon-multicolor-accent-logo-teal: var(--logo-teal);
+  --icon-multicolor-accent-neutral-0: var(--primitives-neutral-1000);
+  --icon-multicolor-accent-neutral-100: var(--primitives-neutral-700);
+  --icon-multicolor-accent-neutral-1000: var(--primitives-neutral-300);
+  --icon-multicolor-accent-neutral-200: var(--primitives-neutral-600);
+  --icon-multicolor-accent-neutral-300: var(--primitives-neutral-500);
+  --icon-multicolor-accent-neutral-50: var(--primitives-neutral-800);
+  --icon-multicolor-accent-neutral-500: var(--primitives-neutral-50);
+  --icon-multicolor-accent-neutral-600: var(--primitives-neutral-600);
+  --icon-multicolor-just-black: var(--primitives-neutral-1000);
+  --icon-multicolor-just-white: var(--primitives-neutral-0);
+  --icon-multicolor-knockout-neutral-0: var(--primitives-neutral-1000);
+  --icon-multicolor-knockout-neutral-50: var(--hs-common-background);
+  --icon-multicolor-primary-brand-500: var(--primitives-brand-500);
+  --icon-multicolor-primary-neutral-0: var(--primitives-neutral-700);
+  --icon-multicolor-primary-neutral-50: var(--primitives-neutral-400);
+  --icon-multicolor-primary-neutral-500: var(--primitives-neutral-500);
+  --icon-multicolor-primary-success-200: var(--primitives-success-300);
+
+  /* Product Icon Variables v2 - Dark Mode */
+  --hs-surface-ui-background-0: var(--primitives-neutral-900);
+  --icon-duotone-duotone-brand-dark: var(--primitives-brand-100);
+  --icon-duotone-duotone-brand-key: var(--primitives-brand-500);
+  --icon-duotone-duotone-brand-light: var(--primitives-brand-900);
+  --icon-monotone-mono-key-1000: var(--primitives-neutral-0);
+  --icon-monotone-mono-key-300: var(--primitives-neutral-400);
+  --icon-monotone-mono-key-50: var(--primitives-neutral-100);
+  --icon-monotone-mono-key-600: var(--primitives-neutral-500);
+  --icon-multicolor-multicolor-brand-accent: var(--primitives-success-300);
+  --icon-multicolor-multicolor-brand-brand: var(--primitives-brand-500);
+  --icon-multicolor-multicolor-brand-key-1000: var(--primitives-brand-100);
+  --icon-multicolor-multicolor-brand-key-200: var(--primitives-neutral-750);
+  --icon-multicolor-multicolor-brand-key-50: var(--primitives-neutral-850);
+  --icon-multicolor-multicolor-brand-key-500: var(--primitives-neutral-400);
+  --icon-single-line-color: var(--primitives-neutral-0);
 }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "highsoft-ui",
-  "version": "1.0.122",
+  "version": "1.0.124",
   "description": "Highsoft UI",
   "type": "module",
   "main": "dist/main.js",
@@ -39,6 +39,7 @@
     "build-storybook": "storybook build",
     "prettier": "npx prettier . --write",
     "prettier-ci": "npx prettier . --check",
+    "icons": "node scripts/convert-product-icons.cjs",
     "stylelint": "npx stylelint '**/*.css'",
     "prepare": "husky && husky install"
   },
@@ -101,7 +102,7 @@
     "typescript": "^6.0.2",
     "typescript-eslint": "^8.31.1",
     "vite": "^8.0.0",
-    "vite-plugin-dts": "^4.5.3",
+    "vite-plugin-dts": "^5.0.0",
     "vite-plugin-lib-inject-css": "^2.0.1",
     "vite-plugin-static-copy": "^3.0.0"
   },