@bspk/ui 1.1.26 → 1.1.28
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/dist/Avatar.d.ts +2 -1
- package/dist/Avatar.js.map +1 -1
- package/dist/Button.js +1 -1
- package/dist/Button.js.map +1 -1
- package/dist/FormField.d.ts +2 -2
- package/dist/FormField.js +1 -1
- package/dist/Popover.d.ts +2 -3
- package/dist/Popover.js +3 -4
- package/dist/Popover.js.map +1 -1
- package/dist/ProgressBar.d.ts +6 -7
- package/dist/ProgressBar.js +6 -7
- package/dist/ProgressBar.js.map +1 -1
- package/dist/ProgressCircle.d.ts +6 -7
- package/dist/ProgressCircle.js +6 -7
- package/dist/ProgressCircle.js.map +1 -1
- package/dist/ProgressionStepper.d.ts +3 -8
- package/dist/ProgressionStepper.js +3 -8
- package/dist/ProgressionStepper.js.map +1 -1
- package/dist/RadioGroup.d.ts +9 -2
- package/dist/RadioGroup.js.map +1 -1
- package/dist/SearchBar.d.ts +1 -2
- package/dist/SearchBar.js +5 -6
- package/dist/SearchBar.js.map +1 -1
- package/dist/SegmentedControl.d.ts +8 -15
- package/dist/SegmentedControl.js +2 -4
- package/dist/SegmentedControl.js.map +1 -1
- package/dist/{Dropdown.d.ts → Select.d.ts} +15 -15
- package/dist/Select.js +67 -0
- package/dist/Select.js.map +1 -0
- package/dist/{DropdownField.d.ts → SelectField.d.ts} +9 -9
- package/dist/SelectField.js +39 -0
- package/dist/SelectField.js.map +1 -0
- package/dist/StylesProviderAnywhere.js +1 -1
- package/dist/StylesProviderBetterHomesGardens.js +1 -1
- package/dist/StylesProviderCartus.js +1 -1
- package/dist/StylesProviderCentury21.js +1 -1
- package/dist/StylesProviderColdwellBanker.js +1 -1
- package/dist/StylesProviderCorcoran.js +1 -1
- package/dist/StylesProviderDenaliBoss.js +1 -1
- package/dist/StylesProviderEra.js +1 -1
- package/dist/StylesProviderSothebys.js +1 -1
- package/dist/TabGroup.d.ts +5 -6
- package/dist/TabGroup.js.map +1 -1
- package/dist/Tag.d.ts +1 -2
- package/dist/Tag.js +1 -2
- package/dist/Tag.js.map +1 -1
- package/dist/TextField.d.ts +2 -3
- package/dist/TextField.js +2 -4
- package/dist/TextField.js.map +1 -1
- package/dist/TextInput.d.ts +4 -13
- package/dist/TextInput.js +3 -11
- package/dist/TextInput.js.map +1 -1
- package/dist/Textarea.d.ts +5 -14
- package/dist/Textarea.js +6 -16
- package/dist/Textarea.js.map +1 -1
- package/dist/TextareaField.d.ts +1 -2
- package/dist/TextareaField.js +1 -2
- package/dist/TextareaField.js.map +1 -1
- package/dist/Txt.d.ts +1 -2
- package/dist/Txt.js +1 -2
- package/dist/Txt.js.map +1 -1
- package/dist/base.css +1 -1
- package/dist/demo/ExamplePlaceholder.js.map +1 -1
- package/dist/demo/examples.js +84 -15
- package/dist/demo/examples.js.map +1 -1
- package/dist/hooks/useCombobox.d.ts +45 -0
- package/dist/hooks/{useFloatingMenu.js → useCombobox.js} +17 -8
- package/dist/hooks/useCombobox.js.map +1 -0
- package/dist/hooks/useFloating.d.ts +39 -8
- package/dist/hooks/useFloating.js +2 -13
- package/dist/hooks/useFloating.js.map +1 -1
- package/dist/hooks/useKeyboardNavigation.d.ts +1 -1
- package/dist/hooks/useKeyboardNavigation.js +1 -1
- package/dist/hooks/useOutsideClick.d.ts +2 -2
- package/dist/hooks/useOutsideClick.js +2 -2
- package/dist/index.d.ts +3 -1
- package/dist/index.js +3 -1
- package/dist/index.js.map +1 -1
- package/dist/select.css +1 -0
- package/package.json +3 -2
- package/src/Avatar.tsx +2 -1
- package/src/Button.tsx +2 -2
- package/src/FormField.tsx +2 -2
- package/src/Popover.tsx +5 -27
- package/src/ProgressBar.tsx +6 -7
- package/src/ProgressCircle.tsx +6 -7
- package/src/ProgressionStepper.tsx +3 -8
- package/src/RadioGroup.tsx +9 -2
- package/src/SearchBar.tsx +8 -20
- package/src/SegmentedControl.tsx +14 -37
- package/src/{Dropdown.tsx → Select.tsx} +30 -32
- package/src/{DropdownField.tsx → SelectField.tsx} +15 -15
- package/src/TabGroup.tsx +6 -10
- package/src/Tag.tsx +1 -2
- package/src/TextField.tsx +6 -19
- package/src/TextInput.tsx +6 -27
- package/src/Textarea.tsx +10 -31
- package/src/TextareaField.tsx +3 -8
- package/src/Txt.tsx +2 -7
- package/src/base.scss +53 -70
- package/src/demo/ExamplePlaceholder.tsx +6 -1
- package/src/demo/examples.tsx +99 -21
- package/src/hooks/{useFloatingMenu.ts → useCombobox.ts} +28 -40
- package/src/hooks/useFloating.ts +45 -24
- package/src/hooks/useKeyboardNavigation.ts +1 -1
- package/src/hooks/useOutsideClick.ts +2 -2
- package/src/index.ts +3 -1
- package/src/{dropdown.scss → select.scss} +36 -36
- package/dist/Dropdown.js +0 -68
- package/dist/Dropdown.js.map +0 -1
- package/dist/DropdownField.js +0 -39
- package/dist/DropdownField.js.map +0 -1
- package/dist/dropdown.css +0 -1
- package/dist/hooks/useFloatingMenu.d.ts +0 -36
- package/dist/hooks/useFloatingMenu.js.map +0 -1
package/dist/Avatar.d.ts
CHANGED
|
@@ -34,12 +34,13 @@ export type AvatarProps = {
|
|
|
34
34
|
*/
|
|
35
35
|
initials?: string;
|
|
36
36
|
/**
|
|
37
|
-
* The icon to display in the avatar. This needs to be an icon from the
|
|
37
|
+
* The icon to display in the avatar. This needs to be an icon from the
|
|
38
38
|
*
|
|
39
39
|
* @example
|
|
40
40
|
* <SvgPerson />;
|
|
41
41
|
*
|
|
42
42
|
* @type BspkIcon
|
|
43
|
+
* @bspk/icons library.
|
|
43
44
|
*/
|
|
44
45
|
icon?: ReactNode;
|
|
45
46
|
/**
|
package/dist/Avatar.js.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Avatar.js","sourceRoot":"","sources":["../src/Avatar.tsx"],"names":[],"mappings":";AAAA,OAAO,eAAe,CAAC;AACvB,OAAO,EAAa,OAAO,EAAE,MAAM,OAAO,CAAC;AAE3C,OAAO,EAAE,OAAO,EAAE,MAAM,WAAW,CAAC;AACpC,OAAO,EAAE,WAAW,EAAE,MAAM,kBAAkB,CAAC;AAG/C,MAAM,OAAO,GAAG;IACZ,IAAI,EAAE,OAAO;IACb,KAAK,EAAE,MAAM;IACb,WAAW,EAAE,IAAI;CACX,CAAC;
|
|
1
|
+
{"version":3,"file":"Avatar.js","sourceRoot":"","sources":["../src/Avatar.tsx"],"names":[],"mappings":";AAAA,OAAO,eAAe,CAAC;AACvB,OAAO,EAAa,OAAO,EAAE,MAAM,OAAO,CAAC;AAE3C,OAAO,EAAE,OAAO,EAAE,MAAM,WAAW,CAAC;AACpC,OAAO,EAAE,WAAW,EAAE,MAAM,kBAAkB,CAAC;AAG/C,MAAM,OAAO,GAAG;IACZ,IAAI,EAAE,OAAO;IACb,KAAK,EAAE,MAAM;IACb,WAAW,EAAE,IAAI;CACX,CAAC;AAqEX;;;;;;;;;;;;;;;;;;;;;;;;GAwBG;AACH,SAAS,MAAM,CAAC,EACZ,QAAQ,EAAE,YAAY,EACtB,KAAK,GAAG,OAAO,CAAC,KAAK,EACrB,IAAI,GAAG,OAAO,CAAC,IAAI,EACnB,IAAI,EACJ,KAAK,EACL,IAAI,EAAE,SAAS,EACf,WAAW,GAAG,OAAO,CAAC,WAAW,GACvB;IACV,MAAM,QAAQ,GAAG,OAAO,CAAC,GAAG,EAAE;QAC1B,IAAI,KAAK;YAAE,OAAO,cAAK,GAAG,EAAE,SAAS,EAAE,GAAG,EAAE,KAAK,GAAI,CAAC;QAEtD,IAAI,WAAW,CAAC,IAAI,CAAC;YAAE,OAAO,4CAAiB,IAAI,GAAQ,CAAC;QAE5D,IAAI,QAAQ,GAAG,YAAY,CAAC;QAE5B,IAAI,SAAS,IAAI,CAAC,QAAQ;YACtB,QAAQ,GAAG,SAAS;iBACf,KAAK,CAAC,GAAG,CAAC;iBACV,GAAG,CAAC,CAAC,IAAI,EAAE,EAAE,CAAC,IAAI,CAAC,MAAM,CAAC,CAAC,CAAC,CAAC;iBAC7B,KAAK,CAAC,CAAC,EAAE,CAAC,CAAC;iBACX,IAAI,CAAC,EAAE,CAAC;iBACR,WAAW,EAAE,CAAC;QAEvB,IAAI,QAAQ;YAAE,OAAO,gDAAqB,QAAQ,CAAC,KAAK,CAAC,CAAC,EAAE,CAAC,CAAC,GAAQ,CAAC;QAEvE,OAAO,IAAI,CAAC;IAChB,CAAC,EAAE,CAAC,SAAS,EAAE,IAAI,EAAE,KAAK,EAAE,YAAY,CAAC,CAAC,CAAC;IAE3C,IAAI,CAAC,QAAQ;QAAE,OAAO,IAAI,CAAC;IAE3B,MAAM,MAAM,GAAG,CACX,4BAAiB,SAAS,eAAY,QAAQ,gBAAa,KAAK,eAAa,IAAI,YAC5E,QAAQ,GACP,CACT,CAAC;IAEF,OAAO,WAAW,CAAC,CAAC,CAAC,KAAC,OAAO,IAAC,KAAK,EAAE,SAAS,YAAG,MAAM,GAAW,CAAC,CAAC,CAAC,MAAM,CAAC;AAChF,CAAC;AAED,MAAM,CAAC,QAAQ,GAAG,QAAQ,CAAC;AAE3B,OAAO,EAAE,MAAM,EAAE,CAAC"}
|
package/dist/Button.js
CHANGED
|
@@ -32,7 +32,7 @@ function Button(props) {
|
|
|
32
32
|
showLabel = true, toolTip: toolTipProp, children, ...containerProps } = props;
|
|
33
33
|
const label = typeof children === 'string' ? children : labelProp || '';
|
|
34
34
|
// ignore showLabel=false if there is no icon
|
|
35
|
-
const hideLabel =
|
|
35
|
+
const hideLabel = showLabel === false && icon;
|
|
36
36
|
const toolTip = toolTipProp || (hideLabel ? label : undefined);
|
|
37
37
|
const { logError } = useErrorLogger();
|
|
38
38
|
logError(!!icon && !isValidIcon(icon), 'Button - The icon prop must be a valid icon element.');
|
package/dist/Button.js.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Button.js","sourceRoot":"","sources":["../src/Button.tsx"],"names":[],"mappings":";AAAA,OAAO,eAAe,CAAC;AACvB,OAAO,EAA0B,cAAc,EAAE,MAAM,OAAO,CAAC;AAE/D,OAAO,EAAE,OAAO,EAAE,MAAM,WAAW,CAAC;AACpC,OAAO,EAAE,WAAW,EAAE,MAAM,kBAAkB,CAAC;AAC/C,OAAO,EAAE,cAAc,EAAE,MAAM,gBAAgB,CAAC;AAoEhD;;;;;;;;;;;;;;;;;;;;GAoBG;AACH,SAAS,MAAM,CAAoC,KAAwC;IACvF,MAAM,EACF,IAAI,GAAG,QAAQ,EACf,OAAO,GAAG,SAAS,EACnB,WAAW,GAAG,KAAK,EACnB,KAAK,GAAG,KAAK,EACb,EAAE,EAAE,EAAE,GAAG,QAAQ,EACjB,QAAQ,GAAG,KAAK,EAChB,KAAK,EAAE,SAAS,EAChB,IAAI;IACJ,mCAAmC;IACnC,SAAS,
|
|
1
|
+
{"version":3,"file":"Button.js","sourceRoot":"","sources":["../src/Button.tsx"],"names":[],"mappings":";AAAA,OAAO,eAAe,CAAC;AACvB,OAAO,EAA0B,cAAc,EAAE,MAAM,OAAO,CAAC;AAE/D,OAAO,EAAE,OAAO,EAAE,MAAM,WAAW,CAAC;AACpC,OAAO,EAAE,WAAW,EAAE,MAAM,kBAAkB,CAAC;AAC/C,OAAO,EAAE,cAAc,EAAE,MAAM,gBAAgB,CAAC;AAoEhD;;;;;;;;;;;;;;;;;;;;GAoBG;AACH,SAAS,MAAM,CAAoC,KAAwC;IACvF,MAAM,EACF,IAAI,GAAG,QAAQ,EACf,OAAO,GAAG,SAAS,EACnB,WAAW,GAAG,KAAK,EACnB,KAAK,GAAG,KAAK,EACb,EAAE,EAAE,EAAE,GAAG,QAAQ,EACjB,QAAQ,GAAG,KAAK,EAChB,KAAK,EAAE,SAAS,EAChB,IAAI;IACJ,mCAAmC;IACnC,SAAS,GAAG,IAAI,EAChB,OAAO,EAAE,WAAW,EACpB,QAAQ,EACR,GAAG,cAAc,EACpB,GAAG,KAAK,CAAC;IACV,MAAM,KAAK,GAAG,OAAO,QAAQ,KAAK,QAAQ,CAAC,CAAC,CAAC,QAAQ,CAAC,CAAC,CAAC,SAAS,IAAI,EAAE,CAAC;IAExE,6CAA6C;IAC7C,MAAM,SAAS,GAAG,SAAS,KAAK,KAAK,IAAI,IAAI,CAAC;IAC9C,MAAM,OAAO,GAAG,WAAW,IAAI,CAAC,SAAS,CAAC,CAAC,CAAC,KAAK,CAAC,CAAC,CAAC,SAAS,CAAC,CAAC;IAC/D,MAAM,EAAE,QAAQ,EAAE,GAAG,cAAc,EAAE,CAAC;IACtC,QAAQ,CAAC,CAAC,CAAC,IAAI,IAAI,CAAC,WAAW,CAAC,IAAI,CAAC,EAAE,sDAAsD,CAAC,CAAC;IAC/F,QAAQ,CAAC,CAAC,KAAK,EAAE,wCAAwC,CAAC,CAAC;IAE3D,MAAM,MAAM,GAAG,CACX,KAAC,EAAE,OACK,cAAc,gBACN,KAAK,eACP,QAAQ,sBACA,WAAW,IAAI,SAAS,eAC/B,IAAI,kBACD,OAAO,gBACT,KAAK,EACjB,QAAQ,EAAE,QAAQ,IAAI,SAAS,YAE9B,QAAQ,IAAI,OAAO,QAAQ,KAAK,QAAQ,CAAC,CAAC,CAAC,CACxC,QAAQ,CACX,CAAC,CAAC,CAAC,CACA,8BACI,2CAA0B,EACzB,CAAC,CAAC,IAAI,IAAI,cAAc,CAAC,IAAI,CAAC,IAAI,mDAAwB,IAAI,GAAQ,EACtE,CAAC,SAAS,IAAI,oDAAyB,KAAK,GAAQ,IACtD,CACN,GACA,CACR,CAAC;IAEF,IAAI,OAAO,EAAE,CAAC;QACV,OAAO,CACH,KAAC,OAAO,IAAC,KAAK,EAAE,OAAO,EAAE,SAAS,EAAC,KAAK,YACnC,MAAM,GACD,CACb,CAAC;IACN,CAAC;IAED,OAAO,MAAM,CAAC;AAClB,CAAC;AAED,MAAM,CAAC,QAAQ,GAAG,QAAQ,CAAC;AAE3B,OAAO,EAAE,MAAM,EAAE,CAAC"}
|
package/dist/FormField.d.ts
CHANGED
|
@@ -22,7 +22,7 @@ export type FormFieldProps = CommonProps<'required'> & InvalidPropsLibrary & {
|
|
|
22
22
|
/** The id of the control. */
|
|
23
23
|
controlId: string;
|
|
24
24
|
/**
|
|
25
|
-
* The children of the form field. This should be a control such as TextInput,
|
|
25
|
+
* The children of the form field. This should be a control such as TextInput, Select, DatePicker, or
|
|
26
26
|
* TimePicker.
|
|
27
27
|
*
|
|
28
28
|
* @type (childProps: FieldControlProps) => JSX.Element
|
|
@@ -37,7 +37,7 @@ export type FormFieldProps = CommonProps<'required'> & InvalidPropsLibrary & {
|
|
|
37
37
|
/**
|
|
38
38
|
* Wrapper component for form controls.
|
|
39
39
|
*
|
|
40
|
-
* Children may be one of the following: TextInput,
|
|
40
|
+
* Children may be one of the following: TextInput, Select, DatePicker, or TimePicker.
|
|
41
41
|
*
|
|
42
42
|
* @example
|
|
43
43
|
* import { TextInput } from '@bspk/ui/TextInput';
|
package/dist/FormField.js
CHANGED
|
@@ -7,7 +7,7 @@ import { Txt } from './Txt';
|
|
|
7
7
|
/**
|
|
8
8
|
* Wrapper component for form controls.
|
|
9
9
|
*
|
|
10
|
-
* Children may be one of the following: TextInput,
|
|
10
|
+
* Children may be one of the following: TextInput, Select, DatePicker, or TimePicker.
|
|
11
11
|
*
|
|
12
12
|
* @example
|
|
13
13
|
* import { TextInput } from '@bspk/ui/TextInput';
|
package/dist/Popover.d.ts
CHANGED
|
@@ -32,8 +32,7 @@ export type PopoverProps = CommonProps<'disabled'> & {
|
|
|
32
32
|
children: ReactElement;
|
|
33
33
|
};
|
|
34
34
|
/**
|
|
35
|
-
* Brief message that provide additional guidance and helps users perform an
|
|
36
|
-
* action if needed.
|
|
35
|
+
* Brief message that provide additional guidance and helps users perform an action if needed.
|
|
37
36
|
*
|
|
38
37
|
* @example
|
|
39
38
|
* import { useState } from 'react';
|
|
@@ -63,7 +62,7 @@ export type PopoverProps = CommonProps<'disabled'> & {
|
|
|
63
62
|
*
|
|
64
63
|
* @name Popover
|
|
65
64
|
*/
|
|
66
|
-
declare function Popover({ placement, header, content, callToAction, children, disabled
|
|
65
|
+
declare function Popover({ placement, header, content, callToAction, children, disabled }: PopoverProps): import("react/jsx-runtime").JSX.Element;
|
|
67
66
|
declare namespace Popover {
|
|
68
67
|
var bspkName: string;
|
|
69
68
|
}
|
package/dist/Popover.js
CHANGED
|
@@ -2,15 +2,14 @@ import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-run
|
|
|
2
2
|
import { SvgClose } from '@bspk/icons/Close';
|
|
3
3
|
import { styleAdd } from './utils/styleAdd';
|
|
4
4
|
styleAdd(`[data-bspk=popover]{position:absolute;z-index:var(--z-index-tooltip-popover);background:var(--surface-neutral-t1-base);box-shadow:var(--drop-shadow-float);padding:var(--spacing-sizing-04);width:300px;border-radius:var(--radius-large);display:flex;flex-direction:column;--arrow-size: var(--spacing-sizing-02);--arrow-offset: calc(var(--arrow-size) * -2);--arrow-background-color: var(--surface-neutral-t1-base)}[data-bspk=popover] header{display:flex;justify-content:space-between;align-items:center;margin-bottom:var(--spacing-sizing-02);gap:var(--spacing-sizing-04)}[data-bspk=popover] header button{background:none;border:none;cursor:pointer;padding:0;margin:0 0 0 auto;color:var(--foreground-neutral-on-surface-variant-01);height:var(--spacing-sizing-06);width:var(--spacing-sizing-06)}[data-bspk=popover] header button svg{width:var(--spacing-sizing-06);height:var(--spacing-sizing-06)}[data-bspk=popover] [data-arrow]{z-index:1;position:absolute;width:0;height:0;border-style:solid;border-width:var(--arrow-size) var(--arrow-size) var(--arrow-size) var(--arrow-size);border-color:rgba(0,0,0,0)}[data-bspk=popover][data-placement^=top] [data-arrow]{bottom:var(--arrow-offset);border-top-color:var(--arrow-background-color);filter:drop-shadow(0 2px 1px var(--shadow-10))}[data-bspk=popover][data-placement^=right] [data-arrow]{margin-left:calc(var(--arrow-offset)*2);border-right-color:var(--arrow-background-color);filter:drop-shadow(-2px 0 1px var(--shadow-10))}[data-bspk=popover][data-placement^=bottom] [data-arrow]{top:var(--arrow-offset);border-bottom-color:var(--arrow-background-color);filter:drop-shadow(0 -2px 1px var(--shadow-10))}[data-bspk=popover][data-placement=bottom-start] [data-arrow]{margin-left:var(--arrow-offset)}[data-bspk=popover][data-placement=bottom-end] [data-arrow]{margin-left:calc(var(--arrow-offset)*-1)}[data-bspk=popover][data-placement^=left] [data-arrow]{right:var(--arrow-offset);border-left-color:var(--arrow-background-color);filter:drop-shadow(2px 0 1px var(--shadow-10))}[data-bspk=popover] [data-content]{gap:var(--spacing-sizing-04);display:flex;flex-direction:column}[data-bspk=popover] [data-call-to-action]{margin:0 0 0 auto}`);;
|
|
5
|
-
import { cloneElement, useId, useMemo, useRef, useState
|
|
5
|
+
import { cloneElement, useId, useMemo, useRef, useState } from 'react';
|
|
6
6
|
import { Button } from './Button';
|
|
7
7
|
import { Portal } from './Portal';
|
|
8
8
|
import { Txt } from './Txt';
|
|
9
9
|
import { useFloating } from './hooks/useFloating';
|
|
10
10
|
import { useOutsideClick } from './hooks/useOutsideClick';
|
|
11
11
|
/**
|
|
12
|
-
* Brief message that provide additional guidance and helps users perform an
|
|
13
|
-
* action if needed.
|
|
12
|
+
* Brief message that provide additional guidance and helps users perform an action if needed.
|
|
14
13
|
*
|
|
15
14
|
* @example
|
|
16
15
|
* import { useState } from 'react';
|
|
@@ -40,7 +39,7 @@ import { useOutsideClick } from './hooks/useOutsideClick';
|
|
|
40
39
|
*
|
|
41
40
|
* @name Popover
|
|
42
41
|
*/
|
|
43
|
-
function Popover({ placement = 'top', header, content, callToAction, children, disabled = false
|
|
42
|
+
function Popover({ placement = 'top', header, content, callToAction, children, disabled = false }) {
|
|
44
43
|
const id = useId();
|
|
45
44
|
const [show, setShow] = useState(false);
|
|
46
45
|
const arrowRef = useRef(null);
|
package/dist/Popover.js.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Popover.js","sourceRoot":"","sources":["../src/Popover.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAE,QAAQ,EAAE,MAAM,mBAAmB,CAAC;AAC7C,OAAO,gBAAgB,CAAC;AACxB,OAAO,
|
|
1
|
+
{"version":3,"file":"Popover.js","sourceRoot":"","sources":["../src/Popover.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAE,QAAQ,EAAE,MAAM,mBAAmB,CAAC;AAC7C,OAAO,gBAAgB,CAAC;AACxB,OAAO,EAAgB,YAAY,EAAE,KAAK,EAAE,OAAO,EAAE,MAAM,EAAE,QAAQ,EAAE,MAAM,OAAO,CAAC;AAErF,OAAO,EAAE,MAAM,EAAE,MAAM,UAAU,CAAC;AAClC,OAAO,EAAE,MAAM,EAAE,MAAM,UAAU,CAAC;AAClC,OAAO,EAAE,GAAG,EAAE,MAAM,OAAO,CAAC;AAC5B,OAAO,EAAa,WAAW,EAAE,MAAM,qBAAqB,CAAC;AAC7D,OAAO,EAAE,eAAe,EAAE,MAAM,yBAAyB,CAAC;AAkC1D;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GA8BG;AACH,SAAS,OAAO,CAAC,EAAE,SAAS,GAAG,KAAK,EAAE,MAAM,EAAE,OAAO,EAAE,YAAY,EAAE,QAAQ,EAAE,QAAQ,GAAG,KAAK,EAAgB;IAC3G,MAAM,EAAE,GAAG,KAAK,EAAE,CAAC;IACnB,MAAM,CAAC,IAAI,EAAE,OAAO,CAAC,GAAG,QAAQ,CAAC,KAAK,CAAC,CAAC;IACxC,MAAM,QAAQ,GAAG,MAAM,CAAqB,IAAI,CAAC,CAAC;IAElD,MAAM,EAAE,QAAQ,EAAE,cAAc,EAAE,cAAc,EAAE,GAAG,WAAW,CAAC;QAC7D,SAAS,EAAE,SAAS;QACpB,QAAQ,EAAE,UAAU;QACpB,aAAa,EAAE,EAAE;QACjB,QAAQ;QACR,IAAI,EAAE,CAAC,IAAI;KACd,CAAC,CAAC;IAEH,eAAe,CAAC,CAAC,QAAQ,CAAC,QAAQ,CAAC,EAAE,GAAG,EAAE,CAAC,OAAO,CAAC,KAAK,CAAC,CAAC,CAAC;IAE3D,MAAM,KAAK,GAAG,OAAO,CACjB,GAAG,EAAE,CACD,CAAC,QAAQ;QACT,QAAQ;QACR,YAAY,CAAC,QAAQ,EAAE;YACnB,OAAO,EAAE,GAAG,EAAE,CAAC,OAAO,CAAC,CAAC,IAAI,EAAE,EAAE,CAAC,CAAC,IAAI,CAAC;YACvC,kBAAkB,EAAE,EAAE;SACzB,CAAC,EACN,CAAC,QAAQ,EAAE,QAAQ,EAAE,EAAE,CAAC,CAC3B,CAAC;IAEF,OAAO,QAAQ,CAAC,CAAC,CAAC,CACd,QAAQ,CACX,CAAC,CAAC,CAAC,CACA,8BACK,KAAK,EACN,KAAC,MAAM,cACH,4BACc,SAAS,oBACH,cAAc,EAAE,MAAM,EAAE,SAAS,EACjD,EAAE,EAAE,EAAE,EACN,GAAG,EAAE,CAAC,IAAI,EAAE,EAAE;wBACV,QAAQ,CAAC,WAAW,CAAC,IAAI,CAAC,CAAC;wBAC3B,QAAQ,CAAC,UAAU,CAAC,QAAQ,CAAC,aAAa,CAAc,sBAAsB,EAAE,IAAI,CAAC,CAAC,CAAC;oBAC3F,CAAC,EACD,KAAK,EAAE,cAAc,aAErB,6BACI,KAAC,GAAG,IAAC,OAAO,EAAC,YAAY,YAAE,MAAM,GAAO,EACxC,+BAAmB,OAAO,EAAC,OAAO,EAAE,GAAG,EAAE,CAAC,OAAO,CAAC,KAAK,CAAC,YACpD,KAAC,QAAQ,KAAG,GACP,IACJ,EACT,gDACI,KAAC,GAAG,IAAC,EAAE,EAAC,KAAK,EAAC,OAAO,EAAC,YAAY,YAC7B,OAAO,GACN,EACL,YAAY,EAAE,KAAK,IAAI,YAAY,EAAE,OAAO,IAAI,CAC7C,KAAC,MAAM,iCAEH,KAAK,EAAE,YAAY,CAAC,KAAK,EACzB,OAAO,EAAE,YAAY,CAAC,OAAO,EAC7B,IAAI,EAAC,OAAO,EACZ,OAAO,EAAC,WAAW,GACrB,CACL,IACC,EACN,kCAEI,GAAG,EAAE,CAAC,IAAI,EAAE,EAAE;gCACV,QAAQ,CAAC,OAAO,GAAG,IAAI,CAAC;4BAC5B,CAAC,EACD,KAAK,EAAE;gCACH,IAAI,EAAE,GAAG,cAAc,EAAE,KAAK,EAAE,CAAC,IAAI;gCACrC,GAAG,EAAE,GAAG,cAAc,EAAE,KAAK,EAAE,CAAC,IAAI;6BACvC,GACH,IACA,GACD,IACV,CACN,CAAC;AACN,CAAC;AAED,OAAO,CAAC,QAAQ,GAAG,SAAS,CAAC;AAE7B,OAAO,EAAE,OAAO,EAAE,CAAC"}
|
package/dist/ProgressBar.d.ts
CHANGED
|
@@ -32,15 +32,14 @@ export type ProgressBarProps = {
|
|
|
32
32
|
* A progress bar is a horizontal visual indicator that let’s the user know the progression of a task or operation
|
|
33
33
|
* occurring in the background.
|
|
34
34
|
*
|
|
35
|
-
* @name ProgressBar
|
|
36
35
|
* @example
|
|
37
|
-
*
|
|
36
|
+
* import { ProgressBar } from '@bspk/ui/ProgressBar';
|
|
37
|
+
*
|
|
38
|
+
* export function Example() {
|
|
39
|
+
* return <ProgressBar label="Example label" completion={50} />;
|
|
40
|
+
* }
|
|
38
41
|
*
|
|
39
|
-
*
|
|
40
|
-
* return (
|
|
41
|
-
* <ProgressBar label="Example label" completion={50} />
|
|
42
|
-
* );
|
|
43
|
-
* }
|
|
42
|
+
* @name ProgressBar
|
|
44
43
|
*/
|
|
45
44
|
declare function ProgressBar({ size, completion, align, label }: ProgressBarProps): import("react/jsx-runtime").JSX.Element;
|
|
46
45
|
declare namespace ProgressBar {
|
package/dist/ProgressBar.js
CHANGED
|
@@ -6,15 +6,14 @@ import { useId } from 'react';
|
|
|
6
6
|
* A progress bar is a horizontal visual indicator that let’s the user know the progression of a task or operation
|
|
7
7
|
* occurring in the background.
|
|
8
8
|
*
|
|
9
|
-
* @name ProgressBar
|
|
10
9
|
* @example
|
|
11
|
-
*
|
|
10
|
+
* import { ProgressBar } from '@bspk/ui/ProgressBar';
|
|
11
|
+
*
|
|
12
|
+
* export function Example() {
|
|
13
|
+
* return <ProgressBar label="Example label" completion={50} />;
|
|
14
|
+
* }
|
|
12
15
|
*
|
|
13
|
-
*
|
|
14
|
-
* return (
|
|
15
|
-
* <ProgressBar label="Example label" completion={50} />
|
|
16
|
-
* );
|
|
17
|
-
* }
|
|
16
|
+
* @name ProgressBar
|
|
18
17
|
*/
|
|
19
18
|
function ProgressBar({ size = 'large', completion = 0, align = 'center', label }) {
|
|
20
19
|
const id = useId();
|
package/dist/ProgressBar.js.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"ProgressBar.js","sourceRoot":"","sources":["../src/ProgressBar.tsx"],"names":[],"mappings":";AAAA,OAAO,qBAAqB,CAAC;AAC7B,OAAO,EAAiB,KAAK,EAAE,MAAM,OAAO,CAAC;AAgC7C
|
|
1
|
+
{"version":3,"file":"ProgressBar.js","sourceRoot":"","sources":["../src/ProgressBar.tsx"],"names":[],"mappings":";AAAA,OAAO,qBAAqB,CAAC;AAC7B,OAAO,EAAiB,KAAK,EAAE,MAAM,OAAO,CAAC;AAgC7C;;;;;;;;;;;;GAYG;AACH,SAAS,WAAW,CAAC,EAAE,IAAI,GAAG,OAAO,EAAE,UAAU,GAAG,CAAC,EAAE,KAAK,GAAG,QAAQ,EAAE,KAAK,EAAoB;IAC9F,MAAM,EAAE,GAAG,KAAK,EAAE,CAAC;IAEnB,OAAO,CACH,6BAAiB,KAAK,eAAY,cAAc,eAAY,IAAI,aAC5D,iCACe,UAAU,GAAG,GAAG,gBAChB,sCAAsC,mBAClC,GAAG,mBACH,CAAC,mBACD,UAAU,EACzB,EAAE,EAAE,EAAE,EACN,GAAG,EAAC,KAAK,EACT,KAAK,EAAE,UAAU,aAEhB,UAAU,SACJ,EACX,qDAA0B,KAAK,EAAE,EAAE,SAAS,EAAE,GAAG,UAAU,GAAG,EAAmB,GAAI,EACrF,gBAAO,OAAO,EAAE,EAAE,YAAG,KAAK,GAAS,IACjC,CACT,CAAC;AACN,CAAC;AAED,WAAW,CAAC,QAAQ,GAAG,aAAa,CAAC;AAErC,OAAO,EAAE,WAAW,EAAE,CAAC"}
|
package/dist/ProgressCircle.d.ts
CHANGED
|
@@ -18,15 +18,14 @@ export type ProgressCircleProps = {
|
|
|
18
18
|
/**
|
|
19
19
|
* Rotating circle or pill that indicates the status or state of completion for a process that’s part of a user flow.
|
|
20
20
|
*
|
|
21
|
-
* @name ProgressCircle
|
|
22
21
|
* @example
|
|
23
|
-
*
|
|
22
|
+
* import { ProgressCircle } from '@bspk/ui/ProgressCircle';
|
|
23
|
+
*
|
|
24
|
+
* export function Example() {
|
|
25
|
+
* return <ProgressCircle label="Example label" />;
|
|
26
|
+
* }
|
|
24
27
|
*
|
|
25
|
-
*
|
|
26
|
-
* return (
|
|
27
|
-
* <ProgressCircle label="Example label"/>
|
|
28
|
-
* );
|
|
29
|
-
* }
|
|
28
|
+
* @name ProgressCircle
|
|
30
29
|
*/
|
|
31
30
|
declare function ProgressCircle({ label, labelPosition, size }: ProgressCircleProps): import("react/jsx-runtime").JSX.Element;
|
|
32
31
|
declare namespace ProgressCircle {
|
package/dist/ProgressCircle.js
CHANGED
|
@@ -7,15 +7,14 @@ import { Txt } from './Txt';
|
|
|
7
7
|
/**
|
|
8
8
|
* Rotating circle or pill that indicates the status or state of completion for a process that’s part of a user flow.
|
|
9
9
|
*
|
|
10
|
-
* @name ProgressCircle
|
|
11
10
|
* @example
|
|
12
|
-
*
|
|
11
|
+
* import { ProgressCircle } from '@bspk/ui/ProgressCircle';
|
|
12
|
+
*
|
|
13
|
+
* export function Example() {
|
|
14
|
+
* return <ProgressCircle label="Example label" />;
|
|
15
|
+
* }
|
|
13
16
|
*
|
|
14
|
-
*
|
|
15
|
-
* return (
|
|
16
|
-
* <ProgressCircle label="Example label"/>
|
|
17
|
-
* );
|
|
18
|
-
* }
|
|
17
|
+
* @name ProgressCircle
|
|
19
18
|
*/
|
|
20
19
|
function ProgressCircle({ label, labelPosition, size = 'medium' }) {
|
|
21
20
|
let variant = 'labels-base';
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"ProgressCircle.js","sourceRoot":"","sources":["../src/ProgressCircle.tsx"],"names":[],"mappings":";AAAA,wCAAwC;AAExC,OAAO,wBAAwB,CAAC;AAChC,OAAO,EAAE,KAAK,EAAE,MAAM,OAAO,CAAC;AAE9B,OAAO,EAAE,GAAG,EAAE,MAAM,OAAO,CAAC;AAoB5B
|
|
1
|
+
{"version":3,"file":"ProgressCircle.js","sourceRoot":"","sources":["../src/ProgressCircle.tsx"],"names":[],"mappings":";AAAA,wCAAwC;AAExC,OAAO,wBAAwB,CAAC;AAChC,OAAO,EAAE,KAAK,EAAE,MAAM,OAAO,CAAC;AAE9B,OAAO,EAAE,GAAG,EAAE,MAAM,OAAO,CAAC;AAoB5B;;;;;;;;;;;GAWG;AACH,SAAS,cAAc,CAAC,EAAE,KAAK,EAAE,aAAa,EAAE,IAAI,GAAG,QAAQ,EAAuB;IAClF,IAAI,OAAO,GAAe,aAAa,CAAC;IAExC,IAAI,IAAI,KAAK,OAAO;QAAE,OAAO,GAAG,cAAc,CAAC;SAC1C,IAAI,IAAI,KAAK,OAAO;QAAE,OAAO,GAAG,cAAc,CAAC;IAEpD,MAAM,OAAO,GAAG,KAAK,EAAE,CAAC;IAExB,OAAO,CACH,kCACqB,OAAO,eACd,iBAAiB,yBACN,aAAa,eACvB,IAAI,EACf,IAAI,EAAC,aAAa,aAElB,KAAC,cAAc,CAAC,GAAG,KAAG,EACtB,KAAC,GAAG,IAAC,EAAE,EAAE,OAAO,EAAE,OAAO,EAAE,OAAO,YAC7B,KAAK,IAAI,aAAa,GACrB,IACJ,CACT,CAAC;AACN,CAAC;AAED,cAAc,CAAC,QAAQ,GAAG,gBAAgB,CAAC;AAE3C,OAAO,EAAE,cAAc,EAAE,CAAC;AAE1B,MAAM,iBAAiB,GAAG,CAAC,KAA+B,EAAE,EAAE;IAC1D,MAAM,WAAW,GAAG,KAAK,CAAC,WAAW,IAAI,EAAE,CAAC;IAC5C,MAAM,KAAK,GAAG,GAAG,CAAC;IAClB,MAAM,EAAE,GAAG,KAAK,EAAE,CAAC;IAEnB,OAAO,CACH,kBAAS,KAAK,yBAAgB,IAAI,EAAC,MAAM,EAAC,OAAO,EAAE,OAAO,KAAK,GAAG,CAAC,IAAI,KAAK,GAAG,CAAC,EAAE,aAC9E,2BACI,0BAAgB,EAAE,EAAE,GAAG,EAAE,oBAAoB,aACzC,eAAM,MAAM,EAAC,KAAK,EAAC,SAAS,EAAC,cAAc,EAAC,WAAW,EAAE,CAAC,GAAI,EAC9D,eAAM,MAAM,EAAC,MAAM,EAAC,SAAS,EAAC,cAAc,EAAC,WAAW,EAAC,OAAO,GAAG,IACtD,EACjB,0BAAgB,EAAE,EAAE,GAAG,EAAE,mBAAmB,aACxC,eAAM,MAAM,EAAC,IAAI,EAAC,SAAS,EAAC,cAAc,EAAC,WAAW,EAAE,CAAC,GAAI,EAC7D,eAAM,MAAM,EAAC,MAAM,EAAC,SAAS,EAAC,cAAc,EAAC,WAAW,EAAC,OAAO,GAAG,IACtD,IACd,EACP,aAAG,WAAW,EAAE,WAAW,GAAG,CAAC,aAC3B,eACI,CAAC,EAAE,KAAK,WAAW,IAAI,KAAK,MAAM,KAAK,GAAG,WAAW,IAAI,KAAK,GAAG,WAAW,UAAU,KAAK,GAAG,CAAC,KAAK,GAAG,WAAW,CAAC,IAAI,KAAK,EAAE,EAC9H,MAAM,EAAE,QAAQ,EAAE,qBAAqB,GACzC,EACF,eACI,CAAC,EAAE,KAAK,KAAK,GAAG,CAAC,KAAK,GAAG,WAAW,CAAC,IAAI,KAAK,MAAM,KAAK,GAAG,WAAW,IAAI,KAAK,GAAG,WAAW,UAAU,WAAW,IAAI,KAAK,EAAE,EAC9H,MAAM,EAAE,QAAQ,EAAE,oBAAoB,GACxC,EAEF,eACI,CAAC,EAAE,KAAK,WAAW,IAAI,KAAK,MAAM,KAAK,GAAG,WAAW,IAAI,KAAK,GAAG,WAAW,UAAU,WAAW,IAAI,KAAK,GAAG,CAAC,EAAE,EAChH,MAAM,EAAC,cAAc,EACrB,aAAa,EAAC,OAAO,GACvB,IACF,IACF,CACT,CAAC;AACN,CAAC,CAAC;AAEF,cAAc,CAAC,GAAG,GAAG,iBAAiB,CAAC"}
|
|
@@ -63,19 +63,14 @@ export type ProgressionStepperProps = {
|
|
|
63
63
|
/**
|
|
64
64
|
* A progress stepper is a horizontal visual indicator that let’s the user know the progression of the current process.
|
|
65
65
|
*
|
|
66
|
-
* @name ProgressionStepper
|
|
67
66
|
* @example
|
|
68
67
|
* import { ProgressionStepper } from '@bspk/ui/ProgressionStepper';
|
|
69
68
|
*
|
|
70
69
|
* export function Example() {
|
|
71
|
-
* return
|
|
72
|
-
* <ProgressionStepper steps={[
|
|
73
|
-
* { name: 'Step 1' },
|
|
74
|
-
* { name: 'Step 2' },
|
|
75
|
-
* { name: 'Step 3' },
|
|
76
|
-
* ]} />
|
|
77
|
-
* );
|
|
70
|
+
* return <ProgressionStepper steps={[{ name: 'Step 1' }, { name: 'Step 2' }, { name: 'Step 3' }]} />;
|
|
78
71
|
* }
|
|
72
|
+
*
|
|
73
|
+
* @name ProgressionStepper
|
|
79
74
|
*/
|
|
80
75
|
declare function ProgressionStepper({ steps, currentStep: currentStepProp, variant, ...containerProps }: ElementProps<ProgressionStepperProps, 'div'>): import("react/jsx-runtime").JSX.Element | null;
|
|
81
76
|
declare namespace ProgressionStepper {
|
|
@@ -5,19 +5,14 @@ styleAdd(`[data-bspk=progression-stepper]{width:100%;--circle-width: var(--spaci
|
|
|
5
5
|
/**
|
|
6
6
|
* A progress stepper is a horizontal visual indicator that let’s the user know the progression of the current process.
|
|
7
7
|
*
|
|
8
|
-
* @name ProgressionStepper
|
|
9
8
|
* @example
|
|
10
9
|
* import { ProgressionStepper } from '@bspk/ui/ProgressionStepper';
|
|
11
10
|
*
|
|
12
11
|
* export function Example() {
|
|
13
|
-
* return
|
|
14
|
-
* <ProgressionStepper steps={[
|
|
15
|
-
* { name: 'Step 1' },
|
|
16
|
-
* { name: 'Step 2' },
|
|
17
|
-
* { name: 'Step 3' },
|
|
18
|
-
* ]} />
|
|
19
|
-
* );
|
|
12
|
+
* return <ProgressionStepper steps={[{ name: 'Step 1' }, { name: 'Step 2' }, { name: 'Step 3' }]} />;
|
|
20
13
|
* }
|
|
14
|
+
*
|
|
15
|
+
* @name ProgressionStepper
|
|
21
16
|
*/
|
|
22
17
|
function ProgressionStepper({ steps = [], currentStep: currentStepProp = 0, variant = 'horizontal', ...containerProps }) {
|
|
23
18
|
const currentStep = Math.max(0, Math.min(currentStepProp, steps.length + 1));
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"ProgressionStepper.js","sourceRoot":"","sources":["../src/ProgressionStepper.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAE,QAAQ,EAAE,MAAM,mBAAmB,CAAC;AAE7C,OAAO,4BAA4B,CAAC;AA8DpC
|
|
1
|
+
{"version":3,"file":"ProgressionStepper.js","sourceRoot":"","sources":["../src/ProgressionStepper.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAE,QAAQ,EAAE,MAAM,mBAAmB,CAAC;AAE7C,OAAO,4BAA4B,CAAC;AA8DpC;;;;;;;;;;;GAWG;AACH,SAAS,kBAAkB,CAAC,EACxB,KAAK,GAAG,EAAE,EACV,WAAW,EAAE,eAAe,GAAG,CAAC,EAChC,OAAO,GAAG,YAAY,EACtB,GAAG,cAAc,EAC0B;IAC3C,MAAM,WAAW,GAAG,IAAI,CAAC,GAAG,CAAC,CAAC,EAAE,IAAI,CAAC,GAAG,CAAC,eAAe,EAAE,KAAK,CAAC,MAAM,GAAG,CAAC,CAAC,CAAC,CAAC;IAC7E,OAAO,CAAC,KAAK,EAAE,MAAM,CAAC,CAAC,CAAC,IAAI,CAAC,CAAC,CAAC,CAC3B,kBAAS,cAAc,eAAY,qBAAqB,kBAAe,OAAO,aACzE,OAAO,KAAK,QAAQ,IAAI,CACrB,4BACI,6CAAkB,KAAK,CAAC,IAAI,CAAC,GAAG,CAAC,CAAC,EAAE,IAAI,CAAC,GAAG,CAAC,WAAW,GAAG,CAAC,EAAE,KAAK,CAAC,MAAM,GAAG,CAAC,CAAC,CAAC,CAAC,CAAC,IAAI,GAAQ,EAC9F,gDACK,WAAW,IAAI,KAAK,CAAC,MAAM,CAAC,CAAC,CAAC,CAC3B,WAAW,CACd,CAAC,CAAC,CAAC,CACA,uCACU,WAAW,UAAM,KAAK,CAAC,MAAM,IACpC,CACN,GACE,IACH,CACX,EACD,uBACK,KAAK,CAAC,OAAO,CAAC,CAAC,EAAE,IAAI,EAAE,OAAO,EAAE,EAAE,KAAK,EAAE,EAAE;oBACxC,MAAM,OAAO,GAAG,KAAK,GAAG,CAAC,CAAC;oBAC1B,IAAI,MAAM,GAA0C,YAAY,CAAC;oBACjE,IAAI,OAAO,GAAG,WAAW;wBAAE,MAAM,GAAG,UAAU,CAAC;yBAC1C,IAAI,OAAO,KAAK,WAAW;wBAAE,MAAM,GAAG,SAAS,CAAC;oBAErD,OAAO,CACH,6BAAiB,MAAM,eAAa,OAAO,aACvC,0EACI,4BAAgB,QAAQ,GAAG,EAC3B,gDACI,yBAAO,OAAO,GAAQ,EACrB,MAAM,KAAK,UAAU,IAAI,KAAC,QAAQ,KAAG,IACnC,EACP,4BAAgB,OAAO,GAAG,IACvB,EACN,OAAO,KAAK,QAAQ,IAAI,CACrB,iDACI,4CAAiB,IAAI,GAAQ,EAC5B,OAAO,IAAI,+CAAoB,OAAO,GAAQ,IAC5C,CACV,KAd6C,QAAQ,KAAK,EAAE,CAe5D,CACR,CAAC;gBACN,CAAC,CAAC,GACD,IACH,CACT,CAAC;AACN,CAAC;AAED,kBAAkB,CAAC,QAAQ,GAAG,oBAAoB,CAAC;AAEnD,OAAO,EAAE,kBAAkB,EAAE,CAAC"}
|
package/dist/RadioGroup.d.ts
CHANGED
|
@@ -26,8 +26,15 @@ export type RadioGroupProps = CommonProps<'name'> & {
|
|
|
26
26
|
*
|
|
27
27
|
* @example
|
|
28
28
|
* [
|
|
29
|
-
* {
|
|
30
|
-
*
|
|
29
|
+
* {
|
|
30
|
+
* value: '1',
|
|
31
|
+
* label: 'Option 1',
|
|
32
|
+
* },
|
|
33
|
+
* {
|
|
34
|
+
* value: '2',
|
|
35
|
+
* label: 'Option 2',
|
|
36
|
+
* description: 'Description here',
|
|
37
|
+
* },
|
|
31
38
|
* { value: '3', label: 'Option 3' },
|
|
32
39
|
* ];
|
|
33
40
|
*
|
package/dist/RadioGroup.js.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"RadioGroup.js","sourceRoot":"","sources":["../src/RadioGroup.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAE,KAAK,EAAE,MAAM,OAAO,CAAC;AAE9B,OAAO,EAAE,KAAK,EAAE,MAAM,SAAS,CAAC;AAChC,OAAO,EAAqB,YAAY,EAAE,MAAM,gBAAgB,CAAC;AAIjE,OAAO,oBAAoB,CAAC;
|
|
1
|
+
{"version":3,"file":"RadioGroup.js","sourceRoot":"","sources":["../src/RadioGroup.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAE,KAAK,EAAE,MAAM,OAAO,CAAC;AAE9B,OAAO,EAAE,KAAK,EAAE,MAAM,SAAS,CAAC;AAChC,OAAO,EAAqB,YAAY,EAAE,MAAM,gBAAgB,CAAC;AAIjE,OAAO,oBAAoB,CAAC;AA0D5B;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GA6BG;AACH,SAAS,UAAU,CAAC,EAChB,QAAQ,EACR,OAAO,GAAG,EAAE,EACZ,IAAI,EACJ,KAAK,EAAE,UAAU,EACjB,KAAK,EAAE,UAAU,EACjB,SAAS,GAAG,IAAI,EAChB,GAAG,KAAK,EAC2B;IACnC,MAAM,EAAE,GAAG,eAAe,KAAK,EAAE,EAAE,CAAC;IAEpC,OAAO,CACH,kBACQ,KAAK,gBACG,CAAC,SAAS,CAAC,CAAC,CAAC,UAAU,CAAC,CAAC,CAAC,SAAS,qBAC9B,SAAS,CAAC,CAAC,CAAC,GAAG,EAAE,QAAQ,CAAC,CAAC,CAAC,SAAS,eAC5C,aAAa,EACvB,EAAE,EAAE,EAAE,EACN,IAAI,EAAC,OAAO,aAEX,SAAS,IAAI,gBAAO,EAAE,EAAE,GAAG,EAAE,QAAQ,YAAG,UAAU,GAAS,EAC5D,cAAK,IAAI,EAAC,YAAY,YACjB,OAAO,CAAC,GAAG,CAAC,CAAC,EAAE,KAAK,EAAE,WAAW,EAAE,KAAK,EAAE,EAAE,KAAK,EAAE,EAAE;oBAClD,OAAO,CACH,KAAC,YAAY,IAAC,WAAW,EAAE,WAAW,EAA0C,KAAK,EAAE,KAAK,YACxF,KAAC,KAAK,kBACU,KAAK,EACjB,OAAO,EAAE,UAAU,KAAK,KAAK,EAC7B,IAAI,EAAE,IAAI,EACV,QAAQ,EAAE,CAAC,OAAO,EAAE,EAAE,CAAC,OAAO,IAAI,QAAQ,CAAC,KAAK,CAAC,EACjD,KAAK,EAAE,KAAK,GACd,IAPuC,iBAAiB,KAAK,IAAI,KAAK,EAAE,CAQ/D,CAClB,CAAC;gBACN,CAAC,CAAC,GACA,IACJ,CACT,CAAC;AACN,CAAC;AAED,UAAU,CAAC,QAAQ,GAAG,YAAY,CAAC;AAEnC,OAAO,EAAE,UAAU,EAAE,CAAC"}
|
package/dist/SearchBar.d.ts
CHANGED
|
@@ -63,8 +63,7 @@ export type SearchBarProps<T extends MenuItem = MenuItem> = Pick<MenuProps<T>, '
|
|
|
63
63
|
* export function Example() {
|
|
64
64
|
* const [searchText, setSearchText] = useState<string>('');
|
|
65
65
|
*
|
|
66
|
-
* const handleItemSelect = (item) =>
|
|
67
|
-
* console.log('Selected item:', item);
|
|
66
|
+
* const handleItemSelect = (item) => console.log('Selected item:', item);
|
|
68
67
|
*
|
|
69
68
|
* return (
|
|
70
69
|
* <SearchBar
|
package/dist/SearchBar.js
CHANGED
|
@@ -7,7 +7,7 @@ import { Menu } from './Menu';
|
|
|
7
7
|
import { Portal } from './Portal';
|
|
8
8
|
import { TextInput } from './TextInput';
|
|
9
9
|
import { Txt } from './Txt';
|
|
10
|
-
import {
|
|
10
|
+
import { useCombobox } from './hooks/useCombobox';
|
|
11
11
|
import { useId } from './hooks/useId';
|
|
12
12
|
/**
|
|
13
13
|
* Component description coming soon.
|
|
@@ -19,8 +19,7 @@ import { useId } from './hooks/useId';
|
|
|
19
19
|
* export function Example() {
|
|
20
20
|
* const [searchText, setSearchText] = useState<string>('');
|
|
21
21
|
*
|
|
22
|
-
* const handleItemSelect = (item) =>
|
|
23
|
-
* console.log('Selected item:', item);
|
|
22
|
+
* const handleItemSelect = (item) => console.log('Selected item:', item);
|
|
24
23
|
*
|
|
25
24
|
* return (
|
|
26
25
|
* <SearchBar
|
|
@@ -50,16 +49,16 @@ import { useId } from './hooks/useId';
|
|
|
50
49
|
*/
|
|
51
50
|
function SearchBar({ itemCount, items, noResultsMessage, placeholder = 'Search', 'aria-label': ariaLabel, id: idProp, inputRef, name, size = 'medium', onSelect, value, onChange, showMenu = true, }) {
|
|
52
51
|
const id = useId(idProp);
|
|
53
|
-
const {
|
|
52
|
+
const { toggleProps: { ref: triggerRef, onClick, onKeyDownCapture, ...triggerProps }, menuProps, closeMenu, } = useCombobox({
|
|
54
53
|
placement: 'bottom-start',
|
|
55
54
|
});
|
|
56
55
|
const inputRefLocal = useRef(null);
|
|
57
56
|
return (_jsxs(_Fragment, { children: [_jsx("div", { "data-bspk": "search-bar", children: _jsx(TextInput, { "aria-label": ariaLabel, autoComplete: "off", containerRef: triggerRef, id: id, inputRef: (node) => {
|
|
58
57
|
inputRef?.(node || null);
|
|
59
58
|
inputRefLocal.current = node;
|
|
60
|
-
}, leading: _jsx(SvgSearch, {}), name: name, onChange: (str) => onChange(str), placeholder: placeholder, size: size, value: value, ...triggerProps, onClick: (
|
|
59
|
+
}, leading: _jsx(SvgSearch, {}), name: name, onChange: (str) => onChange(str), placeholder: placeholder, size: size, value: value, ...triggerProps, onClick: () => {
|
|
61
60
|
if (items?.length)
|
|
62
|
-
onClick(
|
|
61
|
+
onClick();
|
|
63
62
|
}, onKeyDownCapture: (event) => {
|
|
64
63
|
const handled = onKeyDownCapture(event);
|
|
65
64
|
if (handled)
|
package/dist/SearchBar.js.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"SearchBar.js","sourceRoot":"","sources":["../src/SearchBar.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAE,SAAS,EAAE,MAAM,oBAAoB,CAAC;AAC/C,OAAO,mBAAmB,CAAC;AAC3B,OAAO,EAAE,MAAM,EAAE,MAAM,OAAO,CAAC;AAE/B,OAAO,EAAuB,IAAI,EAAE,MAAM,QAAQ,CAAC;AACnD,OAAO,EAAE,MAAM,EAAE,MAAM,UAAU,CAAC;AAClC,OAAO,EAAkB,SAAS,EAAE,MAAM,aAAa,CAAC;AACxD,OAAO,EAAE,GAAG,EAAE,MAAM,OAAO,CAAC;AAC5B,OAAO,EAAE,
|
|
1
|
+
{"version":3,"file":"SearchBar.js","sourceRoot":"","sources":["../src/SearchBar.tsx"],"names":[],"mappings":"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"}
|
|
@@ -2,23 +2,18 @@ import './segmented-control.scss';
|
|
|
2
2
|
import { ElementProps } from './';
|
|
3
3
|
export type SegmentedControlOption = {
|
|
4
4
|
/**
|
|
5
|
-
* The label of the option. This is the text that will be displayed on the
|
|
6
|
-
* option.
|
|
5
|
+
* The label of the option. This is the text that will be displayed on the option.
|
|
7
6
|
*
|
|
8
7
|
* @required
|
|
9
8
|
*/
|
|
10
9
|
label: string;
|
|
11
10
|
/**
|
|
12
|
-
* Determines if the element is
|
|
13
|
-
* [disabled](https://developer.mozilla.org/en-US/docs/Web/HTML/Attributes/disabled).
|
|
11
|
+
* Determines if the element is [disabled](https://developer.mozilla.org/en-US/docs/Web/HTML/Attributes/disabled).
|
|
14
12
|
*
|
|
15
13
|
* @default false
|
|
16
14
|
*/
|
|
17
15
|
disabled?: boolean;
|
|
18
|
-
/**
|
|
19
|
-
* The value of the option. If not provided, the label will be used as the
|
|
20
|
-
* value.
|
|
21
|
-
*/
|
|
16
|
+
/** The value of the option. If not provided, the label will be used as the value. */
|
|
22
17
|
value?: string;
|
|
23
18
|
/**
|
|
24
19
|
* The the icon to display before the label.
|
|
@@ -35,8 +30,7 @@ export type SegmentedControlOption = {
|
|
|
35
30
|
};
|
|
36
31
|
export type SegmentedControlProps = {
|
|
37
32
|
/**
|
|
38
|
-
* The options to display. Each option has a label and an optional leading
|
|
39
|
-
* icon.
|
|
33
|
+
* The options to display. Each option has a label and an optional leading icon.
|
|
40
34
|
*
|
|
41
35
|
* @example
|
|
42
36
|
* [
|
|
@@ -71,16 +65,15 @@ export type SegmentedControlProps = {
|
|
|
71
65
|
*/
|
|
72
66
|
size?: 'medium' | 'small';
|
|
73
67
|
/**
|
|
74
|
-
* The width of the options. If set to 'fill', the options will fill the
|
|
75
|
-
*
|
|
76
|
-
* their content.
|
|
68
|
+
* The width of the options. If set to 'fill', the options will fill the width of the container. If set to 'hug',
|
|
69
|
+
* the options will be as wide as their content.
|
|
77
70
|
*
|
|
78
71
|
* @default hug
|
|
79
72
|
*/
|
|
80
73
|
width?: 'fill' | 'hug';
|
|
81
74
|
/**
|
|
82
|
-
* Determines if the labels of the options should be displayed. If icons are
|
|
83
|
-
*
|
|
75
|
+
* Determines if the labels of the options should be displayed. If icons are not provided for every option this is
|
|
76
|
+
* ignored and labels are shown.
|
|
84
77
|
*
|
|
85
78
|
* @default true
|
|
86
79
|
*/
|
package/dist/SegmentedControl.js
CHANGED
|
@@ -32,12 +32,10 @@ import { useOptionIconsInvalid } from './hooks/useOptionIconsInvalid';
|
|
|
32
32
|
function SegmentedControl({ onChange, value, size = 'medium', options: optionsProp, width = 'hug', showLabels: showLabelsProp = true, ...containerProps }) {
|
|
33
33
|
const options = Array.isArray(optionsProp) ? optionsProp : [];
|
|
34
34
|
useOptionIconsInvalid(options);
|
|
35
|
-
const hideLabels = showLabelsProp === false &&
|
|
36
|
-
options.every((item) => item.icon && item.label);
|
|
35
|
+
const hideLabels = showLabelsProp === false && options.every((item) => item.icon && item.label);
|
|
37
36
|
return (_jsx("div", { ...containerProps, "data-bspk": "segmented-control", "data-size": size, "data-width": width, children: options.map((item, index) => {
|
|
38
37
|
const isActive = item.value === value;
|
|
39
|
-
return (_jsx(Fragment, { children: _jsx(Tooltip, { disabled: !hideLabels, label: item.label, placement: "top", children: _jsx("button", { "aria-label": item.label, "data-first": index === 0 || undefined, "data-last": index === options.length - 1 || undefined, "data-selected": isActive || undefined, disabled: item.disabled || undefined, onClick: () => onChange(item.value || item.label), children: _jsx("span", { "data-outer": true, children: _jsxs("span", { "data-inner": true, children: [(isActive && item.iconActive) ||
|
|
40
|
-
item.icon, !hideLabels && item.label] }) }) }) }) }, item.value));
|
|
38
|
+
return (_jsx(Fragment, { children: _jsx(Tooltip, { disabled: !hideLabels, label: item.label, placement: "top", children: _jsx("button", { "aria-label": item.label, "data-first": index === 0 || undefined, "data-last": index === options.length - 1 || undefined, "data-selected": isActive || undefined, disabled: item.disabled || undefined, onClick: () => onChange(item.value || item.label), children: _jsx("span", { "data-outer": true, children: _jsxs("span", { "data-inner": true, children: [(isActive && item.iconActive) || item.icon, !hideLabels && item.label] }) }) }) }) }, item.value));
|
|
41
39
|
}) }));
|
|
42
40
|
}
|
|
43
41
|
SegmentedControl.bspkName = 'SegmentedControl';
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"SegmentedControl.js","sourceRoot":"","sources":["../src/SegmentedControl.tsx"],"names":[],"mappings":";AAAA,OAAO,0BAA0B,CAAC;AAClC,OAAO,EAAE,QAAQ,EAAE,MAAM,OAAO,CAAC;AAEjC,OAAO,EAAE,OAAO,EAAE,MAAM,WAAW,CAAC;AACpC,OAAO,EAAE,qBAAqB,EAAE,MAAM,+BAA+B,CAAC;
|
|
1
|
+
{"version":3,"file":"SegmentedControl.js","sourceRoot":"","sources":["../src/SegmentedControl.tsx"],"names":[],"mappings":";AAAA,OAAO,0BAA0B,CAAC;AAClC,OAAO,EAAE,QAAQ,EAAE,MAAM,OAAO,CAAC;AAEjC,OAAO,EAAE,OAAO,EAAE,MAAM,WAAW,CAAC;AACpC,OAAO,EAAE,qBAAqB,EAAE,MAAM,+BAA+B,CAAC;AAqFtE;;;;;;;;;;;;;;;;;;;;;;;;GAwBG;AACH,SAAS,gBAAgB,CAAC,EACtB,QAAQ,EACR,KAAK,EACL,IAAI,GAAG,QAAQ,EACf,OAAO,EAAE,WAAW,EACpB,KAAK,GAAG,KAAK,EACb,UAAU,EAAE,cAAc,GAAG,IAAI,EACjC,GAAG,cAAc,EACwB;IACzC,MAAM,OAAO,GAAG,KAAK,CAAC,OAAO,CAAC,WAAW,CAAC,CAAC,CAAC,CAAC,WAAW,CAAC,CAAC,CAAC,EAAE,CAAC;IAC9D,qBAAqB,CAAC,OAAO,CAAC,CAAC;IAE/B,MAAM,UAAU,GAAG,cAAc,KAAK,KAAK,IAAI,OAAO,CAAC,KAAK,CAAC,CAAC,IAAI,EAAE,EAAE,CAAC,IAAI,CAAC,IAAI,IAAI,IAAI,CAAC,KAAK,CAAC,CAAC;IAEhG,OAAO,CACH,iBAAS,cAAc,eAAY,mBAAmB,eAAY,IAAI,gBAAc,KAAK,YACpF,OAAO,CAAC,GAAG,CAAC,CAAC,IAAI,EAAE,KAAK,EAAE,EAAE;YACzB,MAAM,QAAQ,GAAG,IAAI,CAAC,KAAK,KAAK,KAAK,CAAC;YACtC,OAAO,CACH,KAAC,QAAQ,cACL,KAAC,OAAO,IAAC,QAAQ,EAAE,CAAC,UAAU,EAAE,KAAK,EAAE,IAAI,CAAC,KAAK,EAAE,SAAS,EAAC,KAAK,YAC9D,+BACgB,IAAI,CAAC,KAAK,gBACV,KAAK,KAAK,CAAC,IAAI,SAAS,eACzB,KAAK,KAAK,OAAO,CAAC,MAAM,GAAG,CAAC,IAAI,SAAS,mBACrC,QAAQ,IAAI,SAAS,EACpC,QAAQ,EAAE,IAAI,CAAC,QAAQ,IAAI,SAAS,EACpC,OAAO,EAAE,GAAG,EAAE,CAAC,QAAQ,CAAC,IAAI,CAAC,KAAK,IAAI,IAAI,CAAC,KAAK,CAAC,YAEjD,6CACI,+CACK,CAAC,QAAQ,IAAI,IAAI,CAAC,UAAU,CAAC,IAAI,IAAI,CAAC,IAAI,EAC1C,CAAC,UAAU,IAAI,IAAI,CAAC,KAAK,IACvB,GACJ,GACF,GACH,IAjBC,IAAI,CAAC,KAAK,CAkBd,CACd,CAAC;QACN,CAAC,CAAC,GACA,CACT,CAAC;AACN,CAAC;AAED,gBAAgB,CAAC,QAAQ,GAAG,kBAAkB,CAAC;AAE/C,OAAO,EAAE,gBAAgB,EAAE,CAAC"}
|
|
@@ -1,16 +1,16 @@
|
|
|
1
|
-
import './
|
|
1
|
+
import './select.scss';
|
|
2
2
|
import { MenuProps } from './Menu';
|
|
3
3
|
import { Placement } from './hooks/useFloating';
|
|
4
4
|
import { CommonProps, InvalidPropsLibrary } from './';
|
|
5
|
-
export type
|
|
5
|
+
export type SelectOption = Record<string, unknown> & {
|
|
6
6
|
/** The value of the option. */
|
|
7
7
|
value: string;
|
|
8
8
|
/** The label of the option. This is the text that will be displayed on the option. */
|
|
9
9
|
label: string;
|
|
10
10
|
};
|
|
11
|
-
export type
|
|
11
|
+
export type SelectProps<T extends SelectOption = SelectOption> = CommonProps<'aria-label' | 'disabled' | 'id' | 'name' | 'readOnly' | 'size'> & InvalidPropsLibrary & Pick<MenuProps<T>, 'isMulti' | 'itemCount' | 'renderListItem' | 'selectAll'> & {
|
|
12
12
|
/**
|
|
13
|
-
* Array of options to display in the
|
|
13
|
+
* Array of options to display in the select
|
|
14
14
|
*
|
|
15
15
|
* @example
|
|
16
16
|
* [
|
|
@@ -26,7 +26,7 @@ export type DropdownProps<T extends DropdownOption = DropdownOption> = CommonPro
|
|
|
26
26
|
* { value: '10', label: 'Option 10' },
|
|
27
27
|
* ];
|
|
28
28
|
*
|
|
29
|
-
* @type Array<
|
|
29
|
+
* @type Array<SelectOption>
|
|
30
30
|
* @required
|
|
31
31
|
*/
|
|
32
32
|
options: T[];
|
|
@@ -37,18 +37,18 @@ export type DropdownProps<T extends DropdownOption = DropdownOption> = CommonPro
|
|
|
37
37
|
*/
|
|
38
38
|
value?: Array<string>;
|
|
39
39
|
/**
|
|
40
|
-
* Placeholder for the
|
|
40
|
+
* Placeholder for the select
|
|
41
41
|
*
|
|
42
42
|
* @default Select one...
|
|
43
43
|
*/
|
|
44
44
|
placeholder?: string;
|
|
45
45
|
/**
|
|
46
|
-
* The placement of the
|
|
46
|
+
* The placement of the select menu. Will be ignored if the menu is too close to the edge of the screen.
|
|
47
47
|
*
|
|
48
48
|
* @default bottom
|
|
49
49
|
*/
|
|
50
50
|
placement?: Extract<Placement, 'bottom' | 'top'>;
|
|
51
|
-
/** The style of the
|
|
51
|
+
/** The style of the select. */
|
|
52
52
|
style?: React.CSSProperties;
|
|
53
53
|
/**
|
|
54
54
|
* The function to call when the selected values change.
|
|
@@ -61,15 +61,15 @@ export type DropdownProps<T extends DropdownOption = DropdownOption> = CommonPro
|
|
|
61
61
|
* A field element that allows users to select one option from a list of available choices. *
|
|
62
62
|
*
|
|
63
63
|
* @example
|
|
64
|
-
* import {
|
|
64
|
+
* import { Select } from '@bspk/ui/Select';
|
|
65
65
|
*
|
|
66
66
|
* export function Example() {
|
|
67
67
|
* const [selected, setSelected] = React.useState<string[]>([]);
|
|
68
68
|
* return (
|
|
69
|
-
* <
|
|
69
|
+
* <Select
|
|
70
70
|
* aria-label="Select an option"
|
|
71
71
|
* itemCount={5}
|
|
72
|
-
* name="example-
|
|
72
|
+
* name="example-select"
|
|
73
73
|
* onChange={setSelected}
|
|
74
74
|
* options={[
|
|
75
75
|
* { value: '1', label: 'Option 1' },
|
|
@@ -90,11 +90,11 @@ export type DropdownProps<T extends DropdownOption = DropdownOption> = CommonPro
|
|
|
90
90
|
* );
|
|
91
91
|
* }
|
|
92
92
|
*
|
|
93
|
-
* @name
|
|
93
|
+
* @name Select
|
|
94
94
|
*/
|
|
95
|
-
declare function
|
|
96
|
-
declare namespace
|
|
95
|
+
declare function Select({ options, value: selected, onChange, 'aria-label': ariaLabel, placeholder, size, itemCount, disabled, id: propId, invalid, errorMessage, readOnly, name, isMulti, renderListItem, style: styleProp, selectAll, }: SelectProps): import("react/jsx-runtime").JSX.Element;
|
|
96
|
+
declare namespace Select {
|
|
97
97
|
var bspkName: string;
|
|
98
98
|
}
|
|
99
|
-
export {
|
|
99
|
+
export { Select };
|
|
100
100
|
/** Copyright 2025 Anywhere Real Estate - CC BY 4.0 */
|