highsoft-ui 1.0.126 → 1.0.128

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

@@ -0,0 +1,54 @@
+import { ReactNode, CSSProperties } from 'react';
+export interface CheckboxGroupProps {
+    name: string;
+    value?: string[];
+    defaultValue?: string[];
+    onChange?: (value: string[]) => void;
+    align?: 'left' | 'right';
+    children: ReactNode;
+    className?: string;
+    style?: CSSProperties;
+}
+export declare function CheckboxGroup({ name, value: valueProp, defaultValue, onChange, align, children, className, style }: CheckboxGroupProps): import("react/jsx-runtime").JSX.Element;
+export interface CheckboxProps {
+    /** Value submitted when this option is selected (required inside a group) */
+    value?: string;
+    children?: ReactNode;
+    disabled?: boolean;
+    /** Controlled checked state (standalone usage) */
+    checked?: boolean;
+    /** Initial checked state (uncontrolled standalone usage) */
+    defaultChecked?: boolean;
+    /**
+     * Tri-state visual indicator. Useful for "select all" parents whose children
+     * are partially selected. Ignored when `checked` is true.
+     */
+    indeterminate?: boolean;
+    /** Called with the next checked state when toggled */
+    onChange?: (checked: boolean, value?: string) => void;
+    /** Checkbox group name (auto-provided when inside CheckboxGroup) */
+    name?: string;
+    /**
+     * Visual layout variant.
+     * - `'default'` — horizontal row with text content and a check indicator (default)
+     * - `'icon'` — compact square, content centred, no check indicator
+     */
+    variant?: 'default' | 'icon';
+    /**
+     * Indicator alignment. Defaults to the parent group's alignment, or
+     * `'right'` for standalone checkboxes.
+     * - `'right'` — indicator on the right edge of the row (default)
+     * - `'left'` — indicator on the left edge of the row
+     */
+    align?: 'left' | 'right';
+    /**
+     * 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 Checkbox({ value, children, disabled, checked: checkedProp, defaultChecked, indeterminate, onChange, name: nameProp, variant, align: alignProp, iconLeft, className, style }: CheckboxProps): import("react/jsx-runtime").JSX.Element;

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

@@ -0,0 +1,67 @@
+import { ReactNode } from 'react';
+export type DropdownAlign = 'start' | 'center' | 'end';
+export type DropdownSide = 'top' | 'right' | 'bottom' | 'left';
+export interface DropdownOption {
+    value: string;
+    label: ReactNode;
+    disabled?: boolean;
+}
+export interface DropdownProps {
+    /** The element that opens the dropdown when clicked (usually a Button). */
+    trigger: ReactNode;
+    /** Controlled selected value for single-select mode. */
+    value?: string;
+    /** 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.
+     */
+    showCheck?: boolean;
+    /**
+     * Whether the menu closes when an item is selected. Defaults to `false`
+     * so users can change their mind without re-opening — set to `true` for
+     * traditional action-menu behaviour.
+     */
+    closeOnSelect?: boolean;
+    /** Declarative list of items. Use either `options` or `children`, not both. */
+    options?: DropdownOption[];
+    /** Composable children — use `<DropdownItem>` inside. */
+    children?: ReactNode;
+    side?: DropdownSide;
+    align?: DropdownAlign;
+    sideOffset?: number;
+    alignOffset?: number;
+    open?: boolean;
+    onOpenChange?: (open: boolean) => void;
+    defaultOpen?: boolean;
+    /**
+     * Width of the menu panel.
+     * - omitted (default) — the panel sizes to fit its widest item
+     * - `'trigger'` — match the trigger's rendered width
+     * - `number | string` — explicit width (number → px, string → CSS length)
+     */
+    width?: number | string | 'trigger';
+    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-runtime").JSX.Element;
+export interface DropdownItemProps {
+    /**
+     * Item value. When set, the item participates in single-select mode
+     * (alongside `value`/`onValueChange` on the parent `<Dropdown>`).
+     */
+    value?: string;
+    disabled?: boolean;
+    children: 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`
+     * on the parent.
+     */
+    onSelect?: () => void;
+    className?: string;
+}
+export declare function DropdownItem({ value, disabled, children, onSelect, className }: DropdownItemProps): import("react/jsx-runtime").JSX.Element;
+export declare const DropdownSeparator: ({ className }: {
+    className?: string;
+}) => import("react/jsx-runtime").JSX.Element;

package/dist/lib/components/Modal/ModalContactFooter.d.ts

@@ -0,0 +1,21 @@
+import { ReactNode } from 'react';
+import { ButtonVariant, ButtonSize } from '../Button';
+export interface ModalContactFooterProps {
+    /** Image URLs shown as a stacked row of round avatars on the left */
+    avatars?: string[];
+    /** Question/prompt text shown next to the avatars */
+    text?: string;
+    /** CTA button label */
+    buttonLabel?: string;
+    /** Icon shown on the right side of the CTA button */
+    buttonIcon?: ReactNode;
+    /** If set, the CTA renders as an `<a>` */
+    buttonHref?: string;
+    /** Click handler when the CTA is a button */
+    onButtonClick?: () => void;
+    /** CTA button variant */
+    buttonVariant?: ButtonVariant;
+    /** CTA button size */
+    buttonSize?: ButtonSize;
+}
+export declare function ModalContactFooter({ avatars, text, buttonLabel, buttonIcon, buttonHref, onButtonClick, buttonVariant, buttonSize }: ModalContactFooterProps): import("react/jsx-runtime").JSX.Element;

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

@@ -0,0 +1,41 @@
+import { ReactNode } from 'react';
+import { ButtonVariant } from '../Button';
+export type ModalFooterType = 'default' | 'submit' | 'submit-wide';
+export type ModalSubmitVariant = Extract<ButtonVariant, 'brand' | 'danger' | 'success' | 'attention'>;
+export interface ModalProps {
+    /** Whether the modal is open */
+    open: boolean;
+    /** Called when the modal should close (X click, ESC, backdrop click) */
+    onClose: () => void;
+    /** Title shown in the header */
+    title: string;
+    /** Body content */
+    children?: ReactNode;
+    /**
+     * Footer configuration:
+     * - `"default"` (default): single Close button right-aligned
+     * - `"submit"`: Cancel + Submit buttons right-aligned
+     * - `"submit-wide"`: Cancel left, wide Submit right
+     * - `false`: no footer
+     * - `ReactNode`: custom footer content
+     */
+    footer?: ModalFooterType | ReactNode | false;
+    /** Variant of the Submit button when `footer` is "submit" or "submit-wide" */
+    submitVariant?: ModalSubmitVariant;
+    /** Label for the Submit button */
+    submitLabel?: string;
+    /** Label for the Cancel button */
+    cancelLabel?: string;
+    /** Label for the default Close button in the footer */
+    closeLabel?: string;
+    /** Called when the Submit button is clicked */
+    onSubmit?: () => void;
+    /** Called when the Cancel button is clicked. Defaults to `onClose`. */
+    onCancel?: () => void;
+    /** Close when the backdrop is clicked. Default true. */
+    closeOnBackdropClick?: boolean;
+    /** aria-label for the X close button */
+    closeButtonLabel?: string;
+    className?: string;
+}
+export declare function Modal({ open, onClose, title, children, footer, submitVariant, submitLabel, cancelLabel, closeLabel, onSubmit, onCancel, closeOnBackdropClick, closeButtonLabel, className }: ModalProps): import("react/jsx-runtime").JSX.Element;

package/dist/lib/main.d.ts

@@ -36,8 +36,16 @@ 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 { Checkbox, CheckboxGroup } from './components/Checkbox';
+export type { CheckboxProps, CheckboxGroupProps } from './components/Checkbox';
+export { Dropdown, DropdownItem, DropdownSeparator } from './components/Dropdown';
+export type { DropdownProps, DropdownItemProps, DropdownOption, DropdownAlign, DropdownSide } from './components/Dropdown';
 export { NewsletterSignup } from './components/NewsletterSignup';
 export type { NewsletterSignupProps } from './components/NewsletterSignup';
+export { Modal } from './components/Modal';
+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 { PrefPanel } from './components/PrefPanel';
 export { ThemeLoader, themeLoaderScript } from './components/ThemeLoader';

package/dist/main.js

@@ -1,26 +1,30 @@
 import { c as e, d as t, r as n, s as r, u as i } from "./utils-BCI5dixg.js";
 import { t as a } from "./Box-Bi-n_ZxQ.js";
-import { t as o } from "./Button-CJp__tle.js";
-import { t as s } from "./CopyCode-BLXf0o74.js";
+import { t as o } from "./Button-FtTHXgq3.js";
+import { t as s } from "./CopyCode-C7iHMVIg.js";
 import { t as c } from "./Icon-Dwo9ZDNX.js";
 import { t as l } from "./Link-DGMiLJES.js";
 import { t as u } from "./ProductIcon-DjgAODwc.js";
-import { t as d } from "./ButtonGroup-CfNp_xXf.js";
+import { t as d } from "./ButtonGroup-eZng2GQy.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 { i as p, n as m, r as h, t as g } from "./InputGrouped-B9jyncxb.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-BsddrH6J.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-B8todalU.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 };
+import { t as S } from "./NewsletterSignup-jPKQLKvl.js";
+import { n as C, r as w, t as T } from "./Dropdown-B6J7ph3w.js";
+import { t as E } from "./PrefPanel-D-xcKbcr.js";
+import { n as D, t as O } from "./Label-BHGkcLu9.js";
+import { t as k } from "./Footer-Q3Z-Synu.js";
+import { n as A } from "./GPTInput-Cgu6_F53.js";
+import { t as j } from "./Notification-CO-mX_7b.js";
+import { n as M, t as N } from "./Header-DxauB1pI.js";
+import { t as P } from "./Tabs-DanjfIHP.js";
+import { n as F, t as I } from "./RadioBox-B9rLrNTK.js";
+import { n as L, t as R } from "./Checkbox-CMWwWnbI.js";
+import { Modal as z } from "./components/Modal/index.js";
+import { ModalContactFooter as B } from "./components/Modal/ModalContactFooter.js";
+import { ThemeLoader as V, themeLoaderScript as H } 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, B as ModalContactFooter, D as NewTag, S as NewsletterSignup, j as Notification, E as PrefPanel, u as ProductIcon, I as RadioBox, F as RadioBoxGroup, p as SelectGrouped, M as SubHeader, P as Tabs, V as ThemeLoader, i as ThemeProvider, b as Typography, H as themeLoaderScript, n as useClipboard, t as useNextTheme, r as useSuccessFlash, e as useTheme };

package/dist/scss/variables.scss

@@ -430,6 +430,48 @@ $body-1000: var(--typography-size-1000);
   --radiobox-text-hover: var(--primitives-neutral-1000);
   --radiobox-text-price: var(--primitives-success-700);
   --radiobox-text-selected: var(--primitives-success-1000);
+
+  --checkbox-background-default: var(--primitives-neutral-0);
+  --checkbox-background-disabled: var(--primitives-neutral-0);
+  --checkbox-background-focus: var(--primitives-neutral-0);
+  --checkbox-background-hover: var(--primitives-neutral-0);
+  --checkbox-background-selected: var(--primitives-success-50);
+  --checkbox-background-selected-focused: var(--primitives-success-50);
+  --checkbox-checkbox-icon-default: var(--primitives-neutral-0);
+  --checkbox-checkbox-icon-disabled: var(--primitives-neutral-0);
+  --checkbox-checkbox-icon-focus: var(--primitives-neutral-0);
+  --checkbox-checkbox-icon-hover: var(--primitives-neutral-0);
+  --checkbox-checkbox-icon-selected: var(--primitives-success-700);
+  --checkbox-checkbox-icon-selected-focused: var(--primitives-success-700);
+  --checkbox-stroke-default: var(--primitives-neutral-200);
+  --checkbox-stroke-disabled: var(--primitives-neutral-100);
+  --checkbox-stroke-focus: var(--primitives-neutral-200);
+  --checkbox-stroke-hover: var(--primitives-neutral-500);
+  --checkbox-stroke-selected: var(--primitives-success-700);
+  --checkbox-stroke-selected-focused: var(--primitives-success-700);
+  --checkbox-text-default: var(--primitives-neutral-200);
+  --checkbox-text-disabled: var(--primitives-neutral-100);
+  --checkbox-text-focus: var(--primitives-neutral-200);
+  --checkbox-text-hover: var(--primitives-neutral-600);
+  --checkbox-text-selected: var(--primitives-success-700);
+
+  --dropdown-group-background: var(--primitives-neutral-100);
+  --dropdown-group-border: var(--primitives-neutral-100);
+  --dropdown-group-border-top: 1px;
+  --dropdown-group-borders: 1px;
+  --dropdown-item-background-default: var(--primitives-neutral-50);
+  --dropdown-item-background-disabled: var(--primitives-neutral-50);
+  --dropdown-item-background-focus: var(--primitives-neutral-0);
+  --dropdown-item-background-hover: var(--primitives-neutral-0);
+  --dropdown-item-background-selected: var(--primitives-neutral-50);
+  --dropdown-item-icon-default: var(--primitives-neutral-50);
+  --dropdown-item-icon-disabled: var(--primitives-neutral-500);
+  --dropdown-item-icon-hover: var(--primitives-neutral-300);
+  --dropdown-item-icon-selected: var(--primitives-neutral-1000);
+  --dropdown-item-text-default: var(--primitives-neutral-800);
+  --dropdown-item-text-disabled: var(--primitives-neutral-500);
+  --dropdown-item-text-hover: var(--primitives-neutral-1000);
+  --dropdown-item-text-selected: var(--primitives-neutral-1000);
 }
 
 [data-theme='dark'] {
@@ -614,6 +656,48 @@ $body-1000: var(--typography-size-1000);
   --radiobox-text-hover: var(--primitives-neutral-0);
   --radiobox-text-price: var(--primitives-neutral-0);
   --radiobox-text-selected: var(--primitives-neutral-0);
+
+  --checkbox-background-default: var(--primitives-neutral-900);
+  --checkbox-background-disabled: var(--primitives-neutral-900);
+  --checkbox-background-focus: var(--primitives-neutral-900);
+  --checkbox-background-hover: var(--primitives-neutral-900);
+  --checkbox-background-selected: var(--primitives-success-900);
+  --checkbox-background-selected-focused: var(--primitives-success-900);
+  --checkbox-checkbox-icon-default: var(--primitives-neutral-800);
+  --checkbox-checkbox-icon-disabled: var(--primitives-neutral-800);
+  --checkbox-checkbox-icon-focus: var(--primitives-neutral-800);
+  --checkbox-checkbox-icon-hover: var(--primitives-neutral-800);
+  --checkbox-checkbox-icon-selected: var(--primitives-success-600);
+  --checkbox-checkbox-icon-selected-focused: var(--primitives-success-600);
+  --checkbox-stroke-default: var(--primitives-neutral-600);
+  --checkbox-stroke-disabled: var(--primitives-neutral-750);
+  --checkbox-stroke-focus: var(--primitives-neutral-600);
+  --checkbox-stroke-hover: var(--primitives-neutral-300);
+  --checkbox-stroke-selected: var(--primitives-success-600);
+  --checkbox-stroke-selected-focused: var(--primitives-success-600);
+  --checkbox-text-default: var(--primitives-neutral-750);
+  --checkbox-text-disabled: var(--primitives-neutral-750);
+  --checkbox-text-focus: var(--primitives-neutral-200);
+  --checkbox-text-hover: var(--primitives-neutral-200);
+  --checkbox-text-selected: var(--primitives-success-600);
+
+  --dropdown-group-background: var(--primitives-neutral-750);
+  --dropdown-group-border: var(--primitives-neutral-750);
+  --dropdown-group-border-top: 1px;
+  --dropdown-group-borders: 1px;
+  --dropdown-item-background-default: var(--primitives-neutral-900);
+  --dropdown-item-background-disabled: var(--primitives-neutral-900);
+  --dropdown-item-background-focus: var(--primitives-neutral-800);
+  --dropdown-item-background-hover: var(--primitives-neutral-750);
+  --dropdown-item-background-selected: var(--primitives-neutral-900);
+  --dropdown-item-icon-default: var(--primitives-neutral-900);
+  --dropdown-item-icon-disabled: var(--primitives-neutral-500);
+  --dropdown-item-icon-hover: var(--primitives-neutral-400);
+  --dropdown-item-icon-selected: var(--primitives-neutral-0);
+  --dropdown-item-text-default: var(--primitives-neutral-100);
+  --dropdown-item-text-disabled: var(--primitives-neutral-500);
+  --dropdown-item-text-hover: var(--primitives-neutral-0);
+  --dropdown-item-text-selected: var(--primitives-neutral-0);
 }
 
 /* Semantics - Light */

package/dist/styles.module-BZplfYRW.js

@@ -0,0 +1,17 @@
+var e = {
+	avatar: "RjuPka_avatar",
+	avatarStack: "RjuPka_avatarStack",
+	body: "RjuPka_body",
+	closeButton: "RjuPka_closeButton",
+	contactFooter: "RjuPka_contactFooter",
+	contactText: "RjuPka_contactText",
+	footer: "RjuPka_footer",
+	footerDefault: "RjuPka_footerDefault",
+	footerSubmit: "RjuPka_footerSubmit",
+	footerSubmitWide: "RjuPka_footerSubmitWide",
+	header: "RjuPka_header",
+	modal: "RjuPka_modal",
+	title: "RjuPka_title"
+};
+//#endregion
+export { e as t };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "highsoft-ui",
-  "version": "1.0.126",
+  "version": "1.0.128",
   "description": "Highsoft UI",
   "type": "module",
   "main": "dist/main.js",