@veeqo/ui 16.3.0 → 16.4.0
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/components/FilterTag/FilterTag.module.scss.cjs +2 -2
- package/dist/components/FilterTag/FilterTag.module.scss.cjs.map +1 -1
- package/dist/components/FilterTag/FilterTag.module.scss.js +2 -2
- package/dist/components/FilterTag/FilterTag.module.scss.js.map +1 -1
- package/dist/components/FilterTag/index.d.ts +1 -0
- package/dist/components/FilterTag/types.d.ts +4 -0
- package/dist/components/Tag/Tag.cjs.map +1 -1
- package/dist/components/Tag/Tag.d.ts +1 -2
- package/dist/components/Tag/Tag.js.map +1 -1
- package/dist/components/Tag/index.d.ts +1 -0
- package/dist/components/index.d.ts +2 -0
- package/package.json +1 -1
|
@@ -2,8 +2,8 @@
|
|
|
2
2
|
|
|
3
3
|
var ___$insertStyle = require('../../_virtual/____insertStyle.cjs');
|
|
4
4
|
|
|
5
|
-
___$insertStyle(".
|
|
6
|
-
var styles = {"container":"
|
|
5
|
+
___$insertStyle("._container_1q3sh_1 {\n display: inline-flex;\n flex-direction: row;\n align-items: center;\n background-color: var(--colors-neutral-grey-base);\n padding: var(--sizes-xs) var(--sizes-sm);\n cursor: pointer;\n border: var(--sizes-line) solid var(--colors-neutral-grey-dark);\n border-radius: var(--radius-base);\n}\n._container_1q3sh_1 svg {\n width: var(--sizes-base);\n height: var(--sizes-base);\n}\n._container_1q3sh_1:hover {\n background-color: var(--colors-neutral-grey-light);\n}\n._container_1q3sh_1:focus-visible {\n outline: var(--sizes-xs) solid var(--colors-secondary-blue-light);\n}\n._container_1q3sh_1:active {\n background-color: var(--colors-neutral-grey-light);\n border-color: var(--colors-secondary-blue-base);\n outline: var(--sizes-xs) solid var(--colors-secondary-blue-light);\n}\n\n._groupLabel_1q3sh_27 {\n margin-right: var(--sizes-xs);\n}\n\n._mainIcon_1q3sh_31 {\n margin-left: var(--sizes-xs);\n transform: rotate(0);\n width: 10px;\n height: 10px;\n}\n\n._rotated_1q3sh_38 {\n transform: rotate(180deg);\n}\n\n._crossIcon_1q3sh_42 {\n margin-left: var(--sizes-xs);\n height: 10px;\n width: 10px;\n}\n\n._content_1q3sh_48 {\n display: flex;\n flex-direction: column;\n justify-content: flex-start;\n align-items: stretch;\n}\n\n._header_1q3sh_55 {\n display: flex;\n flex-direction: row;\n justify-content: flex-start;\n align-items: center;\n padding: var(--sizes-3) 18px;\n border-bottom: var(--sizes-line) solid var(--colors-neutral-grey-base);\n}\n._header_1q3sh_55 svg {\n color: var(--header-color);\n width: var(--sizes-5);\n height: var(--sizes-5);\n margin-right: 10px;\n}");
|
|
6
|
+
var styles = {"container":"_container_1q3sh_1","groupLabel":"_groupLabel_1q3sh_27","mainIcon":"_mainIcon_1q3sh_31","rotated":"_rotated_1q3sh_38","crossIcon":"_crossIcon_1q3sh_42","content":"_content_1q3sh_48","header":"_header_1q3sh_55"};
|
|
7
7
|
|
|
8
8
|
module.exports = styles;
|
|
9
9
|
//# sourceMappingURL=FilterTag.module.scss.cjs.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"FilterTag.module.scss.cjs","sources":["../../../src/components/FilterTag/FilterTag.module.scss"],"sourcesContent":[".container {\n display: inline-flex;\n flex-direction: row;\n align-items: center;\n background-color: var(--colors-neutral-grey-base);\n padding: var(--sizes-xs) var(--sizes-sm);\n cursor: pointer;\n\n border:
|
|
1
|
+
{"version":3,"file":"FilterTag.module.scss.cjs","sources":["../../../src/components/FilterTag/FilterTag.module.scss"],"sourcesContent":[".container {\n display: inline-flex;\n flex-direction: row;\n align-items: center;\n background-color: var(--colors-neutral-grey-base);\n padding: var(--sizes-xs) var(--sizes-sm);\n cursor: pointer;\n\n border: var(--sizes-line) solid var(--colors-neutral-grey-dark);\n border-radius: var(--radius-base);\n\n svg {\n width: var(--sizes-base);\n height: var(--sizes-base);\n }\n\n // Pseudo-states mirror the Action component: lighten on hover, blue outline on\n // focus-visible, and a darker border + outline while active.\n &:hover {\n background-color: var(--colors-neutral-grey-light);\n }\n\n &:focus-visible {\n outline: var(--sizes-xs) solid var(--colors-secondary-blue-light);\n }\n\n &:active {\n background-color: var(--colors-neutral-grey-light);\n border-color: var(--colors-secondary-blue-base);\n outline: var(--sizes-xs) solid var(--colors-secondary-blue-light);\n }\n}\n\n.groupLabel {\n margin-right: var(--sizes-xs);\n}\n\n// Chip glyphs use a fixed 10px size — a bespoke dimension with no matching token.\n.mainIcon {\n margin-left: var(--sizes-xs);\n transform: rotate(0);\n\n width: 10px;\n height: 10px;\n}\n\n.rotated {\n transform: rotate(180deg);\n}\n\n.crossIcon {\n margin-left: var(--sizes-xs);\n height: 10px;\n width: 10px;\n}\n\n.content {\n display: flex;\n flex-direction: column;\n justify-content: flex-start;\n align-items: stretch;\n}\n\n.header {\n display: flex;\n flex-direction: row;\n justify-content: flex-start;\n align-items: center;\n padding: var(--sizes-3) 18px;\n border-bottom: var(--sizes-line) solid var(--colors-neutral-grey-base);\n\n svg {\n color: var(--header-color);\n width: var(--sizes-5);\n height: var(--sizes-5);\n margin-right: 10px;\n }\n}\n"],"names":[],"mappings":";;;;AACE,eAAA,CAAA,mnDAAA;AACA,aAAA,CAAA,WAAA,CAAA,oBAAA,CAAA,YAAA,CAAA,sBAAA,CAAA,UAAA,CAAA,oBAAA,CAAA,SAAA,CAAA,mBAAA,CAAA,WAAA,CAAA,qBAAA,CAAA,SAAA,CAAA,mBAAA,CAAA,QAAA,CAAA,kBAAA;;;;"}
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
import insertStyle from '../../_virtual/____insertStyle.js';
|
|
2
2
|
|
|
3
|
-
insertStyle(".
|
|
4
|
-
var styles = {"container":"
|
|
3
|
+
insertStyle("._container_1q3sh_1 {\n display: inline-flex;\n flex-direction: row;\n align-items: center;\n background-color: var(--colors-neutral-grey-base);\n padding: var(--sizes-xs) var(--sizes-sm);\n cursor: pointer;\n border: var(--sizes-line) solid var(--colors-neutral-grey-dark);\n border-radius: var(--radius-base);\n}\n._container_1q3sh_1 svg {\n width: var(--sizes-base);\n height: var(--sizes-base);\n}\n._container_1q3sh_1:hover {\n background-color: var(--colors-neutral-grey-light);\n}\n._container_1q3sh_1:focus-visible {\n outline: var(--sizes-xs) solid var(--colors-secondary-blue-light);\n}\n._container_1q3sh_1:active {\n background-color: var(--colors-neutral-grey-light);\n border-color: var(--colors-secondary-blue-base);\n outline: var(--sizes-xs) solid var(--colors-secondary-blue-light);\n}\n\n._groupLabel_1q3sh_27 {\n margin-right: var(--sizes-xs);\n}\n\n._mainIcon_1q3sh_31 {\n margin-left: var(--sizes-xs);\n transform: rotate(0);\n width: 10px;\n height: 10px;\n}\n\n._rotated_1q3sh_38 {\n transform: rotate(180deg);\n}\n\n._crossIcon_1q3sh_42 {\n margin-left: var(--sizes-xs);\n height: 10px;\n width: 10px;\n}\n\n._content_1q3sh_48 {\n display: flex;\n flex-direction: column;\n justify-content: flex-start;\n align-items: stretch;\n}\n\n._header_1q3sh_55 {\n display: flex;\n flex-direction: row;\n justify-content: flex-start;\n align-items: center;\n padding: var(--sizes-3) 18px;\n border-bottom: var(--sizes-line) solid var(--colors-neutral-grey-base);\n}\n._header_1q3sh_55 svg {\n color: var(--header-color);\n width: var(--sizes-5);\n height: var(--sizes-5);\n margin-right: 10px;\n}");
|
|
4
|
+
var styles = {"container":"_container_1q3sh_1","groupLabel":"_groupLabel_1q3sh_27","mainIcon":"_mainIcon_1q3sh_31","rotated":"_rotated_1q3sh_38","crossIcon":"_crossIcon_1q3sh_42","content":"_content_1q3sh_48","header":"_header_1q3sh_55"};
|
|
5
5
|
|
|
6
6
|
export { styles as default };
|
|
7
7
|
//# sourceMappingURL=FilterTag.module.scss.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"FilterTag.module.scss.js","sources":["../../../src/components/FilterTag/FilterTag.module.scss"],"sourcesContent":[".container {\n display: inline-flex;\n flex-direction: row;\n align-items: center;\n background-color: var(--colors-neutral-grey-base);\n padding: var(--sizes-xs) var(--sizes-sm);\n cursor: pointer;\n\n border:
|
|
1
|
+
{"version":3,"file":"FilterTag.module.scss.js","sources":["../../../src/components/FilterTag/FilterTag.module.scss"],"sourcesContent":[".container {\n display: inline-flex;\n flex-direction: row;\n align-items: center;\n background-color: var(--colors-neutral-grey-base);\n padding: var(--sizes-xs) var(--sizes-sm);\n cursor: pointer;\n\n border: var(--sizes-line) solid var(--colors-neutral-grey-dark);\n border-radius: var(--radius-base);\n\n svg {\n width: var(--sizes-base);\n height: var(--sizes-base);\n }\n\n // Pseudo-states mirror the Action component: lighten on hover, blue outline on\n // focus-visible, and a darker border + outline while active.\n &:hover {\n background-color: var(--colors-neutral-grey-light);\n }\n\n &:focus-visible {\n outline: var(--sizes-xs) solid var(--colors-secondary-blue-light);\n }\n\n &:active {\n background-color: var(--colors-neutral-grey-light);\n border-color: var(--colors-secondary-blue-base);\n outline: var(--sizes-xs) solid var(--colors-secondary-blue-light);\n }\n}\n\n.groupLabel {\n margin-right: var(--sizes-xs);\n}\n\n// Chip glyphs use a fixed 10px size — a bespoke dimension with no matching token.\n.mainIcon {\n margin-left: var(--sizes-xs);\n transform: rotate(0);\n\n width: 10px;\n height: 10px;\n}\n\n.rotated {\n transform: rotate(180deg);\n}\n\n.crossIcon {\n margin-left: var(--sizes-xs);\n height: 10px;\n width: 10px;\n}\n\n.content {\n display: flex;\n flex-direction: column;\n justify-content: flex-start;\n align-items: stretch;\n}\n\n.header {\n display: flex;\n flex-direction: row;\n justify-content: flex-start;\n align-items: center;\n padding: var(--sizes-3) 18px;\n border-bottom: var(--sizes-line) solid var(--colors-neutral-grey-base);\n\n svg {\n color: var(--header-color);\n width: var(--sizes-5);\n height: var(--sizes-5);\n margin-right: 10px;\n }\n}\n"],"names":["___$insertStyle"],"mappings":";;AACEA,WAAA,CAAA,mnDAAA;AACA,aAAA,CAAA,WAAA,CAAA,oBAAA,CAAA,YAAA,CAAA,sBAAA,CAAA,UAAA,CAAA,oBAAA,CAAA,SAAA,CAAA,mBAAA,CAAA,WAAA,CAAA,qBAAA,CAAA,SAAA,CAAA,mBAAA,CAAA,QAAA,CAAA,kBAAA;;;;"}
|
|
@@ -1,6 +1,8 @@
|
|
|
1
1
|
import { ReactNode, ReactElement } from 'react';
|
|
2
2
|
export interface FilterTagProps {
|
|
3
|
+
/** Prefix for hook class names emitted on the chip and dropdown DOM. */
|
|
3
4
|
className?: string;
|
|
5
|
+
/** Prefix for hook class names (test selectors) emitted on the chip and dropdown DOM. */
|
|
4
6
|
e2eClassName?: string;
|
|
5
7
|
iconSlot?: ReactElement;
|
|
6
8
|
label?: string;
|
|
@@ -9,7 +11,9 @@ export interface FilterTagProps {
|
|
|
9
11
|
content?: ReactNode;
|
|
10
12
|
footer?: ReactNode;
|
|
11
13
|
header?: ReactNode;
|
|
14
|
+
/** Called when an open dropdown is dismissed: `(event, closeDropdown)` on an outside press, or `(event)` only when the trigger closes it. Not called on Escape. */
|
|
12
15
|
onClickAway?: (event: Event, closeDropdown?: () => void) => void;
|
|
16
|
+
/** Handler for the simple chip only (no `content`). */
|
|
13
17
|
onClick?: () => void;
|
|
14
18
|
shouldCloseOnClickAway?: boolean;
|
|
15
19
|
}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Tag.cjs","sources":["../../../src/components/Tag/Tag.tsx"],"sourcesContent":["import React from 'react';\n\nimport { theme } from 'Theme';\nimport { assignCssVars, buildClassnames } from '../../utils';\nimport { FlexRow } from '../Flex/FlexRow';\nimport { FlexProps } from '../Flex/types';\nimport { Text } from '../Text';\n\nimport styles from './Tag.module.scss';\n\
|
|
1
|
+
{"version":3,"file":"Tag.cjs","sources":["../../../src/components/Tag/Tag.tsx"],"sourcesContent":["import React from 'react';\n\nimport { theme } from 'Theme';\nimport { assignCssVars, buildClassnames } from '../../utils';\nimport { FlexRow } from '../Flex/FlexRow';\nimport { FlexProps } from '../Flex/types';\nimport { Text } from '../Text';\n\nimport styles from './Tag.module.scss';\n\nexport type TagProps = Omit<FlexProps, 'color'> & {\n backgroundColor?: string;\n textColor?: string;\n label?: string;\n compact?: boolean;\n leftIconSlot?: React.ReactNode;\n rightIconSlot?: React.ReactNode;\n};\n\nexport const Tag = ({\n className,\n backgroundColor = theme.colors.neutral.grey.base,\n textColor,\n children,\n label,\n compact = false,\n leftIconSlot,\n rightIconSlot,\n ...otherProps\n}: TagProps) => (\n <FlexRow\n flexWrap=\"nowrap\"\n justifyContent=\"center\"\n gap=\"xs\"\n className={buildClassnames([styles.tag, compact && styles.compact, className])}\n style={{ ...assignCssVars({ customTextColor: textColor }), backgroundColor }}\n {...otherProps}\n >\n {leftIconSlot}\n {children || <Text variant=\"body\">{label}</Text>}\n {rightIconSlot}\n </FlexRow>\n);\n"],"names":["theme","React","FlexRow","buildClassnames","styles","assignCssVars","Text"],"mappings":";;;;;;;;;;;;;;;AAmBO,MAAM,GAAG,GAAG,CAAC,EAClB,SAAS,EACT,eAAe,GAAGA,WAAK,CAAC,MAAM,CAAC,OAAO,CAAC,IAAI,CAAC,IAAI,EAChD,SAAS,EACT,QAAQ,EACR,KAAK,EACL,OAAO,GAAG,KAAK,EACf,YAAY,EACZ,aAAa,EACb,GAAG,UAAU,EACJ,MACTC,sBAAA,CAAA,aAAA,CAACC,eAAO,EAAA,EACN,QAAQ,EAAC,QAAQ,EACjB,cAAc,EAAC,QAAQ,EACvB,GAAG,EAAC,IAAI,EACR,SAAS,EAAEC,+BAAe,CAAC,CAACC,UAAM,CAAC,GAAG,EAAE,OAAO,IAAIA,UAAM,CAAC,OAAO,EAAE,SAAS,CAAC,CAAC,EAC9E,KAAK,EAAE,EAAE,GAAGC,2BAAa,CAAC,EAAE,eAAe,EAAE,SAAS,EAAE,CAAC,EAAE,eAAe,EAAE,KACxE,UAAU,EAAA;IAEb,YAAY;IACZ,QAAQ,IAAIJ,qCAACK,SAAI,EAAA,EAAC,OAAO,EAAC,MAAM,EAAA,EAAE,KAAK,CAAQ;IAC/C,aAAa,CACN;;;;"}
|
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
import React from 'react';
|
|
2
2
|
import { FlexProps } from '../Flex/types';
|
|
3
|
-
type TagProps = Omit<FlexProps, 'color'> & {
|
|
3
|
+
export type TagProps = Omit<FlexProps, 'color'> & {
|
|
4
4
|
backgroundColor?: string;
|
|
5
5
|
textColor?: string;
|
|
6
6
|
label?: string;
|
|
@@ -9,4 +9,3 @@ type TagProps = Omit<FlexProps, 'color'> & {
|
|
|
9
9
|
rightIconSlot?: React.ReactNode;
|
|
10
10
|
};
|
|
11
11
|
export declare const Tag: ({ className, backgroundColor, textColor, children, label, compact, leftIconSlot, rightIconSlot, ...otherProps }: TagProps) => React.JSX.Element;
|
|
12
|
-
export {};
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Tag.js","sources":["../../../src/components/Tag/Tag.tsx"],"sourcesContent":["import React from 'react';\n\nimport { theme } from 'Theme';\nimport { assignCssVars, buildClassnames } from '../../utils';\nimport { FlexRow } from '../Flex/FlexRow';\nimport { FlexProps } from '../Flex/types';\nimport { Text } from '../Text';\n\nimport styles from './Tag.module.scss';\n\
|
|
1
|
+
{"version":3,"file":"Tag.js","sources":["../../../src/components/Tag/Tag.tsx"],"sourcesContent":["import React from 'react';\n\nimport { theme } from 'Theme';\nimport { assignCssVars, buildClassnames } from '../../utils';\nimport { FlexRow } from '../Flex/FlexRow';\nimport { FlexProps } from '../Flex/types';\nimport { Text } from '../Text';\n\nimport styles from './Tag.module.scss';\n\nexport type TagProps = Omit<FlexProps, 'color'> & {\n backgroundColor?: string;\n textColor?: string;\n label?: string;\n compact?: boolean;\n leftIconSlot?: React.ReactNode;\n rightIconSlot?: React.ReactNode;\n};\n\nexport const Tag = ({\n className,\n backgroundColor = theme.colors.neutral.grey.base,\n textColor,\n children,\n label,\n compact = false,\n leftIconSlot,\n rightIconSlot,\n ...otherProps\n}: TagProps) => (\n <FlexRow\n flexWrap=\"nowrap\"\n justifyContent=\"center\"\n gap=\"xs\"\n className={buildClassnames([styles.tag, compact && styles.compact, className])}\n style={{ ...assignCssVars({ customTextColor: textColor }), backgroundColor }}\n {...otherProps}\n >\n {leftIconSlot}\n {children || <Text variant=\"body\">{label}</Text>}\n {rightIconSlot}\n </FlexRow>\n);\n"],"names":["React"],"mappings":";;;;;;;;;AAmBO,MAAM,GAAG,GAAG,CAAC,EAClB,SAAS,EACT,eAAe,GAAG,KAAK,CAAC,MAAM,CAAC,OAAO,CAAC,IAAI,CAAC,IAAI,EAChD,SAAS,EACT,QAAQ,EACR,KAAK,EACL,OAAO,GAAG,KAAK,EACf,YAAY,EACZ,aAAa,EACb,GAAG,UAAU,EACJ,MACTA,cAAA,CAAA,aAAA,CAAC,OAAO,EAAA,EACN,QAAQ,EAAC,QAAQ,EACjB,cAAc,EAAC,QAAQ,EACvB,GAAG,EAAC,IAAI,EACR,SAAS,EAAE,eAAe,CAAC,CAAC,MAAM,CAAC,GAAG,EAAE,OAAO,IAAI,MAAM,CAAC,OAAO,EAAE,SAAS,CAAC,CAAC,EAC9E,KAAK,EAAE,EAAE,GAAG,aAAa,CAAC,EAAE,eAAe,EAAE,SAAS,EAAE,CAAC,EAAE,eAAe,EAAE,KACxE,UAAU,EAAA;IAEb,YAAY;IACZ,QAAQ,IAAIA,6BAAC,IAAI,EAAA,EAAC,OAAO,EAAC,MAAM,EAAA,EAAE,KAAK,CAAQ;IAC/C,aAAa,CACN;;;;"}
|
|
@@ -34,6 +34,7 @@ export { Divider, type DividerProps } from './Divider';
|
|
|
34
34
|
export { Dropdown } from './Dropdown';
|
|
35
35
|
export { FeatureBanner, type FeatureBannerProps } from './FeatureBanner';
|
|
36
36
|
export { FilterTag } from './FilterTag';
|
|
37
|
+
export type { FilterTagProps } from './FilterTag';
|
|
37
38
|
export { Grid } from './Grid';
|
|
38
39
|
export { Image } from './Image';
|
|
39
40
|
export type { ImageProps } from './Image';
|
|
@@ -63,6 +64,7 @@ export { Stack, type StackProps } from './Stack';
|
|
|
63
64
|
export { Stepper } from './Stepper';
|
|
64
65
|
export { SystemBanner, type SystemBannerProps, type SystemBannerVariant } from './SystemBanner';
|
|
65
66
|
export { Tag } from './Tag';
|
|
67
|
+
export type { TagProps } from './Tag';
|
|
66
68
|
export { Text } from './Text';
|
|
67
69
|
export type { TextProps, TextVariant, ValidTextTag } from './Text';
|
|
68
70
|
export { TextField, type TextFieldType } from './TextField';
|