@bspk/ui 1.1.20 → 1.1.22

package/src/Tooltip.tsx

@@ -4,13 +4,19 @@ import { ReactElement, cloneElement, useId, useMemo, useRef, useState } from 're
 import { Portal } from './Portal';
 import { Placement, useFloating } from './hooks/useFloating';
 
+const DEFAULT = {
+    placement: 'top',
+    showTail: true,
+    disabled: false,
+} as const;
+
 export type TooltipProps = {
     /**
      * The placement of the tooltip.
      *
      * @default top
      */
-    placement?: Placement;
+    placement?: Extract<Placement, 'bottom' | 'left' | 'right' | 'top'>;
     /** The tooltip content. */
     label: string;
     /**
@@ -27,15 +33,33 @@ export type TooltipProps = {
      *
      * @default true
      */
-    tail?: boolean;
+    showTail?: boolean;
 };
 
 /**
  * Brief message that provide additional guidance and helps users perform an action if needed.
  *
+ * @example
+ *     import { Tooltip } from '@bspk/ui/Tooltip';
+ *     import { Button } from '@bspk/ui/Button';
+ *
+ *     export function Example() {
+ *         return (
+ *             <Tooltip label="I explain what this button does" placement="top">
+ *                 <Button>Click me</Button>
+ *             </Tooltip>
+ *         );
+ *     }
+ *
  * @name Tooltip
  */
-function Tooltip({ placement = 'top', label, children, disabled = false, tail = true }: TooltipProps) {
+function Tooltip({
+    placement = DEFAULT.placement,
+    label,
+    children,
+    disabled = DEFAULT.disabled,
+    showTail = DEFAULT.showTail,
+}: TooltipProps) {
     const id = useId();
     const [show, setShow] = useState(false);
 
@@ -56,7 +80,7 @@ function Tooltip({ placement = 'top', label, children, disabled = false, tail =
     const { floatingStyles, middlewareData, elements } = useFloating({
         placement: placement,
         strategy: 'fixed',
-        offsetOptions: 8,
+        offsetOptions: 4,
         arrowRef,
         hide: !show,
     });
@@ -80,7 +104,7 @@ function Tooltip({ placement = 'top', label, children, disabled = false, tail =
                         style={floatingStyles}
                     >
                         <span data-text>{label}</span>
-                        {tail !== false && (
+                        {showTail !== false && (
                             <span
                                 aria-hidden
                                 data-arrow

package/src/Txt.tsx

@@ -30,7 +30,15 @@ export type TxtProps<As extends ElementType = 'span'> = {
 };
 
 /**
- * A text component that applies the correct font styles based on the variant and size. variant
+ * A text component that applies the correct font styles based on the variant
+ * and size. variant
+ *
+ * @example
+ *     import { Txt } from '@bspk/ui/Txt';
+ *
+ *     export function Example() {
+ *         return <Txt>Example Txt</Txt>;
+ *     }
  *
  * @name Txt
  */
@@ -48,7 +56,11 @@ function Txt<As extends ElementType = 'span'>({
     const As: ElementType = as || 'span';
 
     return (
-        <As {...containerProps} data-bspk="txt" style={{ ...styleProp, font: `var(--${variant})` }}>
+        <As
+            {...containerProps}
+            data-bspk="txt"
+            style={{ ...styleProp, font: `var(--${variant})` }}
+        >
             {content}
         </As>
     );

package/src/badge.scss

@@ -9,6 +9,9 @@
     width: fit-content;
     min-width: var(--size);
     padding: 0 var(--spacing-sizing-02);
+    font: var(--labels-x-small);
+    color: var(--foreground-brand-on-primary);
+    background: var(--surface-brand-primary);
 
     &[data-size='x-small'] {
         --size: var(--spacing-sizing-05);
@@ -16,14 +19,24 @@
         padding: 2px var(--spacing-sizing-01);
     }
 
-    font: var(--labels-x-small);
-    color: var(--foreground-brand-on-primary);
-    background: var(--surface-brand-primary);
-
     &[data-variant='secondary'] {
         color: var(--foreground-brand-on-secondary);
         background: var(--surface-brand-secondary);
     }
+
+    &[data-surface-border] {
+        position: relative;
+
+        &::after {
+            display: block;
+            content: ' ';
+            position: absolute;
+            inset: 0;
+            border-radius: var(--radius-circular);
+            border: 2px solid var(--surface-neutral-t1-base);
+            z-index: 1;
+        }
+    }
 }
 
 /** Copyright 2025 Anywhere Real Estate - CC BY 4.0 */

package/src/demo/examples.tsx

@@ -478,6 +478,9 @@ export const examples: (setState: DemoSetState, action: DemoAction) => Record<st
             );
         },
     },
+    ProgressBar: {
+        containerStyle: { width: '80%' },
+    },
     ProgressionStepper: {
         presets: setPresets<ProgressionStepperProps>([
             {

package/src/progress-bar.scss

@@ -29,8 +29,6 @@
     }
 
     &[data-size='small'] {
-        max-width: 248px;
-
         [data-bar] {
             height: var(--spacing-sizing-01);
         }

package/src/radio-group.scss

@@ -0,0 +1,5 @@
+[data-bspk='radio-group'] {
+    display: flex;
+    flex-direction: column;
+    gap: var(--spacing-sizing-01);
+}

package/src/textarea.scss

@@ -27,6 +27,7 @@
     [data-replicated-value] {
         white-space: pre-wrap;
         visibility: hidden;
+        overflow-y: hidden;
     }
 
     textarea,
@@ -38,11 +39,14 @@
         grid-area: 1 / 1 / 2 / 2;
         min-height: calc((var(--line-height) * var(--min-rows)) + (var(--padding) * 2));
         max-height: calc((var(--line-height) * var(--max-rows)) + (var(--padding) * 2));
+        max-width: 100%;
     }
 
     textarea {
         --border-color: var(--stroke-neutral-base);
 
+        text-wrap: break-word;
+
         &::placeholder {
             color: var(--foreground-neutral-on-surface-variant-03);
         }

package/src/toggle-option.scss

@@ -16,6 +16,7 @@
         align-items: unset;
     }
 
+    // this media query targets touch devices
     @media (any-pointer: coarse) {
         min-height: var(--spacing-sizing-12);
     }
@@ -36,26 +37,6 @@
         color: var(--foreground-neutral-on-surface-variant-01);
     }
 
-    &[data-size='small'] {
-        [data-label] {
-            font: var(--labels-small);
-        }
-
-        [data-description] {
-            font: var(--body-x-small);
-        }
-    }
-
-    &[data-size='large'] {
-        [data-label] {
-            font: var(--labels-large);
-        }
-
-        [data-description] {
-            font: var(--body-base);
-        }
-    }
-
     &:not(:has(:disabled)) {
         [data-pseudo='focus'] &,
         &:focus-visible,

package/dist/SwitchGroup.d.ts

@@ -1,42 +0,0 @@
-import { ToggleOptionProps } from './ToggleOption';
-import { ElementProps, CommonProps } from './';
-export type SwitchGroupOption = Pick<ToggleOptionProps, 'description' | 'label'> & Required<CommonProps<'value'>>;
-export type SwitchGroupProps = CommonProps<'aria-label' | 'name'> & {
-    /**
-     * The function to call when the switches are changed.
-     *
-     * @required
-     */
-    onChange: (value: string[]) => void;
-    /**
-     * The options for the switches.
-     *
-     * @example
-     *     [
-     *         { value: '1', label: 'Option 1' },
-     *         { value: '2', label: 'Option 2' },
-     *         { value: '3', label: 'Option 3' },
-     *     ];
-     *
-     * @type Array<SwitchGroupOption>
-     * @required
-     */
-    options: SwitchGroupOption[];
-    /**
-     * The values of the switches in the on state.
-     *
-     * @type Array<string>
-     */
-    value?: SwitchGroupProps['options'][number]['value'][];
-};
-/**
- * A group of switches that allows users to choose one or more items from a list or turn an feature on or off.
- *
- * @name SwitchGroup
- */
-declare function SwitchGroup({ onChange, options, name, value: values, ...props }: ElementProps<SwitchGroupProps, 'div'>): import("react/jsx-runtime").JSX.Element;
-declare namespace SwitchGroup {
-    var bspkName: string;
-}
-export { SwitchGroup };
-/** Copyright 2025 Anywhere Real Estate - CC BY 4.0 */

package/dist/SwitchGroup.js

@@ -1,16 +0,0 @@
-import { jsx as _jsx } from "react/jsx-runtime";
-import { Switch } from './Switch';
-import { ToggleOption } from './ToggleOption';
-/**
- * A group of switches that allows users to choose one or more items from a list or turn an feature on or off.
- *
- * @name SwitchGroup
- */
-function SwitchGroup({ onChange, options = [], name, value: values = [], ...props }) {
-    return (_jsx("div", { ...props, "data-bspk": "switch-group", role: "group", children: options.map(({ label, description, value }) => (_jsx(ToggleOption, { description: description, label: label, children: _jsx(Switch, { "aria-label": label, checked: values.includes(value), name: name, onChange: (checked) => {
-                    onChange(checked ? [...values, value] : values.filter((v) => v !== value));
-                }, value: value }) }, value))) }));
-}
-SwitchGroup.bspkName = 'SwitchGroup';
-export { SwitchGroup };
-//# sourceMappingURL=SwitchGroup.js.map

package/dist/SwitchGroup.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"SwitchGroup.js","sourceRoot":"","sources":["../src/SwitchGroup.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAE,MAAM,EAAE,MAAM,UAAU,CAAC;AAClC,OAAO,EAAqB,YAAY,EAAE,MAAM,gBAAgB,CAAC;AAmCjE;;;;GAIG;AACH,SAAS,WAAW,CAAC,EACjB,QAAQ,EACR,OAAO,GAAG,EAAE,EACZ,IAAI,EACJ,KAAK,EAAE,MAAM,GAAG,EAAE,EAClB,GAAG,KAAK,EAC4B;IACpC,OAAO,CACH,iBAAS,KAAK,eAAY,cAAc,EAAC,IAAI,EAAC,OAAO,YAChD,OAAO,CAAC,GAAG,CAAC,CAAC,EAAE,KAAK,EAAE,WAAW,EAAE,KAAK,EAAE,EAAE,EAAE,CAAC,CAC5C,KAAC,YAAY,IAAC,WAAW,EAAE,WAAW,EAAc,KAAK,EAAE,KAAK,YAC5D,KAAC,MAAM,kBACS,KAAK,EACjB,OAAO,EAAE,MAAM,CAAC,QAAQ,CAAC,KAAK,CAAC,EAC/B,IAAI,EAAE,IAAI,EACV,QAAQ,EAAE,CAAC,OAAO,EAAE,EAAE;oBAClB,QAAQ,CAAC,OAAO,CAAC,CAAC,CAAC,CAAC,GAAG,MAAM,EAAE,KAAK,CAAC,CAAC,CAAC,CAAC,MAAM,CAAC,MAAM,CAAC,CAAC,CAAC,EAAE,EAAE,CAAC,CAAC,KAAK,KAAK,CAAC,CAAC,CAAC;gBAC/E,CAAC,EACD,KAAK,EAAE,KAAK,GACd,IATuC,KAAK,CAUnC,CAClB,CAAC,GACA,CACT,CAAC;AACN,CAAC;AAED,WAAW,CAAC,QAAQ,GAAG,aAAa,CAAC;AAErC,OAAO,EAAE,WAAW,EAAE,CAAC"}

package/dist/hooks/useSwitchGroupState.d.ts

@@ -1,37 +0,0 @@
-import { SwitchProps } from '../Switch';
-/**
- * A hook to manage the state of a group of switches. Used alongside the SwitchGroup component.
- *
- * @example
- *     import { Switch } from '@bspk/ui/Switch';
- *     import { useSwitchGroupState } from '@bspk/ui/hooks/useSwitchGroupState';
- *
- *     export function Example() {
- *     const allValues = ['Red', 'Orange', 'Yellow', 'Green'];
- *
- *     const { allSwitchProps, switchProps, values } = useSwitchGroupState(allValues, 'fruits');
- *
- *     return (
- *     <>
- *     <pre>Selected Values: {values.join(', ')}</pre>
- *     <Switch aria-label="All" {...allSwitchProps} />
- *     {allValues.map((value) => (
- *     <Switch key={value} aria-label={value} {...switchProps(value)} />
- *     ))}
- *     </>
- *     );
- *     }
- *
- * @param allValues - The values of the switches.
- * @param name - The name of the switches.
- * @param externalState - The externally managed state of the switches.
- * @returns Properties to pass to the switch, other helper functions, and the state of the switch.
- */
-export declare function useSwitchGroupState(allValues: string[], name: string, externalState?: [values: string[], setValues: (next: string[]) => void]): {
-    toggleValue: (itemValue: string, checked: boolean) => void;
-    allSwitchProps: Pick<SwitchProps, "name" | "value" | "onChange" | "checked">;
-    switchProps: (value: string) => Pick<SwitchProps, "checked" | "name" | "onChange" | "value">;
-    values: string[];
-    setValues: import("react").Dispatch<import("react").SetStateAction<string[]>>;
-};
-/** Copyright 2025 Anywhere Real Estate - CC BY 4.0 */

package/dist/hooks/useSwitchGroupState.js

@@ -1,57 +0,0 @@
-import { useCallback, useMemo, useState } from 'react';
-/**
- * A hook to manage the state of a group of switches. Used alongside the SwitchGroup component.
- *
- * @example
- *     import { Switch } from '@bspk/ui/Switch';
- *     import { useSwitchGroupState } from '@bspk/ui/hooks/useSwitchGroupState';
- *
- *     export function Example() {
- *     const allValues = ['Red', 'Orange', 'Yellow', 'Green'];
- *
- *     const { allSwitchProps, switchProps, values } = useSwitchGroupState(allValues, 'fruits');
- *
- *     return (
- *     <>
- *     <pre>Selected Values: {values.join(', ')}</pre>
- *     <Switch aria-label="All" {...allSwitchProps} />
- *     {allValues.map((value) => (
- *     <Switch key={value} aria-label={value} {...switchProps(value)} />
- *     ))}
- *     </>
- *     );
- *     }
- *
- * @param allValues - The values of the switches.
- * @param name - The name of the switches.
- * @param externalState - The externally managed state of the switches.
- * @returns Properties to pass to the switch, other helper functions, and the state of the switch.
- */
-export function useSwitchGroupState(allValues, name, externalState) {
-    const localState = useState([]);
-    const [values, setValues] = externalState || localState;
-    const toggleValue = useCallback((itemValue, checked) => {
-        setValues(allValues.flatMap((value) => {
-            if (value === itemValue)
-                return checked ? value : [];
-            return values.includes(value) ? value : [];
-        }));
-    }, [allValues, setValues, values]);
-    const switchProps = useCallback((value) => ({
-        checked: values.includes(value),
-        name,
-        onChange: (checked) => toggleValue(value, checked),
-        value,
-    }), [values, name, toggleValue]);
-    const allSwitchProps = useMemo(() => {
-        return {
-            checked: allValues.length === values.length,
-            name,
-            onChange: () => setValues(allValues.length === values.length ? [] : allValues),
-            value: 'all',
-        };
-    }, [allValues, values.length, name, setValues]);
-    return { toggleValue, allSwitchProps, switchProps, values, setValues };
-}
-/** Copyright 2025 Anywhere Real Estate - CC BY 4.0 */
-//# sourceMappingURL=useSwitchGroupState.js.map

package/dist/hooks/useSwitchGroupState.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"useSwitchGroupState.js","sourceRoot":"","sources":["../../src/hooks/useSwitchGroupState.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,WAAW,EAAE,OAAO,EAAE,QAAQ,EAAE,MAAM,OAAO,CAAC;AAIvD;;;;;;;;;;;;;;;;;;;;;;;;;;;GA2BG;AACH,MAAM,UAAU,mBAAmB,CAC/B,SAAmB,EACnB,IAAY,EACZ,aAAuE;IAEvE,MAAM,UAAU,GAAG,QAAQ,CAAW,EAAE,CAAC,CAAC;IAC1C,MAAM,CAAC,MAAM,EAAE,SAAS,CAAC,GAAG,aAAa,IAAI,UAAU,CAAC;IAExD,MAAM,WAAW,GAAG,WAAW,CAC3B,CAAC,SAAiB,EAAE,OAAgB,EAAE,EAAE;QACpC,SAAS,CACL,SAAS,CAAC,OAAO,CAAC,CAAC,KAAK,EAAE,EAAE;YACxB,IAAI,KAAK,KAAK,SAAS;gBAAE,OAAO,OAAO,CAAC,CAAC,CAAC,KAAK,CAAC,CAAC,CAAC,EAAE,CAAC;YACrD,OAAO,MAAM,CAAC,QAAQ,CAAC,KAAK,CAAC,CAAC,CAAC,CAAC,KAAK,CAAC,CAAC,CAAC,EAAE,CAAC;QAC/C,CAAC,CAAC,CACL,CAAC;IACN,CAAC,EACD,CAAC,SAAS,EAAE,SAAS,EAAE,MAAM,CAAC,CACjC,CAAC;IAEF,MAAM,WAAW,GAAG,WAAW,CAC3B,CAAC,KAAa,EAAgE,EAAE,CAAC,CAAC;QAC9E,OAAO,EAAE,MAAM,CAAC,QAAQ,CAAC,KAAK,CAAC;QAC/B,IAAI;QACJ,QAAQ,EAAE,CAAC,OAAO,EAAE,EAAE,CAAC,WAAW,CAAC,KAAK,EAAE,OAAO,CAAC;QAClD,KAAK;KACR,CAAC,EACF,CAAC,MAAM,EAAE,IAAI,EAAE,WAAW,CAAC,CAC9B,CAAC;IAEF,MAAM,cAAc,GAAG,OAAO,CAAC,GAAiE,EAAE;QAC9F,OAAO;YACH,OAAO,EAAE,SAAS,CAAC,MAAM,KAAK,MAAM,CAAC,MAAM;YAC3C,IAAI;YACJ,QAAQ,EAAE,GAAG,EAAE,CAAC,SAAS,CAAC,SAAS,CAAC,MAAM,KAAK,MAAM,CAAC,MAAM,CAAC,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC,SAAS,CAAC;YAC9E,KAAK,EAAE,KAAK;SACf,CAAC;IACN,CAAC,EAAE,CAAC,SAAS,EAAE,MAAM,CAAC,MAAM,EAAE,IAAI,EAAE,SAAS,CAAC,CAAC,CAAC;IAEhD,OAAO,EAAE,WAAW,EAAE,cAAc,EAAE,WAAW,EAAE,MAAM,EAAE,SAAS,EAAE,CAAC;AAC3E,CAAC;AAED,sDAAsD"}

package/src/SwitchGroup.tsx

@@ -1,72 +0,0 @@
-import { Switch } from './Switch';
-import { ToggleOptionProps, ToggleOption } from './ToggleOption';
-
-import { ElementProps, CommonProps } from './';
-
-export type SwitchGroupOption = Pick<ToggleOptionProps, 'description' | 'label'> & Required<CommonProps<'value'>>;
-
-export type SwitchGroupProps = CommonProps<'aria-label' | 'name'> & {
-    /**
-     * The function to call when the switches are changed.
-     *
-     * @required
-     */
-    onChange: (value: string[]) => void;
-    /**
-     * The options for the switches.
-     *
-     * @example
-     *     [
-     *         { value: '1', label: 'Option 1' },
-     *         { value: '2', label: 'Option 2' },
-     *         { value: '3', label: 'Option 3' },
-     *     ];
-     *
-     * @type Array<SwitchGroupOption>
-     * @required
-     */
-    options: SwitchGroupOption[];
-    /**
-     * The values of the switches in the on state.
-     *
-     * @type Array<string>
-     */
-    value?: SwitchGroupProps['options'][number]['value'][];
-};
-
-/**
- * A group of switches that allows users to choose one or more items from a list or turn an feature on or off.
- *
- * @name SwitchGroup
- */
-function SwitchGroup({
-    onChange,
-    options = [],
-    name,
-    value: values = [],
-    ...props
-}: ElementProps<SwitchGroupProps, 'div'>) {
-    return (
-        <div {...props} data-bspk="switch-group" role="group">
-            {options.map(({ label, description, value }) => (
-                <ToggleOption description={description} key={value} label={label}>
-                    <Switch
-                        aria-label={label}
-                        checked={values.includes(value)}
-                        name={name}
-                        onChange={(checked) => {
-                            onChange(checked ? [...values, value] : values.filter((v) => v !== value));
-                        }}
-                        value={value}
-                    />
-                </ToggleOption>
-            ))}
-        </div>
-    );
-}
-
-SwitchGroup.bspkName = 'SwitchGroup';
-
-export { SwitchGroup };
-
-/** Copyright 2025 Anywhere Real Estate - CC BY 4.0 */

package/src/hooks/useSwitchGroupState.ts

@@ -1,75 +0,0 @@
-import { useCallback, useMemo, useState } from 'react';
-
-import { SwitchProps } from '../Switch';
-
-/**
- * A hook to manage the state of a group of switches. Used alongside the SwitchGroup component.
- *
- * @example
- *     import { Switch } from '@bspk/ui/Switch';
- *     import { useSwitchGroupState } from '@bspk/ui/hooks/useSwitchGroupState';
- *
- *     export function Example() {
- *     const allValues = ['Red', 'Orange', 'Yellow', 'Green'];
- *
- *     const { allSwitchProps, switchProps, values } = useSwitchGroupState(allValues, 'fruits');
- *
- *     return (
- *     <>
- *     <pre>Selected Values: {values.join(', ')}</pre>
- *     <Switch aria-label="All" {...allSwitchProps} />
- *     {allValues.map((value) => (
- *     <Switch key={value} aria-label={value} {...switchProps(value)} />
- *     ))}
- *     </>
- *     );
- *     }
- *
- * @param allValues - The values of the switches.
- * @param name - The name of the switches.
- * @param externalState - The externally managed state of the switches.
- * @returns Properties to pass to the switch, other helper functions, and the state of the switch.
- */
-export function useSwitchGroupState(
-    allValues: string[],
-    name: string,
-    externalState?: [values: string[], setValues: (next: string[]) => void],
-) {
-    const localState = useState<string[]>([]);
-    const [values, setValues] = externalState || localState;
-
-    const toggleValue = useCallback(
-        (itemValue: string, checked: boolean) => {
-            setValues(
-                allValues.flatMap((value) => {
-                    if (value === itemValue) return checked ? value : [];
-                    return values.includes(value) ? value : [];
-                }),
-            );
-        },
-        [allValues, setValues, values],
-    );
-
-    const switchProps = useCallback(
-        (value: string): Pick<SwitchProps, 'checked' | 'name' | 'onChange' | 'value'> => ({
-            checked: values.includes(value),
-            name,
-            onChange: (checked) => toggleValue(value, checked),
-            value,
-        }),
-        [values, name, toggleValue],
-    );
-
-    const allSwitchProps = useMemo((): Pick<SwitchProps, 'checked' | 'name' | 'onChange' | 'value'> => {
-        return {
-            checked: allValues.length === values.length,
-            name,
-            onChange: () => setValues(allValues.length === values.length ? [] : allValues),
-            value: 'all',
-        };
-    }, [allValues, values.length, name, setValues]);
-
-    return { toggleValue, allSwitchProps, switchProps, values, setValues };
-}
-
-/** Copyright 2025 Anywhere Real Estate - CC BY 4.0 */