highsoft-ui 1.0.171 → 1.0.172

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';

package/dist/main.js

@@ -35,18 +35,21 @@ 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 { ThemeLoader as ye, themeLoaderScript as be } 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, J as Tabs, ye 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, be 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.172",
   "description": "Highsoft UI",
   "type": "module",
   "repository": {