@ankhorage/zora 1.0.4 → 1.0.5
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/CHANGELOG.md +6 -0
- package/README.md +214 -5
- package/dist/components/avatar/Avatar.d.ts +4 -0
- package/dist/components/avatar/Avatar.d.ts.map +1 -0
- package/dist/components/avatar/Avatar.js +80 -0
- package/dist/components/avatar/Avatar.js.map +1 -0
- package/dist/components/avatar/index.d.ts +4 -0
- package/dist/components/avatar/index.d.ts.map +1 -0
- package/dist/components/avatar/index.js +3 -0
- package/dist/components/avatar/index.js.map +1 -0
- package/dist/components/avatar/resolveAvatarInitials.d.ts +2 -0
- package/dist/components/avatar/resolveAvatarInitials.d.ts.map +1 -0
- package/dist/components/avatar/resolveAvatarInitials.js +44 -0
- package/dist/components/avatar/resolveAvatarInitials.js.map +1 -0
- package/dist/components/avatar/types.d.ts +17 -0
- package/dist/components/avatar/types.d.ts.map +1 -0
- package/dist/components/avatar/types.js +2 -0
- package/dist/components/avatar/types.js.map +1 -0
- package/dist/components/avatar-group/AvatarGroup.d.ts +4 -0
- package/dist/components/avatar-group/AvatarGroup.d.ts.map +1 -0
- package/dist/components/avatar-group/AvatarGroup.js +26 -0
- package/dist/components/avatar-group/AvatarGroup.js.map +1 -0
- package/dist/components/avatar-group/index.d.ts +3 -0
- package/dist/components/avatar-group/index.d.ts.map +1 -0
- package/dist/components/avatar-group/index.js +2 -0
- package/dist/components/avatar-group/index.js.map +1 -0
- package/dist/components/avatar-group/types.d.ts +22 -0
- package/dist/components/avatar-group/types.d.ts.map +1 -0
- package/dist/components/avatar-group/types.js +2 -0
- package/dist/components/avatar-group/types.js.map +1 -0
- package/dist/components/chip/Chip.d.ts +4 -0
- package/dist/components/chip/Chip.d.ts.map +1 -0
- package/dist/components/chip/Chip.js +54 -0
- package/dist/components/chip/Chip.js.map +1 -0
- package/dist/components/chip/index.d.ts +3 -0
- package/dist/components/chip/index.d.ts.map +1 -0
- package/dist/components/chip/index.js +2 -0
- package/dist/components/chip/index.js.map +1 -0
- package/dist/components/chip/resolveChipColors.d.ts +10 -0
- package/dist/components/chip/resolveChipColors.d.ts.map +1 -0
- package/dist/components/chip/resolveChipColors.js +47 -0
- package/dist/components/chip/resolveChipColors.js.map +1 -0
- package/dist/components/chip/types.d.ts +26 -0
- package/dist/components/chip/types.d.ts.map +1 -0
- package/dist/components/chip/types.js +2 -0
- package/dist/components/chip/types.js.map +1 -0
- package/dist/components/chip-group/ChipGroup.d.ts +4 -0
- package/dist/components/chip-group/ChipGroup.d.ts.map +1 -0
- package/dist/components/chip-group/ChipGroup.js +32 -0
- package/dist/components/chip-group/ChipGroup.js.map +1 -0
- package/dist/components/chip-group/index.d.ts +3 -0
- package/dist/components/chip-group/index.d.ts.map +1 -0
- package/dist/components/chip-group/index.js +2 -0
- package/dist/components/chip-group/index.js.map +1 -0
- package/dist/components/chip-group/types.d.ts +31 -0
- package/dist/components/chip-group/types.d.ts.map +1 -0
- package/dist/components/chip-group/types.js +2 -0
- package/dist/components/chip-group/types.js.map +1 -0
- package/dist/components/input/Input.d.ts.map +1 -1
- package/dist/components/input/Input.js +3 -2
- package/dist/components/input/Input.js.map +1 -1
- package/dist/components/input/index.d.ts +1 -1
- package/dist/components/input/index.d.ts.map +1 -1
- package/dist/components/input/index.js.map +1 -1
- package/dist/components/input/types.d.ts +15 -2
- package/dist/components/input/types.d.ts.map +1 -1
- package/dist/components/input/types.js.map +1 -1
- package/dist/components/search-bar/SearchBar.d.ts +4 -0
- package/dist/components/search-bar/SearchBar.d.ts.map +1 -0
- package/dist/components/search-bar/SearchBar.js +18 -0
- package/dist/components/search-bar/SearchBar.js.map +1 -0
- package/dist/components/search-bar/index.d.ts +3 -0
- package/dist/components/search-bar/index.d.ts.map +1 -0
- package/dist/components/search-bar/index.js +2 -0
- package/dist/components/search-bar/index.js.map +1 -0
- package/dist/components/search-bar/types.d.ts +14 -0
- package/dist/components/search-bar/types.d.ts.map +1 -0
- package/dist/components/search-bar/types.js +2 -0
- package/dist/components/search-bar/types.js.map +1 -0
- package/dist/index.d.ts +13 -1
- package/dist/index.d.ts.map +1 -1
- package/dist/index.js +6 -0
- package/dist/index.js.map +1 -1
- package/dist/patterns/filter-bar/FilterBar.d.ts +4 -0
- package/dist/patterns/filter-bar/FilterBar.d.ts.map +1 -0
- package/dist/patterns/filter-bar/FilterBar.js +12 -0
- package/dist/patterns/filter-bar/FilterBar.js.map +1 -0
- package/dist/patterns/filter-bar/index.d.ts +3 -0
- package/dist/patterns/filter-bar/index.d.ts.map +1 -0
- package/dist/patterns/filter-bar/index.js +2 -0
- package/dist/patterns/filter-bar/index.js.map +1 -0
- package/dist/patterns/filter-bar/types.d.ts +9 -0
- package/dist/patterns/filter-bar/types.d.ts.map +1 -0
- package/dist/patterns/filter-bar/types.js +2 -0
- package/dist/patterns/filter-bar/types.js.map +1 -0
- package/package.json +1 -1
- package/src/components/avatar/Avatar.tsx +133 -0
- package/src/components/avatar/index.ts +3 -0
- package/src/components/avatar/resolveAvatarInitials.test.ts +27 -0
- package/src/components/avatar/resolveAvatarInitials.ts +46 -0
- package/src/components/avatar/types.ts +20 -0
- package/src/components/avatar-group/AvatarGroup.tsx +74 -0
- package/src/components/avatar-group/index.ts +2 -0
- package/src/components/avatar-group/types.ts +24 -0
- package/src/components/chip/Chip.tsx +95 -0
- package/src/components/chip/index.ts +2 -0
- package/src/components/chip/resolveChipColors.ts +65 -0
- package/src/components/chip/types.ts +29 -0
- package/src/components/chip-group/ChipGroup.tsx +66 -0
- package/src/components/chip-group/index.ts +2 -0
- package/src/components/chip-group/types.ts +36 -0
- package/src/components/input/Input.tsx +17 -1
- package/src/components/input/index.ts +1 -1
- package/src/components/input/types.ts +19 -2
- package/src/components/search-bar/SearchBar.tsx +50 -0
- package/src/components/search-bar/index.ts +2 -0
- package/src/components/search-bar/types.ts +14 -0
- package/src/index.ts +13 -1
- package/src/patterns/filter-bar/FilterBar.tsx +25 -0
- package/src/patterns/filter-bar/index.ts +2 -0
- package/src/patterns/filter-bar/types.ts +10 -0
- package/src/showcaseCoverage.test.ts +6 -0
|
@@ -0,0 +1,54 @@
|
|
|
1
|
+
import { ButtonBase } from '@ankhorage/surface';
|
|
2
|
+
import React from 'react';
|
|
3
|
+
import { Box, Inline } from '../../foundation';
|
|
4
|
+
import { resolveIconSize } from '../../internal/recipes';
|
|
5
|
+
import { useZoraTheme } from '../../theme/useZoraTheme';
|
|
6
|
+
import { withZoraThemeScope } from '../../theme/withZoraThemeScope';
|
|
7
|
+
import { Icon } from '../icon';
|
|
8
|
+
import { Text } from '../text';
|
|
9
|
+
import { resolveChipColors } from './resolveChipColors';
|
|
10
|
+
function resolveChipPadding(size) {
|
|
11
|
+
switch (size) {
|
|
12
|
+
case 's':
|
|
13
|
+
return { px: 's', py: 'xxs' };
|
|
14
|
+
case 'm':
|
|
15
|
+
return { px: 'm', py: 'xs' };
|
|
16
|
+
case 'l':
|
|
17
|
+
default:
|
|
18
|
+
return { px: 'm', py: 'xs' };
|
|
19
|
+
}
|
|
20
|
+
}
|
|
21
|
+
function ChipInner({ themeId: _themeId, mode: _mode, testID, children, icon, selected = false, disabled = false, tone = 'neutral', size = 's', onPress, }) {
|
|
22
|
+
const { theme } = useZoraTheme();
|
|
23
|
+
const padding = resolveChipPadding(size);
|
|
24
|
+
const iconSize = resolveIconSize(size);
|
|
25
|
+
const renderContent = (state) => {
|
|
26
|
+
const colors = resolveChipColors({ theme, tone, selected, state });
|
|
27
|
+
const textTone = state.disabled
|
|
28
|
+
? 'muted'
|
|
29
|
+
: selected
|
|
30
|
+
? tone === 'neutral'
|
|
31
|
+
? 'default'
|
|
32
|
+
: tone
|
|
33
|
+
: 'default';
|
|
34
|
+
return (<Box bg={colors.backgroundColor} borderColor={colors.borderColor} borderWidth={1} px={padding.px} py={padding.py} radius="full" style={{
|
|
35
|
+
alignSelf: 'flex-start',
|
|
36
|
+
opacity: colors.opacity,
|
|
37
|
+
}}>
|
|
38
|
+
<Inline align="center" gap="xs" wrap="nowrap">
|
|
39
|
+
{icon ? (<Icon color={colors.contentColor} name={icon.name} provider={icon.provider} size={iconSize}/>) : null}
|
|
40
|
+
<Text tone={textTone} variant="label">
|
|
41
|
+
{children}
|
|
42
|
+
</Text>
|
|
43
|
+
</Inline>
|
|
44
|
+
</Box>);
|
|
45
|
+
};
|
|
46
|
+
if (!onPress) {
|
|
47
|
+
return renderContent({ disabled, focused: false, hovered: false, pressed: false });
|
|
48
|
+
}
|
|
49
|
+
return (<ButtonBase disabled={disabled} onPress={onPress} radius="full" testID={testID}>
|
|
50
|
+
{(state) => renderContent(state)}
|
|
51
|
+
</ButtonBase>);
|
|
52
|
+
}
|
|
53
|
+
export const Chip = withZoraThemeScope(ChipInner);
|
|
54
|
+
//# sourceMappingURL=Chip.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"Chip.js","sourceRoot":"","sources":["../../../src/components/chip/Chip.tsx"],"names":[],"mappings":"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","sourcesContent":["import { ButtonBase } from '@ankhorage/surface';\nimport React from 'react';\n\nimport { Box, Inline } from '../../foundation';\nimport { resolveIconSize } from '../../internal/recipes';\nimport { useZoraTheme } from '../../theme/useZoraTheme';\nimport { withZoraThemeScope } from '../../theme/withZoraThemeScope';\nimport { Icon } from '../icon';\nimport { Text } from '../text';\nimport { resolveChipColors } from './resolveChipColors';\nimport type { ChipInteractionState, ChipProps } from './types';\n\nfunction resolveChipPadding(size: NonNullable<ChipProps['size']>): {\n px: 's' | 'm';\n py: 'xxs' | 'xs';\n} {\n switch (size) {\n case 's':\n return { px: 's', py: 'xxs' };\n case 'm':\n return { px: 'm', py: 'xs' };\n case 'l':\n default:\n return { px: 'm', py: 'xs' };\n }\n}\n\nfunction ChipInner({\n themeId: _themeId,\n mode: _mode,\n testID,\n children,\n icon,\n selected = false,\n disabled = false,\n tone = 'neutral',\n size = 's',\n onPress,\n}: ChipProps) {\n const { theme } = useZoraTheme();\n const padding = resolveChipPadding(size);\n const iconSize = resolveIconSize(size);\n\n const renderContent = (state: ChipInteractionState) => {\n const colors = resolveChipColors({ theme, tone, selected, state });\n const textTone = state.disabled\n ? 'muted'\n : selected\n ? tone === 'neutral'\n ? 'default'\n : tone\n : 'default';\n\n return (\n <Box\n bg={colors.backgroundColor}\n borderColor={colors.borderColor}\n borderWidth={1}\n px={padding.px}\n py={padding.py}\n radius=\"full\"\n style={{\n alignSelf: 'flex-start',\n opacity: colors.opacity,\n }}\n >\n <Inline align=\"center\" gap=\"xs\" wrap=\"nowrap\">\n {icon ? (\n <Icon\n color={colors.contentColor}\n name={icon.name}\n provider={icon.provider}\n size={iconSize}\n />\n ) : null}\n <Text tone={textTone} variant=\"label\">\n {children}\n </Text>\n </Inline>\n </Box>\n );\n };\n\n if (!onPress) {\n return renderContent({ disabled, focused: false, hovered: false, pressed: false });\n }\n\n return (\n <ButtonBase disabled={disabled} onPress={onPress} radius=\"full\" testID={testID}>\n {(state) => renderContent(state)}\n </ButtonBase>\n );\n}\n\nexport const Chip = withZoraThemeScope(ChipInner);\n"]}
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/chip/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,IAAI,EAAE,MAAM,QAAQ,CAAC;AAC9B,YAAY,EAAE,SAAS,EAAE,MAAM,SAAS,CAAC"}
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../src/components/chip/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,IAAI,EAAE,MAAM,QAAQ,CAAC","sourcesContent":["export { Chip } from './Chip';\nexport type { ChipProps } from './types';\n"]}
|
|
@@ -0,0 +1,10 @@
|
|
|
1
|
+
import type { SurfaceTheme } from '@ankhorage/surface';
|
|
2
|
+
import type { ZoraTone } from '../../internal/recipes';
|
|
3
|
+
import type { ChipColors, ChipInteractionState } from './types';
|
|
4
|
+
export declare function resolveChipColors({ theme, tone, selected, state, }: {
|
|
5
|
+
theme: SurfaceTheme;
|
|
6
|
+
tone: ZoraTone;
|
|
7
|
+
selected: boolean;
|
|
8
|
+
state: ChipInteractionState;
|
|
9
|
+
}): ChipColors;
|
|
10
|
+
//# sourceMappingURL=resolveChipColors.d.ts.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"resolveChipColors.d.ts","sourceRoot":"","sources":["../../../src/components/chip/resolveChipColors.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAiB,YAAY,EAAE,MAAM,oBAAoB,CAAC;AAEtE,OAAO,KAAK,EAAE,QAAQ,EAAE,MAAM,wBAAwB,CAAC;AACvD,OAAO,KAAK,EAAE,UAAU,EAAE,oBAAoB,EAAE,MAAM,SAAS,CAAC;AAkBhE,wBAAgB,iBAAiB,CAAC,EAChC,KAAK,EACL,IAAI,EACJ,QAAQ,EACR,KAAK,GACN,EAAE;IACD,KAAK,EAAE,YAAY,CAAC;IACpB,IAAI,EAAE,QAAQ,CAAC;IACf,QAAQ,EAAE,OAAO,CAAC;IAClB,KAAK,EAAE,oBAAoB,CAAC;CAC7B,GAAG,UAAU,CAiCb"}
|
|
@@ -0,0 +1,47 @@
|
|
|
1
|
+
function resolveChipRole(theme, tone) {
|
|
2
|
+
switch (tone) {
|
|
3
|
+
case 'primary':
|
|
4
|
+
return theme.semantics.action.primary;
|
|
5
|
+
case 'danger':
|
|
6
|
+
return theme.semantics.action.danger;
|
|
7
|
+
case 'success':
|
|
8
|
+
return theme.semantics.success;
|
|
9
|
+
case 'warning':
|
|
10
|
+
return theme.semantics.warning;
|
|
11
|
+
case 'neutral':
|
|
12
|
+
default:
|
|
13
|
+
return theme.semantics.action.neutral;
|
|
14
|
+
}
|
|
15
|
+
}
|
|
16
|
+
export function resolveChipColors({ theme, tone, selected, state, }) {
|
|
17
|
+
if (state.disabled) {
|
|
18
|
+
return {
|
|
19
|
+
backgroundColor: theme.semantics.neutral.surface,
|
|
20
|
+
borderColor: theme.semantics.neutral.divider,
|
|
21
|
+
contentColor: theme.semantics.content.muted,
|
|
22
|
+
opacity: 0.72,
|
|
23
|
+
};
|
|
24
|
+
}
|
|
25
|
+
const role = resolveChipRole(theme, tone);
|
|
26
|
+
if (selected) {
|
|
27
|
+
return {
|
|
28
|
+
backgroundColor: state.pressed
|
|
29
|
+
? role.softActive
|
|
30
|
+
: state.hovered
|
|
31
|
+
? role.softHover
|
|
32
|
+
: role.softBg,
|
|
33
|
+
borderColor: 'transparent',
|
|
34
|
+
contentColor: role.base,
|
|
35
|
+
};
|
|
36
|
+
}
|
|
37
|
+
return {
|
|
38
|
+
backgroundColor: state.pressed
|
|
39
|
+
? theme.semantics.neutral.surfaceActive
|
|
40
|
+
: state.hovered
|
|
41
|
+
? theme.semantics.neutral.surfaceHover
|
|
42
|
+
: theme.semantics.neutral.surface,
|
|
43
|
+
borderColor: theme.semantics.neutral.divider,
|
|
44
|
+
contentColor: theme.semantics.content.default,
|
|
45
|
+
};
|
|
46
|
+
}
|
|
47
|
+
//# sourceMappingURL=resolveChipColors.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"resolveChipColors.js","sourceRoot":"","sources":["../../../src/components/chip/resolveChipColors.ts"],"names":[],"mappings":"AAKA,SAAS,eAAe,CAAC,KAAmB,EAAE,IAAc;IAC1D,QAAQ,IAAI,EAAE,CAAC;QACb,KAAK,SAAS;YACZ,OAAO,KAAK,CAAC,SAAS,CAAC,MAAM,CAAC,OAAO,CAAC;QACxC,KAAK,QAAQ;YACX,OAAO,KAAK,CAAC,SAAS,CAAC,MAAM,CAAC,MAAM,CAAC;QACvC,KAAK,SAAS;YACZ,OAAO,KAAK,CAAC,SAAS,CAAC,OAAO,CAAC;QACjC,KAAK,SAAS;YACZ,OAAO,KAAK,CAAC,SAAS,CAAC,OAAO,CAAC;QACjC,KAAK,SAAS,CAAC;QACf;YACE,OAAO,KAAK,CAAC,SAAS,CAAC,MAAM,CAAC,OAAO,CAAC;IAC1C,CAAC;AACH,CAAC;AAED,MAAM,UAAU,iBAAiB,CAAC,EAChC,KAAK,EACL,IAAI,EACJ,QAAQ,EACR,KAAK,GAMN;IACC,IAAI,KAAK,CAAC,QAAQ,EAAE,CAAC;QACnB,OAAO;YACL,eAAe,EAAE,KAAK,CAAC,SAAS,CAAC,OAAO,CAAC,OAAO;YAChD,WAAW,EAAE,KAAK,CAAC,SAAS,CAAC,OAAO,CAAC,OAAO;YAC5C,YAAY,EAAE,KAAK,CAAC,SAAS,CAAC,OAAO,CAAC,KAAK;YAC3C,OAAO,EAAE,IAAI;SACd,CAAC;IACJ,CAAC;IAED,MAAM,IAAI,GAAG,eAAe,CAAC,KAAK,EAAE,IAAI,CAAC,CAAC;IAE1C,IAAI,QAAQ,EAAE,CAAC;QACb,OAAO;YACL,eAAe,EAAE,KAAK,CAAC,OAAO;gBAC5B,CAAC,CAAC,IAAI,CAAC,UAAU;gBACjB,CAAC,CAAC,KAAK,CAAC,OAAO;oBACb,CAAC,CAAC,IAAI,CAAC,SAAS;oBAChB,CAAC,CAAC,IAAI,CAAC,MAAM;YACjB,WAAW,EAAE,aAAa;YAC1B,YAAY,EAAE,IAAI,CAAC,IAAI;SACxB,CAAC;IACJ,CAAC;IAED,OAAO;QACL,eAAe,EAAE,KAAK,CAAC,OAAO;YAC5B,CAAC,CAAC,KAAK,CAAC,SAAS,CAAC,OAAO,CAAC,aAAa;YACvC,CAAC,CAAC,KAAK,CAAC,OAAO;gBACb,CAAC,CAAC,KAAK,CAAC,SAAS,CAAC,OAAO,CAAC,YAAY;gBACtC,CAAC,CAAC,KAAK,CAAC,SAAS,CAAC,OAAO,CAAC,OAAO;QACrC,WAAW,EAAE,KAAK,CAAC,SAAS,CAAC,OAAO,CAAC,OAAO;QAC5C,YAAY,EAAE,KAAK,CAAC,SAAS,CAAC,OAAO,CAAC,OAAO;KAC9C,CAAC;AACJ,CAAC","sourcesContent":["import type { RoleSemantics, SurfaceTheme } from '@ankhorage/surface';\n\nimport type { ZoraTone } from '../../internal/recipes';\nimport type { ChipColors, ChipInteractionState } from './types';\n\nfunction resolveChipRole(theme: SurfaceTheme, tone: ZoraTone): RoleSemantics {\n switch (tone) {\n case 'primary':\n return theme.semantics.action.primary;\n case 'danger':\n return theme.semantics.action.danger;\n case 'success':\n return theme.semantics.success;\n case 'warning':\n return theme.semantics.warning;\n case 'neutral':\n default:\n return theme.semantics.action.neutral;\n }\n}\n\nexport function resolveChipColors({\n theme,\n tone,\n selected,\n state,\n}: {\n theme: SurfaceTheme;\n tone: ZoraTone;\n selected: boolean;\n state: ChipInteractionState;\n}): ChipColors {\n if (state.disabled) {\n return {\n backgroundColor: theme.semantics.neutral.surface,\n borderColor: theme.semantics.neutral.divider,\n contentColor: theme.semantics.content.muted,\n opacity: 0.72,\n };\n }\n\n const role = resolveChipRole(theme, tone);\n\n if (selected) {\n return {\n backgroundColor: state.pressed\n ? role.softActive\n : state.hovered\n ? role.softHover\n : role.softBg,\n borderColor: 'transparent',\n contentColor: role.base,\n };\n }\n\n return {\n backgroundColor: state.pressed\n ? theme.semantics.neutral.surfaceActive\n : state.hovered\n ? theme.semantics.neutral.surfaceHover\n : theme.semantics.neutral.surface,\n borderColor: theme.semantics.neutral.divider,\n contentColor: theme.semantics.content.default,\n };\n}\n"]}
|
|
@@ -0,0 +1,26 @@
|
|
|
1
|
+
import type { ButtonIconSpec } from '@ankhorage/surface';
|
|
2
|
+
import type React from 'react';
|
|
3
|
+
import type { ZoraControlSize, ZoraTone } from '../../internal/recipes';
|
|
4
|
+
import type { ZoraBaseProps } from '../../theme/ZoraBaseProps';
|
|
5
|
+
export interface ChipProps extends ZoraBaseProps {
|
|
6
|
+
children: React.ReactNode;
|
|
7
|
+
icon?: ButtonIconSpec;
|
|
8
|
+
selected?: boolean;
|
|
9
|
+
disabled?: boolean;
|
|
10
|
+
tone?: ZoraTone;
|
|
11
|
+
size?: ZoraControlSize;
|
|
12
|
+
onPress?: () => void;
|
|
13
|
+
}
|
|
14
|
+
export interface ChipColors {
|
|
15
|
+
backgroundColor: string;
|
|
16
|
+
borderColor: string;
|
|
17
|
+
contentColor: string;
|
|
18
|
+
opacity?: number;
|
|
19
|
+
}
|
|
20
|
+
export interface ChipInteractionState {
|
|
21
|
+
pressed: boolean;
|
|
22
|
+
hovered: boolean;
|
|
23
|
+
focused: boolean;
|
|
24
|
+
disabled: boolean;
|
|
25
|
+
}
|
|
26
|
+
//# sourceMappingURL=types.d.ts.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"types.d.ts","sourceRoot":"","sources":["../../../src/components/chip/types.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,cAAc,EAAE,MAAM,oBAAoB,CAAC;AACzD,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAE/B,OAAO,KAAK,EAAE,eAAe,EAAE,QAAQ,EAAE,MAAM,wBAAwB,CAAC;AACxE,OAAO,KAAK,EAAE,aAAa,EAAE,MAAM,2BAA2B,CAAC;AAE/D,MAAM,WAAW,SAAU,SAAQ,aAAa;IAC9C,QAAQ,EAAE,KAAK,CAAC,SAAS,CAAC;IAC1B,IAAI,CAAC,EAAE,cAAc,CAAC;IACtB,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,IAAI,CAAC,EAAE,QAAQ,CAAC;IAChB,IAAI,CAAC,EAAE,eAAe,CAAC;IACvB,OAAO,CAAC,EAAE,MAAM,IAAI,CAAC;CACtB;AAED,MAAM,WAAW,UAAU;IACzB,eAAe,EAAE,MAAM,CAAC;IACxB,WAAW,EAAE,MAAM,CAAC;IACpB,YAAY,EAAE,MAAM,CAAC;IACrB,OAAO,CAAC,EAAE,MAAM,CAAC;CAClB;AAED,MAAM,WAAW,oBAAoB;IACnC,OAAO,EAAE,OAAO,CAAC;IACjB,OAAO,EAAE,OAAO,CAAC;IACjB,OAAO,EAAE,OAAO,CAAC;IACjB,QAAQ,EAAE,OAAO,CAAC;CACnB"}
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"types.js","sourceRoot":"","sources":["../../../src/components/chip/types.ts"],"names":[],"mappings":"","sourcesContent":["import type { ButtonIconSpec } from '@ankhorage/surface';\nimport type React from 'react';\n\nimport type { ZoraControlSize, ZoraTone } from '../../internal/recipes';\nimport type { ZoraBaseProps } from '../../theme/ZoraBaseProps';\n\nexport interface ChipProps extends ZoraBaseProps {\n children: React.ReactNode;\n icon?: ButtonIconSpec;\n selected?: boolean;\n disabled?: boolean;\n tone?: ZoraTone;\n size?: ZoraControlSize;\n onPress?: () => void;\n}\n\nexport interface ChipColors {\n backgroundColor: string;\n borderColor: string;\n contentColor: string;\n opacity?: number;\n}\n\nexport interface ChipInteractionState {\n pressed: boolean;\n hovered: boolean;\n focused: boolean;\n disabled: boolean;\n}\n"]}
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"ChipGroup.d.ts","sourceRoot":"","sources":["../../../src/components/chip-group/ChipGroup.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAK1B,OAAO,KAAK,EAAiB,cAAc,EAAE,MAAM,SAAS,CAAC;AA4D7D,eAAO,MAAM,SAAS,GAlDE,MAAM,SAAS,MAAM,sEAkDc,CAAC"}
|
|
@@ -0,0 +1,32 @@
|
|
|
1
|
+
import React from 'react';
|
|
2
|
+
import { Inline } from '../../foundation';
|
|
3
|
+
import { withZoraThemeScope } from '../../theme/withZoraThemeScope';
|
|
4
|
+
import { Chip } from '../chip';
|
|
5
|
+
function hasValue(values, value) {
|
|
6
|
+
return values.includes(value);
|
|
7
|
+
}
|
|
8
|
+
function toggleValue(values, value) {
|
|
9
|
+
return hasValue(values, value) ? values.filter((item) => item !== value) : [...values, value];
|
|
10
|
+
}
|
|
11
|
+
function ChipGroupInner({ themeId: _themeId, mode: _mode, testID, items, value, onValueChange, multiple, tone = 'neutral', size = 's', wrap = true, disabled, }) {
|
|
12
|
+
const renderChip = (item) => {
|
|
13
|
+
const itemDisabled = disabled ?? item.disabled ?? false;
|
|
14
|
+
const isSelected = Array.isArray(value) ? hasValue(value, item.value) : value === item.value;
|
|
15
|
+
const handlePress = () => {
|
|
16
|
+
if (multiple) {
|
|
17
|
+
const next = toggleValue(value, item.value);
|
|
18
|
+
onValueChange(next);
|
|
19
|
+
return;
|
|
20
|
+
}
|
|
21
|
+
onValueChange(item.value);
|
|
22
|
+
};
|
|
23
|
+
return (<Chip key={item.value} disabled={itemDisabled} icon={item.icon} onPress={handlePress} selected={isSelected} size={size} testID={item.testID} tone={tone}>
|
|
24
|
+
{item.label}
|
|
25
|
+
</Chip>);
|
|
26
|
+
};
|
|
27
|
+
return (<Inline align="center" gap="s" testID={testID} wrap={wrap ? 'wrap' : 'nowrap'}>
|
|
28
|
+
{items.map(renderChip)}
|
|
29
|
+
</Inline>);
|
|
30
|
+
}
|
|
31
|
+
export const ChipGroup = withZoraThemeScope(ChipGroupInner);
|
|
32
|
+
//# sourceMappingURL=ChipGroup.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"ChipGroup.js","sourceRoot":"","sources":["../../../src/components/chip-group/ChipGroup.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAE1B,OAAO,EAAE,MAAM,EAAE,MAAM,kBAAkB,CAAC;AAC1C,OAAO,EAAE,kBAAkB,EAAE,MAAM,gCAAgC,CAAC;AACpE,OAAO,EAAE,IAAI,EAAE,MAAM,SAAS,CAAC;AAG/B,SAAS,QAAQ,CAAwB,MAAyB,EAAE,KAAa;IAC/E,OAAO,MAAM,CAAC,QAAQ,CAAC,KAAK,CAAC,CAAC;AAChC,CAAC;AAED,SAAS,WAAW,CAAwB,MAAyB,EAAE,KAAa;IAClF,OAAO,QAAQ,CAAC,MAAM,EAAE,KAAK,CAAC,CAAC,CAAC,CAAC,MAAM,CAAC,MAAM,CAAC,CAAC,IAAI,EAAE,EAAE,CAAC,IAAI,KAAK,KAAK,CAAC,CAAC,CAAC,CAAC,CAAC,GAAG,MAAM,EAAE,KAAK,CAAC,CAAC;AAChG,CAAC;AAED,SAAS,cAAc,CAAiC,EACtD,OAAO,EAAE,QAAQ,EACjB,IAAI,EAAE,KAAK,EACX,MAAM,EACN,KAAK,EACL,KAAK,EACL,aAAa,EACb,QAAQ,EACR,IAAI,GAAG,SAAS,EAChB,IAAI,GAAG,GAAG,EACV,IAAI,GAAG,IAAI,EACX,QAAQ,GACe;IACvB,MAAM,UAAU,GAAG,CAAC,IAA2B,EAAE,EAAE;QACjD,MAAM,YAAY,GAAG,QAAQ,IAAI,IAAI,CAAC,QAAQ,IAAI,KAAK,CAAC;QACxD,MAAM,UAAU,GAAG,KAAK,CAAC,OAAO,CAAC,KAAK,CAAC,CAAC,CAAC,CAAC,QAAQ,CAAC,KAAK,EAAE,IAAI,CAAC,KAAK,CAAC,CAAC,CAAC,CAAC,KAAK,KAAK,IAAI,CAAC,KAAK,CAAC;QAE7F,MAAM,WAAW,GAAG,GAAG,EAAE;YACvB,IAAI,QAAQ,EAAE,CAAC;gBACb,MAAM,IAAI,GAAG,WAAW,CAAC,KAAK,EAAE,IAAI,CAAC,KAAK,CAAC,CAAC;gBAC5C,aAAa,CAAC,IAAI,CAAC,CAAC;gBACpB,OAAO;YACT,CAAC;YAED,aAAa,CAAC,IAAI,CAAC,KAAK,CAAC,CAAC;QAC5B,CAAC,CAAC;QAEF,OAAO,CACL,CAAC,IAAI,CACH,GAAG,CAAC,CAAC,IAAI,CAAC,KAAK,CAAC,CAChB,QAAQ,CAAC,CAAC,YAAY,CAAC,CACvB,IAAI,CAAC,CAAC,IAAI,CAAC,IAAI,CAAC,CAChB,OAAO,CAAC,CAAC,WAAW,CAAC,CACrB,QAAQ,CAAC,CAAC,UAAU,CAAC,CACrB,IAAI,CAAC,CAAC,IAAI,CAAC,CACX,MAAM,CAAC,CAAC,IAAI,CAAC,MAAM,CAAC,CACpB,IAAI,CAAC,CAAC,IAAI,CAAC,CAEX;QAAA,CAAC,IAAI,CAAC,KAAK,CACb;MAAA,EAAE,IAAI,CAAC,CACR,CAAC;IACJ,CAAC,CAAC;IAEF,OAAO,CACL,CAAC,MAAM,CAAC,KAAK,CAAC,QAAQ,CAAC,GAAG,CAAC,GAAG,CAAC,MAAM,CAAC,CAAC,MAAM,CAAC,CAAC,IAAI,CAAC,CAAC,IAAI,CAAC,CAAC,CAAC,MAAM,CAAC,CAAC,CAAC,QAAQ,CAAC,CAC5E;MAAA,CAAC,KAAK,CAAC,GAAG,CAAC,UAAU,CAAC,CACxB;IAAA,EAAE,MAAM,CAAC,CACV,CAAC;AACJ,CAAC;AAED,MAAM,CAAC,MAAM,SAAS,GAAG,kBAAkB,CAAC,cAAc,CAAC,CAAC","sourcesContent":["import React from 'react';\n\nimport { Inline } from '../../foundation';\nimport { withZoraThemeScope } from '../../theme/withZoraThemeScope';\nimport { Chip } from '../chip';\nimport type { ChipGroupItem, ChipGroupProps } from './types';\n\nfunction hasValue<TValue extends string>(values: readonly TValue[], value: TValue): boolean {\n return values.includes(value);\n}\n\nfunction toggleValue<TValue extends string>(values: readonly TValue[], value: TValue): TValue[] {\n return hasValue(values, value) ? values.filter((item) => item !== value) : [...values, value];\n}\n\nfunction ChipGroupInner<TValue extends string = string>({\n themeId: _themeId,\n mode: _mode,\n testID,\n items,\n value,\n onValueChange,\n multiple,\n tone = 'neutral',\n size = 's',\n wrap = true,\n disabled,\n}: ChipGroupProps<TValue>) {\n const renderChip = (item: ChipGroupItem<TValue>) => {\n const itemDisabled = disabled ?? item.disabled ?? false;\n const isSelected = Array.isArray(value) ? hasValue(value, item.value) : value === item.value;\n\n const handlePress = () => {\n if (multiple) {\n const next = toggleValue(value, item.value);\n onValueChange(next);\n return;\n }\n\n onValueChange(item.value);\n };\n\n return (\n <Chip\n key={item.value}\n disabled={itemDisabled}\n icon={item.icon}\n onPress={handlePress}\n selected={isSelected}\n size={size}\n testID={item.testID}\n tone={tone}\n >\n {item.label}\n </Chip>\n );\n };\n\n return (\n <Inline align=\"center\" gap=\"s\" testID={testID} wrap={wrap ? 'wrap' : 'nowrap'}>\n {items.map(renderChip)}\n </Inline>\n );\n}\n\nexport const ChipGroup = withZoraThemeScope(ChipGroupInner);\n"]}
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/chip-group/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,MAAM,aAAa,CAAC;AACxC,YAAY,EAAE,aAAa,EAAE,cAAc,EAAE,MAAM,SAAS,CAAC"}
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../src/components/chip-group/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,MAAM,aAAa,CAAC","sourcesContent":["export { ChipGroup } from './ChipGroup';\nexport type { ChipGroupItem, ChipGroupProps } from './types';\n"]}
|
|
@@ -0,0 +1,31 @@
|
|
|
1
|
+
import type { ButtonIconSpec } from '@ankhorage/surface';
|
|
2
|
+
import type React from 'react';
|
|
3
|
+
import type { ZoraControlSize, ZoraTone } from '../../internal/recipes';
|
|
4
|
+
import type { ZoraBaseProps } from '../../theme/ZoraBaseProps';
|
|
5
|
+
export interface ChipGroupItem<TValue extends string = string> {
|
|
6
|
+
value: TValue;
|
|
7
|
+
label: React.ReactNode;
|
|
8
|
+
icon?: ButtonIconSpec;
|
|
9
|
+
disabled?: boolean;
|
|
10
|
+
testID?: string;
|
|
11
|
+
}
|
|
12
|
+
interface ChipGroupBaseProps<TValue extends string> extends ZoraBaseProps {
|
|
13
|
+
items: readonly ChipGroupItem<TValue>[];
|
|
14
|
+
tone?: ZoraTone;
|
|
15
|
+
size?: ZoraControlSize;
|
|
16
|
+
wrap?: boolean;
|
|
17
|
+
disabled?: boolean;
|
|
18
|
+
}
|
|
19
|
+
interface ChipGroupSingleProps<TValue extends string> {
|
|
20
|
+
multiple?: false;
|
|
21
|
+
value: TValue;
|
|
22
|
+
onValueChange: (value: TValue) => void;
|
|
23
|
+
}
|
|
24
|
+
interface ChipGroupMultipleProps<TValue extends string> {
|
|
25
|
+
multiple: true;
|
|
26
|
+
value: readonly TValue[];
|
|
27
|
+
onValueChange: (value: TValue[]) => void;
|
|
28
|
+
}
|
|
29
|
+
export type ChipGroupProps<TValue extends string = string> = ChipGroupBaseProps<TValue> & (ChipGroupSingleProps<TValue> | ChipGroupMultipleProps<TValue>);
|
|
30
|
+
export {};
|
|
31
|
+
//# sourceMappingURL=types.d.ts.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"types.d.ts","sourceRoot":"","sources":["../../../src/components/chip-group/types.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,cAAc,EAAE,MAAM,oBAAoB,CAAC;AACzD,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAE/B,OAAO,KAAK,EAAE,eAAe,EAAE,QAAQ,EAAE,MAAM,wBAAwB,CAAC;AACxE,OAAO,KAAK,EAAE,aAAa,EAAE,MAAM,2BAA2B,CAAC;AAE/D,MAAM,WAAW,aAAa,CAAC,MAAM,SAAS,MAAM,GAAG,MAAM;IAC3D,KAAK,EAAE,MAAM,CAAC;IACd,KAAK,EAAE,KAAK,CAAC,SAAS,CAAC;IACvB,IAAI,CAAC,EAAE,cAAc,CAAC;IACtB,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,MAAM,CAAC,EAAE,MAAM,CAAC;CACjB;AAED,UAAU,kBAAkB,CAAC,MAAM,SAAS,MAAM,CAAE,SAAQ,aAAa;IACvE,KAAK,EAAE,SAAS,aAAa,CAAC,MAAM,CAAC,EAAE,CAAC;IACxC,IAAI,CAAC,EAAE,QAAQ,CAAC;IAChB,IAAI,CAAC,EAAE,eAAe,CAAC;IACvB,IAAI,CAAC,EAAE,OAAO,CAAC;IACf,QAAQ,CAAC,EAAE,OAAO,CAAC;CACpB;AAED,UAAU,oBAAoB,CAAC,MAAM,SAAS,MAAM;IAClD,QAAQ,CAAC,EAAE,KAAK,CAAC;IACjB,KAAK,EAAE,MAAM,CAAC;IACd,aAAa,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAC;CACxC;AAED,UAAU,sBAAsB,CAAC,MAAM,SAAS,MAAM;IACpD,QAAQ,EAAE,IAAI,CAAC;IACf,KAAK,EAAE,SAAS,MAAM,EAAE,CAAC;IACzB,aAAa,EAAE,CAAC,KAAK,EAAE,MAAM,EAAE,KAAK,IAAI,CAAC;CAC1C;AAED,MAAM,MAAM,cAAc,CAAC,MAAM,SAAS,MAAM,GAAG,MAAM,IAAI,kBAAkB,CAAC,MAAM,CAAC,GACrF,CAAC,oBAAoB,CAAC,MAAM,CAAC,GAAG,sBAAsB,CAAC,MAAM,CAAC,CAAC,CAAC"}
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"types.js","sourceRoot":"","sources":["../../../src/components/chip-group/types.ts"],"names":[],"mappings":"","sourcesContent":["import type { ButtonIconSpec } from '@ankhorage/surface';\nimport type React from 'react';\n\nimport type { ZoraControlSize, ZoraTone } from '../../internal/recipes';\nimport type { ZoraBaseProps } from '../../theme/ZoraBaseProps';\n\nexport interface ChipGroupItem<TValue extends string = string> {\n value: TValue;\n label: React.ReactNode;\n icon?: ButtonIconSpec;\n disabled?: boolean;\n testID?: string;\n}\n\ninterface ChipGroupBaseProps<TValue extends string> extends ZoraBaseProps {\n items: readonly ChipGroupItem<TValue>[];\n tone?: ZoraTone;\n size?: ZoraControlSize;\n wrap?: boolean;\n disabled?: boolean;\n}\n\ninterface ChipGroupSingleProps<TValue extends string> {\n multiple?: false;\n value: TValue;\n onValueChange: (value: TValue) => void;\n}\n\ninterface ChipGroupMultipleProps<TValue extends string> {\n multiple: true;\n value: readonly TValue[];\n onValueChange: (value: TValue[]) => void;\n}\n\nexport type ChipGroupProps<TValue extends string = string> = ChipGroupBaseProps<TValue> &\n (ChipGroupSingleProps<TValue> | ChipGroupMultipleProps<TValue>);\n"]}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Input.d.ts","sourceRoot":"","sources":["../../../src/components/input/Input.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,MAAM,OAAO,CAAC;
|
|
1
|
+
{"version":3,"file":"Input.d.ts","sourceRoot":"","sources":["../../../src/components/input/Input.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,MAAM,OAAO,CAAC;AAM1B,OAAO,KAAK,EAAE,UAAU,EAAE,MAAM,SAAS,CAAC;AAyD1C,eAAO,MAAM,KAAK,kDAAiC,CAAC"}
|
|
@@ -3,11 +3,12 @@ import React from 'react';
|
|
|
3
3
|
import { resolveIconSize } from '../../internal/recipes';
|
|
4
4
|
import { useZoraTheme } from '../../theme/useZoraTheme';
|
|
5
5
|
import { withZoraThemeScope } from '../../theme/withZoraThemeScope';
|
|
6
|
-
|
|
6
|
+
import { IconButton } from '../icon-button';
|
|
7
|
+
function InputInner({ themeId: _themeId, mode: _mode, size = 'l', leadingIcon, trailingIcon, trailingAction, disabled, readOnly, ...props }) {
|
|
7
8
|
const { theme } = useZoraTheme();
|
|
8
9
|
const iconSize = resolveIconSize(size);
|
|
9
10
|
const iconColor = theme.semantics.content.muted;
|
|
10
|
-
return (<Surface.TextInput {...props} leadingAccessory={leadingIcon ? (<Surface.Icon color={iconColor} name={leadingIcon.name} provider={leadingIcon.provider} size={iconSize}/>) : undefined} size={size} trailingAccessory={trailingIcon ? (<Surface.Icon color={iconColor} name={trailingIcon.name} provider={trailingIcon.provider} size={iconSize}/>) : undefined}/>);
|
|
11
|
+
return (<Surface.TextInput {...props} disabled={disabled} leadingAccessory={leadingIcon ? (<Surface.Icon color={iconColor} name={leadingIcon.name} provider={leadingIcon.provider} size={iconSize}/>) : undefined} readOnly={readOnly} size={size} trailingAccessory={trailingAction ? (<IconButton icon={trailingAction.icon} label={trailingAction.label} disabled={disabled ?? readOnly} emphasis="ghost" size={size === 'l' ? 'm' : size} tone="neutral" onPress={trailingAction.onPress}/>) : trailingIcon ? (<Surface.Icon color={iconColor} name={trailingIcon.name} provider={trailingIcon.provider} size={iconSize}/>) : undefined}/>);
|
|
11
12
|
}
|
|
12
13
|
export const Input = withZoraThemeScope(InputInner);
|
|
13
14
|
//# sourceMappingURL=Input.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Input.js","sourceRoot":"","sources":["../../../src/components/input/Input.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,OAAO,MAAM,oBAAoB,CAAC;AAC9C,OAAO,KAAK,MAAM,OAAO,CAAC;AAE1B,OAAO,EAAE,eAAe,EAAE,MAAM,wBAAwB,CAAC;AACzD,OAAO,EAAE,YAAY,EAAE,MAAM,0BAA0B,CAAC;AACxD,OAAO,EAAE,kBAAkB,EAAE,MAAM,gCAAgC,CAAC;
|
|
1
|
+
{"version":3,"file":"Input.js","sourceRoot":"","sources":["../../../src/components/input/Input.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,OAAO,MAAM,oBAAoB,CAAC;AAC9C,OAAO,KAAK,MAAM,OAAO,CAAC;AAE1B,OAAO,EAAE,eAAe,EAAE,MAAM,wBAAwB,CAAC;AACzD,OAAO,EAAE,YAAY,EAAE,MAAM,0BAA0B,CAAC;AACxD,OAAO,EAAE,kBAAkB,EAAE,MAAM,gCAAgC,CAAC;AACpE,OAAO,EAAE,UAAU,EAAE,MAAM,gBAAgB,CAAC;AAG5C,SAAS,UAAU,CAAC,EAClB,OAAO,EAAE,QAAQ,EACjB,IAAI,EAAE,KAAK,EACX,IAAI,GAAG,GAAG,EACV,WAAW,EACX,YAAY,EACZ,cAAc,EACd,QAAQ,EACR,QAAQ,EACR,GAAG,KAAK,EACG;IACX,MAAM,EAAE,KAAK,EAAE,GAAG,YAAY,EAAE,CAAC;IACjC,MAAM,QAAQ,GAAG,eAAe,CAAC,IAAI,CAAC,CAAC;IACvC,MAAM,SAAS,GAAG,KAAK,CAAC,SAAS,CAAC,OAAO,CAAC,KAAK,CAAC;IAEhD,OAAO,CACL,CAAC,OAAO,CAAC,SAAS,CAChB,IAAI,KAAK,CAAC,CACV,QAAQ,CAAC,CAAC,QAAQ,CAAC,CACnB,gBAAgB,CAAC,CACf,WAAW,CAAC,CAAC,CAAC,CACZ,CAAC,OAAO,CAAC,IAAI,CACX,KAAK,CAAC,CAAC,SAAS,CAAC,CACjB,IAAI,CAAC,CAAC,WAAW,CAAC,IAAI,CAAC,CACvB,QAAQ,CAAC,CAAC,WAAW,CAAC,QAAQ,CAAC,CAC/B,IAAI,CAAC,CAAC,QAAQ,CAAC,EACf,CACH,CAAC,CAAC,CAAC,SACN,CAAC,CACD,QAAQ,CAAC,CAAC,QAAQ,CAAC,CACnB,IAAI,CAAC,CAAC,IAAI,CAAC,CACX,iBAAiB,CAAC,CAChB,cAAc,CAAC,CAAC,CAAC,CACf,CAAC,UAAU,CACT,IAAI,CAAC,CAAC,cAAc,CAAC,IAAI,CAAC,CAC1B,KAAK,CAAC,CAAC,cAAc,CAAC,KAAK,CAAC,CAC5B,QAAQ,CAAC,CAAC,QAAQ,IAAI,QAAQ,CAAC,CAC/B,QAAQ,CAAC,OAAO,CAChB,IAAI,CAAC,CAAC,IAAI,KAAK,GAAG,CAAC,CAAC,CAAC,GAAG,CAAC,CAAC,CAAC,IAAI,CAAC,CAChC,IAAI,CAAC,SAAS,CACd,OAAO,CAAC,CAAC,cAAc,CAAC,OAAO,CAAC,EAChC,CACH,CAAC,CAAC,CAAC,YAAY,CAAC,CAAC,CAAC,CACjB,CAAC,OAAO,CAAC,IAAI,CACX,KAAK,CAAC,CAAC,SAAS,CAAC,CACjB,IAAI,CAAC,CAAC,YAAY,CAAC,IAAI,CAAC,CACxB,QAAQ,CAAC,CAAC,YAAY,CAAC,QAAQ,CAAC,CAChC,IAAI,CAAC,CAAC,QAAQ,CAAC,EACf,CACH,CAAC,CAAC,CAAC,SACN,CAAC,EACD,CACH,CAAC;AACJ,CAAC;AAED,MAAM,CAAC,MAAM,KAAK,GAAG,kBAAkB,CAAC,UAAU,CAAC,CAAC","sourcesContent":["import * as Surface from '@ankhorage/surface';\nimport React from 'react';\n\nimport { resolveIconSize } from '../../internal/recipes';\nimport { useZoraTheme } from '../../theme/useZoraTheme';\nimport { withZoraThemeScope } from '../../theme/withZoraThemeScope';\nimport { IconButton } from '../icon-button';\nimport type { InputProps } from './types';\n\nfunction InputInner({\n themeId: _themeId,\n mode: _mode,\n size = 'l',\n leadingIcon,\n trailingIcon,\n trailingAction,\n disabled,\n readOnly,\n ...props\n}: InputProps) {\n const { theme } = useZoraTheme();\n const iconSize = resolveIconSize(size);\n const iconColor = theme.semantics.content.muted;\n\n return (\n <Surface.TextInput\n {...props}\n disabled={disabled}\n leadingAccessory={\n leadingIcon ? (\n <Surface.Icon\n color={iconColor}\n name={leadingIcon.name}\n provider={leadingIcon.provider}\n size={iconSize}\n />\n ) : undefined\n }\n readOnly={readOnly}\n size={size}\n trailingAccessory={\n trailingAction ? (\n <IconButton\n icon={trailingAction.icon}\n label={trailingAction.label}\n disabled={disabled ?? readOnly}\n emphasis=\"ghost\"\n size={size === 'l' ? 'm' : size}\n tone=\"neutral\"\n onPress={trailingAction.onPress}\n />\n ) : trailingIcon ? (\n <Surface.Icon\n color={iconColor}\n name={trailingIcon.name}\n provider={trailingIcon.provider}\n size={iconSize}\n />\n ) : undefined\n }\n />\n );\n}\n\nexport const Input = withZoraThemeScope(InputInner);\n"]}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/input/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,KAAK,EAAE,MAAM,SAAS,CAAC;AAChC,YAAY,EAAE,UAAU,EAAE,MAAM,SAAS,CAAC"}
|
|
1
|
+
{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/input/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,KAAK,EAAE,MAAM,SAAS,CAAC;AAChC,YAAY,EAAE,UAAU,EAAE,mBAAmB,EAAE,MAAM,SAAS,CAAC"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../src/components/input/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,KAAK,EAAE,MAAM,SAAS,CAAC","sourcesContent":["export { Input } from './Input';\nexport type { InputProps } from './types';\n"]}
|
|
1
|
+
{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../src/components/input/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,KAAK,EAAE,MAAM,SAAS,CAAC","sourcesContent":["export { Input } from './Input';\nexport type { InputProps, InputTrailingAction } from './types';\n"]}
|
|
@@ -1,9 +1,22 @@
|
|
|
1
1
|
import type * as Surface from '@ankhorage/surface';
|
|
2
2
|
import type { ZoraControlSize } from '../../internal/recipes';
|
|
3
3
|
import type { ZoraBaseProps } from '../../theme/ZoraBaseProps';
|
|
4
|
-
export interface
|
|
4
|
+
export interface InputTrailingAction {
|
|
5
|
+
icon: Surface.ButtonIconSpec;
|
|
6
|
+
label: string;
|
|
7
|
+
onPress: () => void;
|
|
8
|
+
}
|
|
9
|
+
type InputTrailingProps = {
|
|
10
|
+
trailingIcon?: Surface.ButtonIconSpec;
|
|
11
|
+
trailingAction?: never;
|
|
12
|
+
} | {
|
|
13
|
+
trailingIcon?: never;
|
|
14
|
+
trailingAction?: InputTrailingAction;
|
|
15
|
+
};
|
|
16
|
+
export interface InputBaseProps extends ZoraBaseProps, Omit<Surface.TextInputProps, 'leadingAccessory' | 'size' | 'trailingAccessory' | 'mode' | 'themeId'> {
|
|
5
17
|
size?: ZoraControlSize;
|
|
6
18
|
leadingIcon?: Surface.ButtonIconSpec;
|
|
7
|
-
trailingIcon?: Surface.ButtonIconSpec;
|
|
8
19
|
}
|
|
20
|
+
export type InputProps = InputBaseProps & InputTrailingProps;
|
|
21
|
+
export {};
|
|
9
22
|
//# sourceMappingURL=types.d.ts.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"types.d.ts","sourceRoot":"","sources":["../../../src/components/input/types.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,OAAO,MAAM,oBAAoB,CAAC;AAEnD,OAAO,KAAK,EAAE,eAAe,EAAE,MAAM,wBAAwB,CAAC;AAC9D,OAAO,KAAK,EAAE,aAAa,EAAE,MAAM,2BAA2B,CAAC;AAE/D,MAAM,WAAW,
|
|
1
|
+
{"version":3,"file":"types.d.ts","sourceRoot":"","sources":["../../../src/components/input/types.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,OAAO,MAAM,oBAAoB,CAAC;AAEnD,OAAO,KAAK,EAAE,eAAe,EAAE,MAAM,wBAAwB,CAAC;AAC9D,OAAO,KAAK,EAAE,aAAa,EAAE,MAAM,2BAA2B,CAAC;AAE/D,MAAM,WAAW,mBAAmB;IAClC,IAAI,EAAE,OAAO,CAAC,cAAc,CAAC;IAC7B,KAAK,EAAE,MAAM,CAAC;IACd,OAAO,EAAE,MAAM,IAAI,CAAC;CACrB;AAED,KAAK,kBAAkB,GACnB;IACE,YAAY,CAAC,EAAE,OAAO,CAAC,cAAc,CAAC;IACtC,cAAc,CAAC,EAAE,KAAK,CAAC;CACxB,GACD;IACE,YAAY,CAAC,EAAE,KAAK,CAAC;IACrB,cAAc,CAAC,EAAE,mBAAmB,CAAC;CACtC,CAAC;AAEN,MAAM,WAAW,cACf,SACE,aAAa,EACb,IAAI,CACF,OAAO,CAAC,cAAc,EACtB,kBAAkB,GAAG,MAAM,GAAG,mBAAmB,GAAG,MAAM,GAAG,SAAS,CACvE;IACH,IAAI,CAAC,EAAE,eAAe,CAAC;IACvB,WAAW,CAAC,EAAE,OAAO,CAAC,cAAc,CAAC;CACtC;AAED,MAAM,MAAM,UAAU,GAAG,cAAc,GAAG,kBAAkB,CAAC"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"types.js","sourceRoot":"","sources":["../../../src/components/input/types.ts"],"names":[],"mappings":"","sourcesContent":["import type * as Surface from '@ankhorage/surface';\n\nimport type { ZoraControlSize } from '../../internal/recipes';\nimport type { ZoraBaseProps } from '../../theme/ZoraBaseProps';\n\nexport interface
|
|
1
|
+
{"version":3,"file":"types.js","sourceRoot":"","sources":["../../../src/components/input/types.ts"],"names":[],"mappings":"","sourcesContent":["import type * as Surface from '@ankhorage/surface';\n\nimport type { ZoraControlSize } from '../../internal/recipes';\nimport type { ZoraBaseProps } from '../../theme/ZoraBaseProps';\n\nexport interface InputTrailingAction {\n icon: Surface.ButtonIconSpec;\n label: string;\n onPress: () => void;\n}\n\ntype InputTrailingProps =\n | {\n trailingIcon?: Surface.ButtonIconSpec;\n trailingAction?: never;\n }\n | {\n trailingIcon?: never;\n trailingAction?: InputTrailingAction;\n };\n\nexport interface InputBaseProps\n extends\n ZoraBaseProps,\n Omit<\n Surface.TextInputProps,\n 'leadingAccessory' | 'size' | 'trailingAccessory' | 'mode' | 'themeId'\n > {\n size?: ZoraControlSize;\n leadingIcon?: Surface.ButtonIconSpec;\n}\n\nexport type InputProps = InputBaseProps & InputTrailingProps;\n"]}
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"SearchBar.d.ts","sourceRoot":"","sources":["../../../src/components/search-bar/SearchBar.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAI1B,OAAO,KAAK,EAAE,cAAc,EAAE,MAAM,SAAS,CAAC;AA6C9C,eAAO,MAAM,SAAS,sDAAqC,CAAC"}
|
|
@@ -0,0 +1,18 @@
|
|
|
1
|
+
import React from 'react';
|
|
2
|
+
import { withZoraThemeScope } from '../../theme/withZoraThemeScope';
|
|
3
|
+
import { Input } from '../input';
|
|
4
|
+
function SearchBarInner({ themeId: _themeId, mode: _mode, testID, value, onValueChange, placeholder = 'Search', onSubmit, onClear, clearable = true, size = 'l', disabled, readOnly, }) {
|
|
5
|
+
const trailingAction = clearable && value.length > 0
|
|
6
|
+
? {
|
|
7
|
+
icon: { name: 'close-circle' },
|
|
8
|
+
label: 'Clear search',
|
|
9
|
+
onPress: () => {
|
|
10
|
+
onValueChange('');
|
|
11
|
+
onClear?.();
|
|
12
|
+
},
|
|
13
|
+
}
|
|
14
|
+
: undefined;
|
|
15
|
+
return (<Input disabled={disabled} leadingIcon={{ name: 'search-outline' }} onChangeText={onValueChange} onSubmitEditing={onSubmit ? () => onSubmit(value) : undefined} placeholder={placeholder} readOnly={readOnly} returnKeyType="search" size={size} testID={testID} trailingAction={trailingAction} value={value}/>);
|
|
16
|
+
}
|
|
17
|
+
export const SearchBar = withZoraThemeScope(SearchBarInner);
|
|
18
|
+
//# sourceMappingURL=SearchBar.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"SearchBar.js","sourceRoot":"","sources":["../../../src/components/search-bar/SearchBar.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAE1B,OAAO,EAAE,kBAAkB,EAAE,MAAM,gCAAgC,CAAC;AACpE,OAAO,EAAE,KAAK,EAA4B,MAAM,UAAU,CAAC;AAG3D,SAAS,cAAc,CAAC,EACtB,OAAO,EAAE,QAAQ,EACjB,IAAI,EAAE,KAAK,EACX,MAAM,EACN,KAAK,EACL,aAAa,EACb,WAAW,GAAG,QAAQ,EACtB,QAAQ,EACR,OAAO,EACP,SAAS,GAAG,IAAI,EAChB,IAAI,GAAG,GAAG,EACV,QAAQ,EACR,QAAQ,GACO;IACf,MAAM,cAAc,GAClB,SAAS,IAAI,KAAK,CAAC,MAAM,GAAG,CAAC;QAC3B,CAAC,CAAC;YACE,IAAI,EAAE,EAAE,IAAI,EAAE,cAAc,EAAE;YAC9B,KAAK,EAAE,cAAc;YACrB,OAAO,EAAE,GAAG,EAAE;gBACZ,aAAa,CAAC,EAAE,CAAC,CAAC;gBAClB,OAAO,EAAE,EAAE,CAAC;YACd,CAAC;SACF;QACH,CAAC,CAAC,SAAS,CAAC;IAEhB,OAAO,CACL,CAAC,KAAK,CACJ,QAAQ,CAAC,CAAC,QAAQ,CAAC,CACnB,WAAW,CAAC,CAAC,EAAE,IAAI,EAAE,gBAAgB,EAAE,CAAC,CACxC,YAAY,CAAC,CAAC,aAAa,CAAC,CAC5B,eAAe,CAAC,CAAC,QAAQ,CAAC,CAAC,CAAC,GAAG,EAAE,CAAC,QAAQ,CAAC,KAAK,CAAC,CAAC,CAAC,CAAC,SAAS,CAAC,CAC9D,WAAW,CAAC,CAAC,WAAW,CAAC,CACzB,QAAQ,CAAC,CAAC,QAAQ,CAAC,CACnB,aAAa,CAAC,QAAQ,CACtB,IAAI,CAAC,CAAC,IAAI,CAAC,CACX,MAAM,CAAC,CAAC,MAAM,CAAC,CACf,cAAc,CAAC,CAAC,cAAc,CAAC,CAC/B,KAAK,CAAC,CAAC,KAAK,CAAC,EACb,CACH,CAAC;AACJ,CAAC;AAED,MAAM,CAAC,MAAM,SAAS,GAAG,kBAAkB,CAAC,cAAc,CAAC,CAAC","sourcesContent":["import React from 'react';\n\nimport { withZoraThemeScope } from '../../theme/withZoraThemeScope';\nimport { Input, type InputTrailingAction } from '../input';\nimport type { SearchBarProps } from './types';\n\nfunction SearchBarInner({\n themeId: _themeId,\n mode: _mode,\n testID,\n value,\n onValueChange,\n placeholder = 'Search',\n onSubmit,\n onClear,\n clearable = true,\n size = 'l',\n disabled,\n readOnly,\n}: SearchBarProps) {\n const trailingAction: InputTrailingAction | undefined =\n clearable && value.length > 0\n ? {\n icon: { name: 'close-circle' },\n label: 'Clear search',\n onPress: () => {\n onValueChange('');\n onClear?.();\n },\n }\n : undefined;\n\n return (\n <Input\n disabled={disabled}\n leadingIcon={{ name: 'search-outline' }}\n onChangeText={onValueChange}\n onSubmitEditing={onSubmit ? () => onSubmit(value) : undefined}\n placeholder={placeholder}\n readOnly={readOnly}\n returnKeyType=\"search\"\n size={size}\n testID={testID}\n trailingAction={trailingAction}\n value={value}\n />\n );\n}\n\nexport const SearchBar = withZoraThemeScope(SearchBarInner);\n"]}
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/search-bar/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,MAAM,aAAa,CAAC;AACxC,YAAY,EAAE,cAAc,EAAE,MAAM,SAAS,CAAC"}
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../src/components/search-bar/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,MAAM,aAAa,CAAC","sourcesContent":["export { SearchBar } from './SearchBar';\nexport type { SearchBarProps } from './types';\n"]}
|
|
@@ -0,0 +1,14 @@
|
|
|
1
|
+
import type { ZoraControlSize } from '../../internal/recipes';
|
|
2
|
+
import type { ZoraBaseProps } from '../../theme/ZoraBaseProps';
|
|
3
|
+
export interface SearchBarProps extends ZoraBaseProps {
|
|
4
|
+
value: string;
|
|
5
|
+
onValueChange: (value: string) => void;
|
|
6
|
+
placeholder?: string;
|
|
7
|
+
onSubmit?: (value: string) => void;
|
|
8
|
+
onClear?: () => void;
|
|
9
|
+
clearable?: boolean;
|
|
10
|
+
size?: ZoraControlSize;
|
|
11
|
+
disabled?: boolean;
|
|
12
|
+
readOnly?: boolean;
|
|
13
|
+
}
|
|
14
|
+
//# sourceMappingURL=types.d.ts.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"types.d.ts","sourceRoot":"","sources":["../../../src/components/search-bar/types.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,eAAe,EAAE,MAAM,wBAAwB,CAAC;AAC9D,OAAO,KAAK,EAAE,aAAa,EAAE,MAAM,2BAA2B,CAAC;AAE/D,MAAM,WAAW,cAAe,SAAQ,aAAa;IACnD,KAAK,EAAE,MAAM,CAAC;IACd,aAAa,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAC;IACvC,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,QAAQ,CAAC,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAC;IACnC,OAAO,CAAC,EAAE,MAAM,IAAI,CAAC;IACrB,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB,IAAI,CAAC,EAAE,eAAe,CAAC;IACvB,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,QAAQ,CAAC,EAAE,OAAO,CAAC;CACpB"}
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"types.js","sourceRoot":"","sources":["../../../src/components/search-bar/types.ts"],"names":[],"mappings":"","sourcesContent":["import type { ZoraControlSize } from '../../internal/recipes';\nimport type { ZoraBaseProps } from '../../theme/ZoraBaseProps';\n\nexport interface SearchBarProps extends ZoraBaseProps {\n value: string;\n onValueChange: (value: string) => void;\n placeholder?: string;\n onSubmit?: (value: string) => void;\n onClear?: () => void;\n clearable?: boolean;\n size?: ZoraControlSize;\n disabled?: boolean;\n readOnly?: boolean;\n}\n"]}
|
package/dist/index.d.ts
CHANGED
|
@@ -1,3 +1,7 @@
|
|
|
1
|
+
export type { AvatarProps, AvatarShape, AvatarSize } from './components/avatar';
|
|
2
|
+
export { Avatar, resolveAvatarInitials } from './components/avatar';
|
|
3
|
+
export type { AvatarGroupItem, AvatarGroupProps } from './components/avatar-group';
|
|
4
|
+
export { AvatarGroup } from './components/avatar-group';
|
|
1
5
|
export type { BadgeProps } from './components/badge';
|
|
2
6
|
export { Badge } from './components/badge';
|
|
3
7
|
export type { ButtonProps } from './components/button';
|
|
@@ -6,6 +10,10 @@ export type { CardProps } from './components/card';
|
|
|
6
10
|
export { Card } from './components/card';
|
|
7
11
|
export type { CheckboxGroupOption, CheckboxGroupProps, CheckboxProps } from './components/checkbox';
|
|
8
12
|
export { Checkbox, CheckboxGroup } from './components/checkbox';
|
|
13
|
+
export type { ChipProps } from './components/chip';
|
|
14
|
+
export { Chip } from './components/chip';
|
|
15
|
+
export type { ChipGroupItem, ChipGroupProps } from './components/chip-group';
|
|
16
|
+
export { ChipGroup } from './components/chip-group';
|
|
9
17
|
export type { DrawerProps } from './components/drawer';
|
|
10
18
|
export { Drawer } from './components/drawer';
|
|
11
19
|
export type { FormActionsProps, FormErrorProps, FormErrors, FormFieldConfig, FormFieldControlProps, FormFieldInputType, FormFieldProps, FormFieldValue, FormFieldWrapperProps, FormProps, FormValidationErrors, FormValidationResult, FormValues, UseFormControllerOptions, UseFormControllerResult, ValidationRule, } from './components/form';
|
|
@@ -16,12 +24,14 @@ export type { IconProps } from './components/icon';
|
|
|
16
24
|
export { Icon } from './components/icon';
|
|
17
25
|
export type { IconButtonProps } from './components/icon-button';
|
|
18
26
|
export { IconButton } from './components/icon-button';
|
|
19
|
-
export type { InputProps } from './components/input';
|
|
27
|
+
export type { InputProps, InputTrailingAction } from './components/input';
|
|
20
28
|
export { Input } from './components/input';
|
|
21
29
|
export type { ModalProps } from './components/modal';
|
|
22
30
|
export { Modal } from './components/modal';
|
|
23
31
|
export type { RadioGroupOption, RadioGroupProps, RadioProps } from './components/radio';
|
|
24
32
|
export { Radio, RadioGroup } from './components/radio';
|
|
33
|
+
export type { SearchBarProps } from './components/search-bar';
|
|
34
|
+
export { SearchBar } from './components/search-bar';
|
|
25
35
|
export type { SelectOption, SelectProps } from './components/select';
|
|
26
36
|
export { Select } from './components/select';
|
|
27
37
|
export type { TabItem, TabsProps } from './components/tabs';
|
|
@@ -60,6 +70,8 @@ export type { DisclosureSectionProps } from './patterns/disclosure-section';
|
|
|
60
70
|
export { DisclosureSection } from './patterns/disclosure-section';
|
|
61
71
|
export type { EmptyStateAction, EmptyStateProps } from './patterns/empty-state';
|
|
62
72
|
export { EmptyState } from './patterns/empty-state';
|
|
73
|
+
export type { FilterBarProps } from './patterns/filter-bar';
|
|
74
|
+
export { FilterBar } from './patterns/filter-bar';
|
|
63
75
|
export type { InspectorFieldProps } from './patterns/inspector-field';
|
|
64
76
|
export { InspectorField } from './patterns/inspector-field';
|
|
65
77
|
export type { NoticeProps } from './patterns/notice';
|
package/dist/index.d.ts.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"AAAA,YAAY,EAAE,UAAU,EAAE,MAAM,oBAAoB,CAAC;AACrD,OAAO,EAAE,KAAK,EAAE,MAAM,oBAAoB,CAAC;AAC3C,YAAY,EAAE,WAAW,EAAE,MAAM,qBAAqB,CAAC;AACvD,OAAO,EAAE,MAAM,EAAE,MAAM,qBAAqB,CAAC;AAC7C,YAAY,EAAE,SAAS,EAAE,MAAM,mBAAmB,CAAC;AACnD,OAAO,EAAE,IAAI,EAAE,MAAM,mBAAmB,CAAC;AACzC,YAAY,EAAE,mBAAmB,EAAE,kBAAkB,EAAE,aAAa,EAAE,MAAM,uBAAuB,CAAC;AACpG,OAAO,EAAE,QAAQ,EAAE,aAAa,EAAE,MAAM,uBAAuB,CAAC;AAChE,YAAY,EAAE,WAAW,EAAE,MAAM,qBAAqB,CAAC;AACvD,OAAO,EAAE,MAAM,EAAE,MAAM,qBAAqB,CAAC;AAC7C,YAAY,EACV,gBAAgB,EAChB,cAAc,EACd,UAAU,EACV,eAAe,EACf,qBAAqB,EACrB,kBAAkB,EAClB,cAAc,EACd,cAAc,EACd,qBAAqB,EACrB,SAAS,EACT,oBAAoB,EACpB,oBAAoB,EACpB,UAAU,EACV,wBAAwB,EACxB,uBAAuB,EACvB,cAAc,GACf,MAAM,mBAAmB,CAAC;AAC3B,OAAO,EACL,IAAI,EACJ,WAAW,EACX,SAAS,EACT,SAAS,EACT,eAAe,EACf,iBAAiB,EACjB,aAAa,EACb,cAAc,EACd,aAAa,GACd,MAAM,mBAAmB,CAAC;AAC3B,YAAY,EACV,YAAY,EACZ,YAAY,EACZ,YAAY,EACZ,WAAW,EACX,WAAW,EACX,aAAa,GACd,MAAM,sBAAsB,CAAC;AAC9B,OAAO,EAAE,OAAO,EAAE,MAAM,sBAAsB,CAAC;AAC/C,YAAY,EAAE,SAAS,EAAE,MAAM,mBAAmB,CAAC;AACnD,OAAO,EAAE,IAAI,EAAE,MAAM,mBAAmB,CAAC;AACzC,YAAY,EAAE,eAAe,EAAE,MAAM,0BAA0B,CAAC;AAChE,OAAO,EAAE,UAAU,EAAE,MAAM,0BAA0B,CAAC;AACtD,YAAY,EAAE,UAAU,EAAE,MAAM,oBAAoB,CAAC;
|
|
1
|
+
{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"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"}
|
package/dist/index.js
CHANGED
|
@@ -1,7 +1,11 @@
|
|
|
1
|
+
export { Avatar, resolveAvatarInitials } from './components/avatar';
|
|
2
|
+
export { AvatarGroup } from './components/avatar-group';
|
|
1
3
|
export { Badge } from './components/badge';
|
|
2
4
|
export { Button } from './components/button';
|
|
3
5
|
export { Card } from './components/card';
|
|
4
6
|
export { Checkbox, CheckboxGroup } from './components/checkbox';
|
|
7
|
+
export { Chip } from './components/chip';
|
|
8
|
+
export { ChipGroup } from './components/chip-group';
|
|
5
9
|
export { Drawer } from './components/drawer';
|
|
6
10
|
export { Form, FormActions, FormError, FormField, hasRequiredRule, useFormController, validateField, validateFields, validateValue, } from './components/form';
|
|
7
11
|
export { Heading } from './components/heading';
|
|
@@ -10,6 +14,7 @@ export { IconButton } from './components/icon-button';
|
|
|
10
14
|
export { Input } from './components/input';
|
|
11
15
|
export { Modal } from './components/modal';
|
|
12
16
|
export { Radio, RadioGroup } from './components/radio';
|
|
17
|
+
export { SearchBar } from './components/search-bar';
|
|
13
18
|
export { Select } from './components/select';
|
|
14
19
|
export { Tabs } from './components/tabs';
|
|
15
20
|
export { Text } from './components/text';
|
|
@@ -29,6 +34,7 @@ export { CollectionEditor } from './patterns/collection-editor';
|
|
|
29
34
|
export { ConfirmDialog } from './patterns/confirm-dialog';
|
|
30
35
|
export { DisclosureSection } from './patterns/disclosure-section';
|
|
31
36
|
export { EmptyState } from './patterns/empty-state';
|
|
37
|
+
export { FilterBar } from './patterns/filter-bar';
|
|
32
38
|
export { InspectorField } from './patterns/inspector-field';
|
|
33
39
|
export { Notice } from './patterns/notice';
|
|
34
40
|
export { Panel } from './patterns/panel';
|