@bspk/ui 1.1.27 → 1.1.29
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/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/Select.d.ts +1 -1
- package/dist/Select.js +10 -11
- package/dist/Select.js.map +1 -1
- 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 +83 -14
- 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/index.d.ts +3 -1
- package/dist/index.js +3 -1
- package/dist/index.js.map +1 -1
- package/meta-types.ts +0 -1
- package/meta.ts +0 -3
- package/package.json +3 -2
- package/src/Avatar.tsx +2 -1
- package/src/Button.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/Select.tsx +9 -11
- 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 +94 -16
- package/src/hooks/{useFloatingMenu.ts → useCombobox.ts} +28 -40
- package/src/hooks/useFloating.ts +45 -24
- package/src/index.ts +3 -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/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":"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"}
|
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"}
|
package/dist/Select.d.ts
CHANGED
|
@@ -92,7 +92,7 @@ export type SelectProps<T extends SelectOption = SelectOption> = CommonProps<'ar
|
|
|
92
92
|
*
|
|
93
93
|
* @name Select
|
|
94
94
|
*/
|
|
95
|
-
declare function Select({ options, value: selected, onChange, 'aria-label': ariaLabel, placeholder, size, itemCount, disabled, id: propId, invalid, errorMessage, readOnly,
|
|
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
96
|
declare namespace Select {
|
|
97
97
|
var bspkName: string;
|
|
98
98
|
}
|
package/dist/Select.js
CHANGED
|
@@ -5,7 +5,7 @@ styleAdd(`[data-bspk=select]{--select-background: var(--surface-neutral-t1-base)
|
|
|
5
5
|
import { ListItem } from './ListItem';
|
|
6
6
|
import { Menu } from './Menu';
|
|
7
7
|
import { Portal } from './Portal';
|
|
8
|
-
import {
|
|
8
|
+
import { useCombobox } from './hooks/useCombobox';
|
|
9
9
|
import { useId } from './hooks/useId';
|
|
10
10
|
/**
|
|
11
11
|
* A field element that allows users to select one option from a list of available choices. *
|
|
@@ -42,21 +42,20 @@ import { useId } from './hooks/useId';
|
|
|
42
42
|
*
|
|
43
43
|
* @name Select
|
|
44
44
|
*/
|
|
45
|
-
function Select({ options = [], value: selected, onChange, 'aria-label': ariaLabel, placeholder = 'Select...', size = 'medium', itemCount = 5, disabled, id: propId, invalid, errorMessage, readOnly,
|
|
45
|
+
function Select({ options = [], value: selected, onChange, 'aria-label': ariaLabel, placeholder = 'Select...', size = 'medium', itemCount = 5, disabled, id: propId, invalid, errorMessage, readOnly, name, isMulti, renderListItem, style: styleProp, selectAll, }) {
|
|
46
46
|
const id = useId(propId);
|
|
47
|
-
const {
|
|
48
|
-
placement,
|
|
49
|
-
|
|
50
|
-
|
|
51
|
-
|
|
52
|
-
|
|
53
|
-
|
|
54
|
-
},
|
|
47
|
+
const { toggleProps, menuProps, closeMenu } = useCombobox({
|
|
48
|
+
placement: 'bottom',
|
|
49
|
+
disabled,
|
|
50
|
+
invalid,
|
|
51
|
+
readOnly,
|
|
52
|
+
errorMessage,
|
|
53
|
+
offsetOptions: 4,
|
|
55
54
|
});
|
|
56
55
|
const selectLabel = isMulti
|
|
57
56
|
? `${selected?.length || 0} option${selected?.length !== 1 ? 's' : ''} selected`
|
|
58
57
|
: options.find((o) => o.value === selected?.[0])?.label;
|
|
59
|
-
return (_jsxs(_Fragment, { children: [_jsx("input", { defaultValue: selected, name: name, type: "hidden" }), _jsxs("button", { "aria-label": ariaLabel, "data-bspk": "select", "data-empty": selectLabel ? undefined : '', "data-invalid": invalid || undefined, "data-size": size, disabled: disabled || readOnly, id: id, style: styleProp, ...
|
|
58
|
+
return (_jsxs(_Fragment, { children: [_jsx("input", { defaultValue: selected, name: name, type: "hidden" }), _jsxs("button", { "aria-label": ariaLabel, "data-bspk": "select", "data-empty": selectLabel ? undefined : '', "data-invalid": invalid || undefined, "data-size": size, disabled: disabled || readOnly, id: id, style: styleProp, ...toggleProps, children: [_jsx(ListItem, { "data-placeholder": "", label: selectLabel || placeholder, readOnly: true }), _jsx("span", { "data-icon": true, children: _jsx(SvgChevronRight, {}) })] }), _jsx(Portal, { children: _jsx(Menu, { "data-floating": true, isMulti: isMulti, itemCount: itemCount, items: options, onChange: (next, event) => {
|
|
60
59
|
event?.preventDefault();
|
|
61
60
|
if (!isMulti)
|
|
62
61
|
closeMenu();
|
package/dist/Select.js.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Select.js","sourceRoot":"","sources":["../src/Select.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAE,eAAe,EAAE,MAAM,0BAA0B,CAAC;AAE3D,OAAO,eAAe,CAAC;AACvB,OAAO,EAAE,QAAQ,EAAE,MAAM,YAAY,CAAC;AACtC,OAAO,EAAE,IAAI,EAAa,MAAM,QAAQ,CAAC;AACzC,OAAO,EAAE,MAAM,EAAE,MAAM,UAAU,CAAC;
|
|
1
|
+
{"version":3,"file":"Select.js","sourceRoot":"","sources":["../src/Select.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAE,eAAe,EAAE,MAAM,0BAA0B,CAAC;AAE3D,OAAO,eAAe,CAAC;AACvB,OAAO,EAAE,QAAQ,EAAE,MAAM,YAAY,CAAC;AACtC,OAAO,EAAE,IAAI,EAAa,MAAM,QAAQ,CAAC;AACzC,OAAO,EAAE,MAAM,EAAE,MAAM,UAAU,CAAC;AAClC,OAAO,EAAE,WAAW,EAAE,MAAM,qBAAqB,CAAC;AAElD,OAAO,EAAE,KAAK,EAAE,MAAM,eAAe,CAAC;AAiEtC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GAkCG;AACH,SAAS,MAAM,CAAC,EACZ,OAAO,GAAG,EAAE,EACZ,KAAK,EAAE,QAAQ,EACf,QAAQ,EACR,YAAY,EAAE,SAAS,EACvB,WAAW,GAAG,WAAW,EACzB,IAAI,GAAG,QAAQ,EACf,SAAS,GAAG,CAAC,EACb,QAAQ,EACR,EAAE,EAAE,MAAM,EACV,OAAO,EACP,YAAY,EACZ,QAAQ,EACR,IAAI,EACJ,OAAO,EACP,cAAc,EACd,KAAK,EAAE,SAAS,EAChB,SAAS,GACC;IACV,MAAM,EAAE,GAAG,KAAK,CAAC,MAAM,CAAC,CAAC;IAEzB,MAAM,EAAE,WAAW,EAAE,SAAS,EAAE,SAAS,EAAE,GAAG,WAAW,CAAC;QACtD,SAAS,EAAE,QAAQ;QACnB,QAAQ;QACR,OAAO;QACP,QAAQ;QACR,YAAY;QACZ,aAAa,EAAE,CAAC;KACnB,CAAC,CAAC;IAEH,MAAM,WAAW,GAAG,OAAO;QACvB,CAAC,CAAC,GAAG,QAAQ,EAAE,MAAM,IAAI,CAAC,UAAU,QAAQ,EAAE,MAAM,KAAK,CAAC,CAAC,CAAC,CAAC,GAAG,CAAC,CAAC,CAAC,EAAE,WAAW;QAChF,CAAC,CAAC,OAAO,CAAC,IAAI,CAAC,CAAC,CAAC,EAAE,EAAE,CAAC,CAAC,CAAC,KAAK,KAAK,QAAQ,EAAE,CAAC,CAAC,CAAC,CAAC,EAAE,KAAK,CAAC;IAE5D,OAAO,CACH,8BACI,gBAAO,YAAY,EAAE,QAAQ,EAAE,IAAI,EAAE,IAAI,EAAE,IAAI,EAAC,QAAQ,GAAG,EAC3D,gCACgB,SAAS,eACX,QAAQ,gBACN,WAAW,CAAC,CAAC,CAAC,SAAS,CAAC,CAAC,CAAC,EAAE,kBAC1B,OAAO,IAAI,SAAS,eACvB,IAAI,EACf,QAAQ,EAAE,QAAQ,IAAI,QAAQ,EAC9B,EAAE,EAAE,EAAE,EACN,KAAK,EAAE,SAAS,KACZ,WAAW,aAEf,KAAC,QAAQ,wBAAkB,EAAE,EAAC,KAAK,EAAE,WAAW,IAAI,WAAW,EAAE,QAAQ,SAAG,EAC5E,4CACI,KAAC,eAAe,KAAG,GAChB,IACF,EACT,KAAC,MAAM,cACH,KAAC,IAAI,2BAED,OAAO,EAAE,OAAO,EAChB,SAAS,EAAE,SAAS,EACpB,KAAK,EAAE,OAAO,EACd,QAAQ,EAAE,CAAC,IAAI,EAAE,KAAK,EAAE,EAAE;wBACtB,KAAK,EAAE,cAAc,EAAE,CAAC;wBACxB,IAAI,CAAC,OAAO;4BAAE,SAAS,EAAE,CAAC;wBAC1B,QAAQ,EAAE,CAAC,IAAI,CAAC,CAAC;oBACrB,CAAC,EACD,cAAc,EAAE,cAAc,EAC9B,SAAS,EAAE,SAAS,EACpB,cAAc,EAAE,QAAQ,KACpB,SAAS,GACf,GACG,IACV,CACN,CAAC;AACN,CAAC;AAED,MAAM,CAAC,QAAQ,GAAG,QAAQ,CAAC;AAE3B,OAAO,EAAE,MAAM,EAAE,CAAC"}
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
import { Fragment as _Fragment, jsx as _jsx } from "react/jsx-runtime";
|
|
2
2
|
import '@bspk/styles/anywhere.css';
|
|
3
3
|
import { styleAdd } from './utils/styleAdd';
|
|
4
|
-
styleAdd(`[data-color=grey]{--foreground: var(--foreground-neutral-on-surface-variant-01);--background: var(--surface-neutral-t2-lowest)}[data-color=white]{--foreground: var(--foreground-neutral-on-surface-variant-01);--background: var(--surface-neutral-t1-base)}[data-color=primary]{--foreground: var(--foreground-brand-primary-depth);--background: var(--surface-brand-primary-highlight)}[data-color=secondary]{--foreground: var(--foreground-brand-secondary-depth);--background: var(--surface-brand-secondary-highlight)}[data-color=blue]{--foreground: var(--foreground-spectrum-blue);--background: var(--surface-spectrum-blue)}[data-color=green]{--foreground: var(--foreground-spectrum-green);--background: var(--surface-spectrum-green)}[data-color=lime]{--foreground: var(--foreground-spectrum-lime);--background: var(--surface-spectrum-lime)}[data-color=magenta]{--foreground: var(--foreground-spectrum-magenta);--background: var(--surface-spectrum-magenta)}[data-color=orange]{--foreground: var(--foreground-spectrum-orange);--background: var(--surface-spectrum-orange)}[data-color=pink]{--foreground: var(--foreground-spectrum-pink);--background: var(--surface-spectrum-pink)}[data-color=purple]{--foreground: var(--foreground-spectrum-purple);--background: var(--surface-spectrum-purple)}[data-color=red]{--foreground: var(--foreground-spectrum-red);--background: var(--surface-spectrum-red)}[data-color=teal]{--foreground: var(--foreground-spectrum-teal);--background: var(--surface-spectrum-teal)}[data-color=yellow]{--foreground: var(--foreground-spectrum-yellow);--background: var(--surface-spectrum-yellow)}*,*::before,*::after{box-sizing:border-box}*{margin:0;padding:0}html:has(body[data-bspk]){height:100%;scroll-behavior:smooth}
|
|
4
|
+
styleAdd(`[data-color=grey]{--foreground: var(--foreground-neutral-on-surface-variant-01);--background: var(--surface-neutral-t2-lowest)}[data-color=white]{--foreground: var(--foreground-neutral-on-surface-variant-01);--background: var(--surface-neutral-t1-base)}[data-color=primary]{--foreground: var(--foreground-brand-primary-depth);--background: var(--surface-brand-primary-highlight)}[data-color=secondary]{--foreground: var(--foreground-brand-secondary-depth);--background: var(--surface-brand-secondary-highlight)}[data-color=blue]{--foreground: var(--foreground-spectrum-blue);--background: var(--surface-spectrum-blue)}[data-color=green]{--foreground: var(--foreground-spectrum-green);--background: var(--surface-spectrum-green)}[data-color=lime]{--foreground: var(--foreground-spectrum-lime);--background: var(--surface-spectrum-lime)}[data-color=magenta]{--foreground: var(--foreground-spectrum-magenta);--background: var(--surface-spectrum-magenta)}[data-color=orange]{--foreground: var(--foreground-spectrum-orange);--background: var(--surface-spectrum-orange)}[data-color=pink]{--foreground: var(--foreground-spectrum-pink);--background: var(--surface-spectrum-pink)}[data-color=purple]{--foreground: var(--foreground-spectrum-purple);--background: var(--surface-spectrum-purple)}[data-color=red]{--foreground: var(--foreground-spectrum-red);--background: var(--surface-spectrum-red)}[data-color=teal]{--foreground: var(--foreground-spectrum-teal);--background: var(--surface-spectrum-teal)}[data-color=yellow]{--foreground: var(--foreground-spectrum-yellow);--background: var(--surface-spectrum-yellow)}*,*::before,*::after{box-sizing:border-box}*{margin:0;padding:0}html:has(body[data-bspk]){height:100%;scroll-behavior:smooth}:root{--z-index-tooltip-popover: 1100;--z-index-dialog: 1000;--z-index-dropdown: 900;--z-index-fab: 800;--z-index-navbar: 700;--z-index-footer: 600}@media(prefers-reduced-motion){[data-animated]{animation:none !important}}body[data-bspk]{height:100%;scroll-behavior:smooth;font:var(--body-base);background-color:var(--background-base);color:var(--foreground-neutral-on-surface)}body[data-bspk] input:-internal-autofill-previewed,body[data-bspk] input:-internal-autofill-selected,body[data-bspk] textarea:-internal-autofill-previewed,body[data-bspk] textarea:-internal-autofill-selected,body[data-bspk] select:-internal-autofill-previewed,body[data-bspk] select:-internal-autofill-selected{transition:color calc(infinity*1s) step-end,background-color calc(infinity*1s) step-end}body[data-bspk] a{color:var(--foreground-link-text-default)}body[data-bspk] a:not([disabled]):hover{color:var(--foreground-link-text-default-hovered)}body[data-bspk] a:not([disabled]):active{color:var(--foreground-link-text-default);filter:brightness(80%)}body[data-bspk] a:not([disabled]):visited{color:var(--foreground-link-text-default-visited)}body[data-bspk] a[disabled]{pointer-events:none;cursor:text;color:var(--foreground-link-text-default-disabled)}body[data-bspk] a[data-default]{color:var(--foreground-link-text-default) !important}body[data-bspk] a[data-hover]{color:var(--foreground-link-text-default-hovered) !important}body[data-bspk] a[data-active]{color:var(--foreground-link-text-default) !important;filter:brightness(80%)}body[data-bspk] a[data-visited]{color:var(--foreground-link-text-default-visited) !important}body[data-bspk] a[data-subtle]{text-decoration:none;color:var(--foreground-neutral-on-surface)}body[data-bspk] a[data-subtle]:not([disabled]):hover{text-decoration:underline;color:var(--foreground-link-text-subtle-hovered)}body[data-bspk] a[data-subtle]:not([disabled]):active{text-decoration:underline;color:var(--foreground-link-text-subtle-pressed)}body[data-bspk] a[data-subtle]:not([disabled]):visited{color:var(--foreground-neutral-on-surface)}body[data-bspk] a[data-subtle][disabled]{pointer-events:none;color:var(--foreground-link-text-subtle-disabled)}body[data-bspk] a[data-subtle][data-default]{text-decoration:none;color:var(--foreground-neutral-on-surface)}body[data-bspk] a[data-subtle][data-hover]{text-decoration:underline;color:var(--foreground-link-text-subtle-hovered) !important}body[data-bspk] a[data-subtle][data-active]{text-decoration:underline;color:var(--foreground-link-text-subtle-pressed) !important}body[data-bspk] a[data-subtle][data-visited]{color:var(--foreground-neutral-on-surface) !important}body[data-bspk] a[data-subtle-inverse]{text-decoration:none;color:var(--foreground-neutral-inverse-on-surface)}body[data-bspk] a[data-subtle-inverse]:not([disabled]):hover{text-decoration:underline;color:var(--foreground-link-text-subtle-inverse-hovered)}body[data-bspk] a[data-subtle-inverse]:not([disabled]):active{text-decoration:underline;color:var(--foreground-link-text-subtle-inverse-pressed)}body[data-bspk] a[data-subtle-inverse]:not([disabled]):visited{color:var(--foreground-neutral-inverse-on-surface)}body[data-bspk] a[data-subtle-inverse][disabled]{pointer-events:none;color:var(--foreground-link-text-subtle-inversed-disabled)}body[data-bspk] a[data-subtle-inverse][data-default]{text-decoration:none;color:var(--foreground-neutral-inverse-on-surface)}body[data-bspk] a[data-subtle-inverse][data-hover]{text-decoration:underline;color:var(--foreground-link-text-subtle-inverse-hovered) !important}body[data-bspk] a[data-subtle-inverse][data-active]{text-decoration:underline;color:var(--foreground-link-text-subtle-inverse-pressed) !important}body[data-bspk] a[data-subtle-inverse][data-visited]{color:var(--foreground-neutral-inverse-on-surface) !important}[data-touch-target]{display:none;touch-action:manipulation;-webkit-tap-highlight-color:rgba(0,0,0,0);-webkit-touch-callout:none;user-select:none;position:absolute;z-index:1;height:100%;width:100%;top:auto;left:auto}[data-sr-only]{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0, 0, 0, 0);white-space:nowrap;border-width:0}[data-touch-target]~*{position:relative;z-index:2}@media(any-pointer: coarse){[data-touch-target]{display:block}}`);;
|
|
5
5
|
/**
|
|
6
6
|
* Utility to provide the Anywhere styles to the application.
|
|
7
7
|
*
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
import { Fragment as _Fragment, jsx as _jsx } from "react/jsx-runtime";
|
|
2
2
|
import '@bspk/styles/better-homes-gardens.css';
|
|
3
3
|
import { styleAdd } from './utils/styleAdd';
|
|
4
|
-
styleAdd(`[data-color=grey]{--foreground: var(--foreground-neutral-on-surface-variant-01);--background: var(--surface-neutral-t2-lowest)}[data-color=white]{--foreground: var(--foreground-neutral-on-surface-variant-01);--background: var(--surface-neutral-t1-base)}[data-color=primary]{--foreground: var(--foreground-brand-primary-depth);--background: var(--surface-brand-primary-highlight)}[data-color=secondary]{--foreground: var(--foreground-brand-secondary-depth);--background: var(--surface-brand-secondary-highlight)}[data-color=blue]{--foreground: var(--foreground-spectrum-blue);--background: var(--surface-spectrum-blue)}[data-color=green]{--foreground: var(--foreground-spectrum-green);--background: var(--surface-spectrum-green)}[data-color=lime]{--foreground: var(--foreground-spectrum-lime);--background: var(--surface-spectrum-lime)}[data-color=magenta]{--foreground: var(--foreground-spectrum-magenta);--background: var(--surface-spectrum-magenta)}[data-color=orange]{--foreground: var(--foreground-spectrum-orange);--background: var(--surface-spectrum-orange)}[data-color=pink]{--foreground: var(--foreground-spectrum-pink);--background: var(--surface-spectrum-pink)}[data-color=purple]{--foreground: var(--foreground-spectrum-purple);--background: var(--surface-spectrum-purple)}[data-color=red]{--foreground: var(--foreground-spectrum-red);--background: var(--surface-spectrum-red)}[data-color=teal]{--foreground: var(--foreground-spectrum-teal);--background: var(--surface-spectrum-teal)}[data-color=yellow]{--foreground: var(--foreground-spectrum-yellow);--background: var(--surface-spectrum-yellow)}*,*::before,*::after{box-sizing:border-box}*{margin:0;padding:0}html:has(body[data-bspk]){height:100%;scroll-behavior:smooth}
|
|
4
|
+
styleAdd(`[data-color=grey]{--foreground: var(--foreground-neutral-on-surface-variant-01);--background: var(--surface-neutral-t2-lowest)}[data-color=white]{--foreground: var(--foreground-neutral-on-surface-variant-01);--background: var(--surface-neutral-t1-base)}[data-color=primary]{--foreground: var(--foreground-brand-primary-depth);--background: var(--surface-brand-primary-highlight)}[data-color=secondary]{--foreground: var(--foreground-brand-secondary-depth);--background: var(--surface-brand-secondary-highlight)}[data-color=blue]{--foreground: var(--foreground-spectrum-blue);--background: var(--surface-spectrum-blue)}[data-color=green]{--foreground: var(--foreground-spectrum-green);--background: var(--surface-spectrum-green)}[data-color=lime]{--foreground: var(--foreground-spectrum-lime);--background: var(--surface-spectrum-lime)}[data-color=magenta]{--foreground: var(--foreground-spectrum-magenta);--background: var(--surface-spectrum-magenta)}[data-color=orange]{--foreground: var(--foreground-spectrum-orange);--background: var(--surface-spectrum-orange)}[data-color=pink]{--foreground: var(--foreground-spectrum-pink);--background: var(--surface-spectrum-pink)}[data-color=purple]{--foreground: var(--foreground-spectrum-purple);--background: var(--surface-spectrum-purple)}[data-color=red]{--foreground: var(--foreground-spectrum-red);--background: var(--surface-spectrum-red)}[data-color=teal]{--foreground: var(--foreground-spectrum-teal);--background: var(--surface-spectrum-teal)}[data-color=yellow]{--foreground: var(--foreground-spectrum-yellow);--background: var(--surface-spectrum-yellow)}*,*::before,*::after{box-sizing:border-box}*{margin:0;padding:0}html:has(body[data-bspk]){height:100%;scroll-behavior:smooth}:root{--z-index-tooltip-popover: 1100;--z-index-dialog: 1000;--z-index-dropdown: 900;--z-index-fab: 800;--z-index-navbar: 700;--z-index-footer: 600}@media(prefers-reduced-motion){[data-animated]{animation:none !important}}body[data-bspk]{height:100%;scroll-behavior:smooth;font:var(--body-base);background-color:var(--background-base);color:var(--foreground-neutral-on-surface)}body[data-bspk] input:-internal-autofill-previewed,body[data-bspk] input:-internal-autofill-selected,body[data-bspk] textarea:-internal-autofill-previewed,body[data-bspk] textarea:-internal-autofill-selected,body[data-bspk] select:-internal-autofill-previewed,body[data-bspk] select:-internal-autofill-selected{transition:color calc(infinity*1s) step-end,background-color calc(infinity*1s) step-end}body[data-bspk] a{color:var(--foreground-link-text-default)}body[data-bspk] a:not([disabled]):hover{color:var(--foreground-link-text-default-hovered)}body[data-bspk] a:not([disabled]):active{color:var(--foreground-link-text-default);filter:brightness(80%)}body[data-bspk] a:not([disabled]):visited{color:var(--foreground-link-text-default-visited)}body[data-bspk] a[disabled]{pointer-events:none;cursor:text;color:var(--foreground-link-text-default-disabled)}body[data-bspk] a[data-default]{color:var(--foreground-link-text-default) !important}body[data-bspk] a[data-hover]{color:var(--foreground-link-text-default-hovered) !important}body[data-bspk] a[data-active]{color:var(--foreground-link-text-default) !important;filter:brightness(80%)}body[data-bspk] a[data-visited]{color:var(--foreground-link-text-default-visited) !important}body[data-bspk] a[data-subtle]{text-decoration:none;color:var(--foreground-neutral-on-surface)}body[data-bspk] a[data-subtle]:not([disabled]):hover{text-decoration:underline;color:var(--foreground-link-text-subtle-hovered)}body[data-bspk] a[data-subtle]:not([disabled]):active{text-decoration:underline;color:var(--foreground-link-text-subtle-pressed)}body[data-bspk] a[data-subtle]:not([disabled]):visited{color:var(--foreground-neutral-on-surface)}body[data-bspk] a[data-subtle][disabled]{pointer-events:none;color:var(--foreground-link-text-subtle-disabled)}body[data-bspk] a[data-subtle][data-default]{text-decoration:none;color:var(--foreground-neutral-on-surface)}body[data-bspk] a[data-subtle][data-hover]{text-decoration:underline;color:var(--foreground-link-text-subtle-hovered) !important}body[data-bspk] a[data-subtle][data-active]{text-decoration:underline;color:var(--foreground-link-text-subtle-pressed) !important}body[data-bspk] a[data-subtle][data-visited]{color:var(--foreground-neutral-on-surface) !important}body[data-bspk] a[data-subtle-inverse]{text-decoration:none;color:var(--foreground-neutral-inverse-on-surface)}body[data-bspk] a[data-subtle-inverse]:not([disabled]):hover{text-decoration:underline;color:var(--foreground-link-text-subtle-inverse-hovered)}body[data-bspk] a[data-subtle-inverse]:not([disabled]):active{text-decoration:underline;color:var(--foreground-link-text-subtle-inverse-pressed)}body[data-bspk] a[data-subtle-inverse]:not([disabled]):visited{color:var(--foreground-neutral-inverse-on-surface)}body[data-bspk] a[data-subtle-inverse][disabled]{pointer-events:none;color:var(--foreground-link-text-subtle-inversed-disabled)}body[data-bspk] a[data-subtle-inverse][data-default]{text-decoration:none;color:var(--foreground-neutral-inverse-on-surface)}body[data-bspk] a[data-subtle-inverse][data-hover]{text-decoration:underline;color:var(--foreground-link-text-subtle-inverse-hovered) !important}body[data-bspk] a[data-subtle-inverse][data-active]{text-decoration:underline;color:var(--foreground-link-text-subtle-inverse-pressed) !important}body[data-bspk] a[data-subtle-inverse][data-visited]{color:var(--foreground-neutral-inverse-on-surface) !important}[data-touch-target]{display:none;touch-action:manipulation;-webkit-tap-highlight-color:rgba(0,0,0,0);-webkit-touch-callout:none;user-select:none;position:absolute;z-index:1;height:100%;width:100%;top:auto;left:auto}[data-sr-only]{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0, 0, 0, 0);white-space:nowrap;border-width:0}[data-touch-target]~*{position:relative;z-index:2}@media(any-pointer: coarse){[data-touch-target]{display:block}}`);;
|
|
5
5
|
/**
|
|
6
6
|
* Utility to provide the Better Homes & Gardens styles to the application.
|
|
7
7
|
*
|