@workday/canvas-kit-preview-react 15.0.0-alpha.0064-next.0 → 15.0.0-alpha.0075-next.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.
Files changed (106) hide show
  1. package/dist/commonjs/avatar/lib/Avatar.js +13 -13
  2. package/dist/commonjs/avatar/lib/AvatarImage.js +1 -1
  3. package/dist/commonjs/avatar/lib/AvatarName.js +1 -1
  4. package/dist/commonjs/avatar/lib/BaseAvatar.js +12 -12
  5. package/dist/commonjs/color-picker/lib/ColorPicker.js +1 -1
  6. package/dist/commonjs/color-picker/lib/parts/ColorReset.js +1 -1
  7. package/dist/commonjs/color-picker/lib/parts/SwatchBook.js +1 -1
  8. package/dist/commonjs/divider/lib/Divider.js +1 -1
  9. package/dist/commonjs/index.d.ts +0 -1
  10. package/dist/commonjs/index.d.ts.map +1 -1
  11. package/dist/commonjs/index.js +0 -1
  12. package/dist/commonjs/loading-sparkles/lib/LoadingSparkles.js +2 -2
  13. package/dist/commonjs/multi-select/lib/MultiSelectInput.js +3 -3
  14. package/dist/commonjs/multi-select/lib/MultiSelectedItem.js +1 -1
  15. package/dist/commonjs/radio/lib/RadioGroup.js +3 -3
  16. package/dist/commonjs/radio/lib/RadioLabel.js +1 -1
  17. package/dist/commonjs/radio/lib/RadioText.js +4 -4
  18. package/dist/commonjs/radio/lib/StyledRadioButton.js +5 -5
  19. package/dist/commonjs/side-panel/lib/SidePanel.js +7 -7
  20. package/dist/commonjs/side-panel/lib/SidePanelToggleButton.js +11 -11
  21. package/dist/commonjs/status-indicator/lib/StatusIndicator.js +15 -15
  22. package/dist/commonjs/status-indicator/lib/StatusIndicatorLabel.js +1 -1
  23. package/dist/commonjs/version/lib/version.js +1 -1
  24. package/dist/es6/avatar/lib/Avatar.js +13 -13
  25. package/dist/es6/avatar/lib/AvatarImage.js +1 -1
  26. package/dist/es6/avatar/lib/AvatarName.js +1 -1
  27. package/dist/es6/avatar/lib/BaseAvatar.js +12 -12
  28. package/dist/es6/color-picker/lib/ColorPicker.js +1 -1
  29. package/dist/es6/color-picker/lib/parts/ColorReset.js +1 -1
  30. package/dist/es6/color-picker/lib/parts/SwatchBook.js +1 -1
  31. package/dist/es6/divider/lib/Divider.js +1 -1
  32. package/dist/es6/index.d.ts +0 -1
  33. package/dist/es6/index.d.ts.map +1 -1
  34. package/dist/es6/index.js +0 -1
  35. package/dist/es6/loading-sparkles/lib/LoadingSparkles.js +2 -2
  36. package/dist/es6/multi-select/lib/MultiSelectInput.js +3 -3
  37. package/dist/es6/multi-select/lib/MultiSelectedItem.js +1 -1
  38. package/dist/es6/radio/lib/RadioGroup.js +3 -3
  39. package/dist/es6/radio/lib/RadioLabel.js +1 -1
  40. package/dist/es6/radio/lib/RadioText.js +4 -4
  41. package/dist/es6/radio/lib/StyledRadioButton.js +5 -5
  42. package/dist/es6/side-panel/lib/SidePanel.js +7 -7
  43. package/dist/es6/side-panel/lib/SidePanelToggleButton.js +11 -11
  44. package/dist/es6/status-indicator/lib/StatusIndicator.js +15 -15
  45. package/dist/es6/status-indicator/lib/StatusIndicatorLabel.js +1 -1
  46. package/dist/es6/version/lib/version.js +1 -1
  47. package/index.ts +0 -1
  48. package/multi-select/lib/MultiSelectedItem.tsx +1 -1
  49. package/package.json +4 -4
  50. package/dist/commonjs/pill/index.d.ts +0 -8
  51. package/dist/commonjs/pill/index.d.ts.map +0 -1
  52. package/dist/commonjs/pill/index.js +0 -23
  53. package/dist/commonjs/pill/lib/Pill.d.ts +0 -265
  54. package/dist/commonjs/pill/lib/Pill.d.ts.map +0 -1
  55. package/dist/commonjs/pill/lib/Pill.js +0 -147
  56. package/dist/commonjs/pill/lib/PillAvatar.d.ts +0 -526
  57. package/dist/commonjs/pill/lib/PillAvatar.d.ts.map +0 -1
  58. package/dist/commonjs/pill/lib/PillAvatar.js +0 -22
  59. package/dist/commonjs/pill/lib/PillCount.d.ts +0 -12
  60. package/dist/commonjs/pill/lib/PillCount.d.ts.map +0 -1
  61. package/dist/commonjs/pill/lib/PillCount.js +0 -21
  62. package/dist/commonjs/pill/lib/PillIcon.d.ts +0 -54
  63. package/dist/commonjs/pill/lib/PillIcon.d.ts.map +0 -1
  64. package/dist/commonjs/pill/lib/PillIcon.js +0 -20
  65. package/dist/commonjs/pill/lib/PillIconButton.d.ts +0 -148
  66. package/dist/commonjs/pill/lib/PillIconButton.d.ts.map +0 -1
  67. package/dist/commonjs/pill/lib/PillIconButton.js +0 -21
  68. package/dist/commonjs/pill/lib/PillLabel.d.ts +0 -14
  69. package/dist/commonjs/pill/lib/PillLabel.d.ts.map +0 -1
  70. package/dist/commonjs/pill/lib/PillLabel.js +0 -17
  71. package/dist/commonjs/pill/lib/usePillModel.d.ts +0 -46
  72. package/dist/commonjs/pill/lib/usePillModel.d.ts.map +0 -1
  73. package/dist/commonjs/pill/lib/usePillModel.js +0 -24
  74. package/dist/es6/pill/index.d.ts +0 -8
  75. package/dist/es6/pill/index.d.ts.map +0 -1
  76. package/dist/es6/pill/index.js +0 -7
  77. package/dist/es6/pill/lib/Pill.d.ts +0 -265
  78. package/dist/es6/pill/lib/Pill.d.ts.map +0 -1
  79. package/dist/es6/pill/lib/Pill.js +0 -144
  80. package/dist/es6/pill/lib/PillAvatar.d.ts +0 -526
  81. package/dist/es6/pill/lib/PillAvatar.d.ts.map +0 -1
  82. package/dist/es6/pill/lib/PillAvatar.js +0 -19
  83. package/dist/es6/pill/lib/PillCount.d.ts +0 -12
  84. package/dist/es6/pill/lib/PillCount.d.ts.map +0 -1
  85. package/dist/es6/pill/lib/PillCount.js +0 -18
  86. package/dist/es6/pill/lib/PillIcon.d.ts +0 -54
  87. package/dist/es6/pill/lib/PillIcon.d.ts.map +0 -1
  88. package/dist/es6/pill/lib/PillIcon.js +0 -17
  89. package/dist/es6/pill/lib/PillIconButton.d.ts +0 -148
  90. package/dist/es6/pill/lib/PillIconButton.d.ts.map +0 -1
  91. package/dist/es6/pill/lib/PillIconButton.js +0 -18
  92. package/dist/es6/pill/lib/PillLabel.d.ts +0 -14
  93. package/dist/es6/pill/lib/PillLabel.d.ts.map +0 -1
  94. package/dist/es6/pill/lib/PillLabel.js +0 -14
  95. package/dist/es6/pill/lib/usePillModel.d.ts +0 -46
  96. package/dist/es6/pill/lib/usePillModel.d.ts.map +0 -1
  97. package/dist/es6/pill/lib/usePillModel.js +0 -21
  98. package/pill/index.ts +0 -7
  99. package/pill/lib/Pill.tsx +0 -285
  100. package/pill/lib/PillAvatar.tsx +0 -35
  101. package/pill/lib/PillCount.tsx +0 -44
  102. package/pill/lib/PillIcon.tsx +0 -32
  103. package/pill/lib/PillIconButton.tsx +0 -86
  104. package/pill/lib/PillLabel.tsx +0 -32
  105. package/pill/lib/usePillModel.tsx +0 -23
  106. package/pill/package.json +0 -6
@@ -1,19 +0,0 @@
1
- import { jsx as _jsx } from "react/jsx-runtime";
2
- import { createSubcomponent } from '@workday/canvas-kit-react/common';
3
- import { Avatar, avatarStencil } from '@workday/canvas-kit-preview-react/avatar';
4
- import { usePillModel } from './usePillModel';
5
- import { createStencil, px2rem } from '@workday/canvas-kit-styling';
6
- import { mergeStyles } from '@workday/canvas-kit-react/layout';
7
- import { system } from '@workday/canvas-tokens-web';
8
- export const pillAvatarStencil = createStencil({
9
- extends: avatarStencil,
10
- base: { name: "3bj1rp", styles: "box-sizing:border-box;flex:0 0 auto;font-family:var(--cnvs-sys-font-family-default);font-weight:var(--cnvs-sys-font-weight-normal);line-height:var(--cnvs-sys-line-height-subtext-small);font-size:var(--cnvs-sys-font-size-subtext-small);letter-spacing:var(--cnvs-base-letter-spacing-50);&:disabled, &.disabled{opacity:var(--cnvs-sys-opacity-disabled);}" }
11
- }, "pill-avatar-947fab");
12
- export const PillAvatar = createSubcomponent('div')({
13
- modelHook: usePillModel,
14
- })(({ size, ...elemProps }, Element, _model) => {
15
- return (_jsx(Avatar, { isDecorative: true, as: Element, size: px2rem(18), ...mergeStyles(elemProps, [
16
- pillAvatarStencil(),
17
- _model.state.disabled ? 'disabled' : undefined,
18
- ]) }));
19
- });
@@ -1,12 +0,0 @@
1
- import { FlexProps } from '@workday/canvas-kit-react/layout';
2
- export interface PillCountProps extends FlexProps {
3
- }
4
- export declare const pillCountStencil: import("@workday/canvas-kit-styling").Stencil<import("@workday/canvas-kit-styling").StencilModifierConfig<{}, {
5
- backgroundColor: string;
6
- borderColor: string;
7
- }, never>, {}, {
8
- backgroundColor: string;
9
- borderColor: string;
10
- }, never, never>;
11
- export declare const PillCount: import("@workday/canvas-kit-react/common").ElementComponent<"span", PillCountProps>;
12
- //# sourceMappingURL=PillCount.d.ts.map
@@ -1 +0,0 @@
1
- {"version":3,"file":"PillCount.d.ts","sourceRoot":"","sources":["../../../../pill/lib/PillCount.tsx"],"names":[],"mappings":"AACA,OAAO,EAAC,SAAS,EAAc,MAAM,kCAAkC,CAAC;AAIxE,MAAM,WAAW,cAAe,SAAQ,SAAS;CAAG;AAEpD,eAAO,MAAM,gBAAgB;;;;;;gBAyB3B,CAAC;AAEH,eAAO,MAAM,SAAS,qFASpB,CAAC"}
@@ -1,18 +0,0 @@
1
- import { jsx as _jsx } from "react/jsx-runtime";
2
- import { createComponent } from '@workday/canvas-kit-react/common';
3
- import { mergeStyles } from '@workday/canvas-kit-react/layout';
4
- import { calc, createStencil, cssVar, px2rem } from '@workday/canvas-kit-styling';
5
- import { system } from '@workday/canvas-tokens-web';
6
- export const pillCountStencil = createStencil({
7
- vars: {
8
- backgroundColor: '',
9
- borderColor: '',
10
- },
11
- base: { name: "1broik", styles: "box-sizing:border-box;border-start-start-radius:var(--cnvs-sys-shape-zero);border-start-end-radius:var(--cnvs-sys-shape-x1);border-end-start-radius:var(--cnvs-sys-shape-zero);border-end-end-radius:var(--cnvs-sys-shape-x1);border-width:0.0625rem;border-inline-start-width:var(--cnvs-sys-space-zero);border-style:solid;border-color:var(--borderColor-pill-count-d778e9, var(--cnvs-sys-color-border-transparent));display:inline-flex;align-items:center;justify-content:center;height:1.375rem;width:var(--cnvs-sys-space-x6);padding:var(--cnvs-sys-space-zero) var(--cnvs-sys-space-x1);margin-inline-end:calc(var(--cnvs-sys-space-x2) * -1);margin-inline-start:var(--cnvs-sys-space-x1);background-color:var(--backgroundColor-pill-count-d778e9, var(--cnvs-sys-color-bg-alt-stronger));flex:0 0 auto;" }
12
- }, "pill-count-d778e9");
13
- export const PillCount = createComponent('span')({
14
- displayName: 'Pill.Count',
15
- Component: ({ children, ...elemProps }, ref, Element) => {
16
- return (_jsx(Element, { ref: ref, ...mergeStyles(elemProps, pillCountStencil()), children: children }));
17
- },
18
- });
@@ -1,54 +0,0 @@
1
- import { SystemIconProps } from '@workday/canvas-kit-react/icon';
2
- export interface PillIconProps extends Partial<SystemIconProps> {
3
- }
4
- export declare const pillIconStencil: import("@workday/canvas-kit-styling").Stencil<import("@workday/canvas-kit-styling").StencilModifierConfig<{}, {}, import("@workday/canvas-kit-styling").Stencil<{}, {}, {
5
- color: string;
6
- accentColor: string;
7
- backgroundColor: string;
8
- }, import("@workday/canvas-kit-styling").Stencil<{
9
- shouldMirror: {
10
- true: {
11
- transform: string;
12
- };
13
- };
14
- shouldMirrorInRTL: {
15
- true: {
16
- '&:dir(rtl)': {
17
- transform: string;
18
- };
19
- };
20
- };
21
- }, {}, {
22
- width: string;
23
- height: string;
24
- size: string;
25
- }, never, never>, never>>, {}, {}, import("@workday/canvas-kit-styling").Stencil<{}, {}, {
26
- color: string;
27
- accentColor: string;
28
- backgroundColor: string;
29
- }, import("@workday/canvas-kit-styling").Stencil<{
30
- shouldMirror: {
31
- true: {
32
- transform: string;
33
- };
34
- };
35
- shouldMirrorInRTL: {
36
- true: {
37
- '&:dir(rtl)': {
38
- transform: string;
39
- };
40
- };
41
- };
42
- }, {}, {
43
- width: string;
44
- height: string;
45
- size: string;
46
- }, never, never>, never>, never>;
47
- export declare const PillIcon: import("@workday/canvas-kit-react/common").ElementComponentM<"span", PillIconProps, {
48
- state: {
49
- id: string;
50
- disabled: boolean;
51
- };
52
- events: {};
53
- }>;
54
- //# sourceMappingURL=PillIcon.d.ts.map
@@ -1 +0,0 @@
1
- {"version":3,"file":"PillIcon.d.ts","sourceRoot":"","sources":["../../../../pill/lib/PillIcon.tsx"],"names":[],"mappings":"AAEA,OAAO,EAAa,eAAe,EAAoB,MAAM,gCAAgC,CAAC;AAO9F,MAAM,WAAW,aAAc,SAAQ,OAAO,CAAC,eAAe,CAAC;CAAG;AAElE,eAAO,MAAM,eAAe;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;gCAO1B,CAAC;AAEH,eAAO,MAAM,QAAQ;;;;;;EAWnB,CAAC"}
@@ -1,17 +0,0 @@
1
- import { jsx as _jsx } from "react/jsx-runtime";
2
- import { createSubcomponent } from '@workday/canvas-kit-react/common';
3
- import { SystemIcon, systemIconStencil } from '@workday/canvas-kit-react/icon';
4
- import { usePillModel } from './usePillModel';
5
- import { plusIcon } from '@workday/canvas-system-icons-web';
6
- import { calc, createStencil, px2rem } from '@workday/canvas-kit-styling';
7
- import { system } from '@workday/canvas-tokens-web';
8
- import { mergeStyles } from '@workday/canvas-kit-react/layout';
9
- export const pillIconStencil = createStencil({
10
- extends: systemIconStencil,
11
- base: { name: "3n4tc1", styles: "box-sizing:border-box;margin-inline-start:calc(var(--cnvs-sys-space-x1) * -1);--size-svg-8fcab8:1.25rem;flex:0 0 auto;" }
12
- }, "pill-icon-4ef362");
13
- export const PillIcon = createSubcomponent('span')({
14
- modelHook: usePillModel,
15
- })(({ icon, ...elemProps }, Element) => {
16
- return (_jsx(SystemIcon, { as: Element, role: "img", icon: icon || plusIcon, ...mergeStyles(elemProps, pillIconStencil()) }));
17
- });
@@ -1,148 +0,0 @@
1
- import { SystemIconProps } from '@workday/canvas-kit-react/icon';
2
- export interface PillIconButtonProps extends Partial<SystemIconProps> {
3
- /**
4
- * The aria label for the removable icon. You must provide a valid string to represent the action.
5
- */
6
- 'aria-label'?: string;
7
- }
8
- export declare const pillIconButtonStencil: import("@workday/canvas-kit-styling").Stencil<import("@workday/canvas-kit-styling").StencilModifierConfig<{}, {}, import("@workday/canvas-kit-styling").Stencil<{
9
- size: {
10
- large: {
11
- fontWeight: "--cnvs-sys-font-weight-bold";
12
- height: "var(--cnvs-sys-size-xl, 3rem)";
13
- paddingInline: "var(--cnvs-sys-padding-xxl, var(--cnvs-sys-space-x8))";
14
- minWidth: "--cnvs-base-size-1400";
15
- fontFamily: "--cnvs-sys-font-family-default";
16
- lineHeight: "var(--cnvs-sys-line-height-body-sm, var(--cnvs-sys-line-height-body-small))";
17
- fontSize: "var(--cnvs-sys-font-size-body-sm, var(--cnvs-sys-font-size-body-small))";
18
- letterSpacing: "var(--cnvs-sys-letter-spacing-body-sm, var(--cnvs-base-letter-spacing-200))";
19
- };
20
- medium: {
21
- fontWeight: "--cnvs-sys-font-weight-bold";
22
- minWidth: "--cnvs-base-size-1200";
23
- paddingInline: "var(--cnvs-sys-padding-xl, var(--cnvs-sys-space-x6))";
24
- height: "var(--cnvs-sys-size-lg, var(--cnvs-sys-space-x10))";
25
- fontFamily: "var(--cnvs-sys-font-family-default, var(--cnvs-sys-font-family-default))";
26
- lineHeight: "var(--cnvs-sys-line-height-subtext-lg, var(--cnvs-sys-line-height-subtext-large))";
27
- fontSize: "var(--cnvs-sys-font-size-subtext-lg, var(--cnvs-sys-font-size-subtext-large))";
28
- letterSpacing: "var(--cnvs-sys-letter-spacing-subtext-lg, var(--cnvs-base-letter-spacing-50))";
29
- };
30
- small: {
31
- fontWeight: "--cnvs-sys-font-weight-bold";
32
- height: "var(--cnvs-sys-size-md, var(--cnvs-sys-space-x8))";
33
- minWidth: "--cnvs-base-size-1000";
34
- paddingInline: "var(--cnvs-sys-padding-md, var(--cnvs-sys-space-x4))";
35
- gap: "var(--cnvs-sys-gap-xs, var(--cnvs-sys-space-x1))";
36
- fontFamily: "var(--cnvs-sys-font-family-default, var(--cnvs-sys-font-family-default))";
37
- lineHeight: "var(--cnvs-sys-line-height-subtext-lg, var(--cnvs-sys-line-height-subtext-large))";
38
- fontSize: "var(--cnvs-sys-font-size-subtext-lg, var(--cnvs-sys-font-size-subtext-large))";
39
- letterSpacing: "var(--cnvs-sys-letter-spacing-subtext-lg, var(--cnvs-base-letter-spacing-50))";
40
- };
41
- extraSmall: {
42
- fontWeight: "--cnvs-sys-font-weight-bold";
43
- height: "var(--cnvs-sys-size-sm, var(--cnvs-sys-space-x6))";
44
- minWidth: string;
45
- paddingInline: "var(--cnvs-sys-padding-sm, var(--cnvs-sys-space-x3))";
46
- gap: "var(--cnvs-sys-gap-xs, var(--cnvs-sys-space-x1))";
47
- fontFamily: "var(--cnvs-sys-font-family-default, var(--cnvs-sys-font-family-default))";
48
- lineHeight: "var(--cnvs-sys-line-height-subtext-md, var(--cnvs-sys-line-height-subtext-medium))";
49
- fontSize: "var(--cnvs-sys-font-size-subtext-md, var(--cnvs-sys-font-size-subtext-medium))";
50
- letterSpacing: "var(--cnvs-sys-letter-spacing-subtext-md, var(--cnvs-base-letter-spacing-100))";
51
- };
52
- };
53
- grow: {
54
- true: {
55
- width: string;
56
- maxWidth: string;
57
- };
58
- };
59
- iconPosition: {
60
- only: {
61
- padding: "var(--cnvs-sys-padding-none, var(--cnvs-sys-space-zero))";
62
- };
63
- start: {};
64
- end: {};
65
- };
66
- }, {}, {
67
- background: string;
68
- border: string;
69
- boxShadowInner: string;
70
- boxShadowOuter: string;
71
- label: string;
72
- opacity: string;
73
- borderRadius: string;
74
- }, never, never>>, {}, {}, import("@workday/canvas-kit-styling").Stencil<{
75
- size: {
76
- large: {
77
- fontWeight: "--cnvs-sys-font-weight-bold";
78
- height: "var(--cnvs-sys-size-xl, 3rem)";
79
- paddingInline: "var(--cnvs-sys-padding-xxl, var(--cnvs-sys-space-x8))";
80
- minWidth: "--cnvs-base-size-1400";
81
- fontFamily: "--cnvs-sys-font-family-default";
82
- lineHeight: "var(--cnvs-sys-line-height-body-sm, var(--cnvs-sys-line-height-body-small))";
83
- fontSize: "var(--cnvs-sys-font-size-body-sm, var(--cnvs-sys-font-size-body-small))";
84
- letterSpacing: "var(--cnvs-sys-letter-spacing-body-sm, var(--cnvs-base-letter-spacing-200))";
85
- };
86
- medium: {
87
- fontWeight: "--cnvs-sys-font-weight-bold";
88
- minWidth: "--cnvs-base-size-1200";
89
- paddingInline: "var(--cnvs-sys-padding-xl, var(--cnvs-sys-space-x6))";
90
- height: "var(--cnvs-sys-size-lg, var(--cnvs-sys-space-x10))";
91
- fontFamily: "var(--cnvs-sys-font-family-default, var(--cnvs-sys-font-family-default))";
92
- lineHeight: "var(--cnvs-sys-line-height-subtext-lg, var(--cnvs-sys-line-height-subtext-large))";
93
- fontSize: "var(--cnvs-sys-font-size-subtext-lg, var(--cnvs-sys-font-size-subtext-large))";
94
- letterSpacing: "var(--cnvs-sys-letter-spacing-subtext-lg, var(--cnvs-base-letter-spacing-50))";
95
- };
96
- small: {
97
- fontWeight: "--cnvs-sys-font-weight-bold";
98
- height: "var(--cnvs-sys-size-md, var(--cnvs-sys-space-x8))";
99
- minWidth: "--cnvs-base-size-1000";
100
- paddingInline: "var(--cnvs-sys-padding-md, var(--cnvs-sys-space-x4))";
101
- gap: "var(--cnvs-sys-gap-xs, var(--cnvs-sys-space-x1))";
102
- fontFamily: "var(--cnvs-sys-font-family-default, var(--cnvs-sys-font-family-default))";
103
- lineHeight: "var(--cnvs-sys-line-height-subtext-lg, var(--cnvs-sys-line-height-subtext-large))";
104
- fontSize: "var(--cnvs-sys-font-size-subtext-lg, var(--cnvs-sys-font-size-subtext-large))";
105
- letterSpacing: "var(--cnvs-sys-letter-spacing-subtext-lg, var(--cnvs-base-letter-spacing-50))";
106
- };
107
- extraSmall: {
108
- fontWeight: "--cnvs-sys-font-weight-bold";
109
- height: "var(--cnvs-sys-size-sm, var(--cnvs-sys-space-x6))";
110
- minWidth: string;
111
- paddingInline: "var(--cnvs-sys-padding-sm, var(--cnvs-sys-space-x3))";
112
- gap: "var(--cnvs-sys-gap-xs, var(--cnvs-sys-space-x1))";
113
- fontFamily: "var(--cnvs-sys-font-family-default, var(--cnvs-sys-font-family-default))";
114
- lineHeight: "var(--cnvs-sys-line-height-subtext-md, var(--cnvs-sys-line-height-subtext-medium))";
115
- fontSize: "var(--cnvs-sys-font-size-subtext-md, var(--cnvs-sys-font-size-subtext-medium))";
116
- letterSpacing: "var(--cnvs-sys-letter-spacing-subtext-md, var(--cnvs-base-letter-spacing-100))";
117
- };
118
- };
119
- grow: {
120
- true: {
121
- width: string;
122
- maxWidth: string;
123
- };
124
- };
125
- iconPosition: {
126
- only: {
127
- padding: "var(--cnvs-sys-padding-none, var(--cnvs-sys-space-zero))";
128
- };
129
- start: {};
130
- end: {};
131
- };
132
- }, {}, {
133
- background: string;
134
- border: string;
135
- boxShadowInner: string;
136
- boxShadowOuter: string;
137
- label: string;
138
- opacity: string;
139
- borderRadius: string;
140
- }, never, never>, never>;
141
- export declare const PillIconButton: import("@workday/canvas-kit-react/common").ElementComponentM<"button", PillIconButtonProps, {
142
- state: {
143
- id: string;
144
- disabled: boolean;
145
- };
146
- events: {};
147
- }>;
148
- //# sourceMappingURL=PillIconButton.d.ts.map
@@ -1 +0,0 @@
1
- {"version":3,"file":"PillIconButton.d.ts","sourceRoot":"","sources":["../../../../pill/lib/PillIconButton.tsx"],"names":[],"mappings":"AACA,OAAO,EAAa,eAAe,EAAoB,MAAM,gCAAgC,CAAC;AAQ9F,MAAM,WAAW,mBAAoB,SAAQ,OAAO,CAAC,eAAe,CAAC;IACnE;;OAEG;IACH,YAAY,CAAC,EAAE,MAAM,CAAC;CACvB;AAED,eAAO,MAAM,qBAAqB;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;wBA+ChC,CAAC;AAEH,eAAO,MAAM,cAAc;;;;;;EAoB1B,CAAC"}
@@ -1,18 +0,0 @@
1
- import { jsx as _jsx } from "react/jsx-runtime";
2
- import { focusRing, createSubcomponent } from '@workday/canvas-kit-react/common';
3
- import { SystemIcon, systemIconStencil } from '@workday/canvas-kit-react/icon';
4
- import { usePillModel } from './usePillModel';
5
- import { xSmallIcon } from '@workday/canvas-system-icons-web';
6
- import { buttonStencil } from '@workday/canvas-kit-react/button';
7
- import { calc, createStencil, px2rem } from '@workday/canvas-kit-styling';
8
- import { system } from '@workday/canvas-tokens-web';
9
- import { mergeStyles } from '@workday/canvas-kit-react/layout';
10
- export const pillIconButtonStencil = createStencil({
11
- extends: buttonStencil,
12
- base: { name: "ipvb2", styles: "box-sizing:border-box;margin-inline-end:calc(0.4375rem * -1);margin-inline-start:calc(0.125rem * -1);border-radius:var(--cnvs-sys-shape-half);height:calc(var(--cnvs-sys-space-x4) + var(--cnvs-sys-space-x1));width:calc(var(--cnvs-sys-space-x4) + var(--cnvs-sys-space-x1));padding:var(--cnvs-sys-space-zero);overflow:visible;flex:0 0 auto;--border-button-f6d2bd:var(--cnvs-sys-color-border-transparent);--background-button-f6d2bd:var(--cnvs-sys-color-bg-alt-default);--color-system-icon-3a4847:var(--cnvs-sys-color-fg-strong);--size-svg-8fcab8:var(--cnvs-sys-space-x6);::after{content:\"\";height:var(--cnvs-sys-space-x8);width:var(--cnvs-sys-space-x8);position:absolute;left:calc(0.4375rem * -1);bottom:calc(0.4375rem * -1);margin:var(--cnvs-sys-space-zero);pointer-events:all;}&:focus-visible, &.focus{--border-button-f6d2bd:var(--cnvs-sys-color-border-transparent);--background-button-f6d2bd:var(--cnvs-sys-color-bg-alt-default);box-shadow:0 0 0 0px var(--cnvs-sys-color-border-transparent), 0 0 0 2px var(--cnvs-brand-common-focus-outline, rgba(8,117,225,1));}&:hover, &.hover{--border-button-f6d2bd:var(--cnvs-sys-color-border-transparent);--background-button-f6d2bd:var(--cnvs-sys-color-bg-alt-strong);}&:active, &.active{--border-button-f6d2bd:var(--cnvs-sys-color-border-transparent);--background-button-f6d2bd:var(--cnvs-sys-color-bg-alt-stronger);}&:disabled, &.disabled{--border-button-f6d2bd:var(--cnvs-sys-color-border-transparent);--background-button-f6d2bd:var(--cnvs-sys-color-bg-alt-default);--color-system-icon-3a4847:var(--cnvs-sys-color-fg-disabled);}" }
13
- }, "pill-icon-button-10e7a0");
14
- export const PillIconButton = createSubcomponent('button')({
15
- modelHook: usePillModel,
16
- })(({ size, icon, children, 'aria-label': ariaLabel = '', ...elemProps }, Element, model) => {
17
- return (_jsx(Element, { disabled: model.state.disabled, "aria-labelledby": `removable-${model.state.id} label-${model.state.id}`, ...mergeStyles(elemProps, pillIconButtonStencil()), children: _jsx(SystemIcon, { "aria-label": ariaLabel, id: `removable-${model.state.id}`, icon: icon || xSmallIcon, "aria-hidden": true, role: "img" }) }));
18
- });
@@ -1,14 +0,0 @@
1
- import { BoxProps } from '@workday/canvas-kit-react/layout';
2
- import { OverflowTooltipProps } from '@workday/canvas-kit-react/tooltip';
3
- export interface PillLabelProps extends BoxProps {
4
- tooltipProps?: Omit<OverflowTooltipProps, 'children'>;
5
- }
6
- export declare const pillLabelStencil: import("@workday/canvas-kit-styling").Stencil<import("@workday/canvas-kit-styling").StencilModifierConfig<{}, {}, never>, {}, {}, never, never>;
7
- export declare const PillLabel: import("@workday/canvas-kit-react/common").ElementComponentM<"span", PillLabelProps, {
8
- state: {
9
- id: string;
10
- disabled: boolean;
11
- };
12
- events: {};
13
- }>;
14
- //# sourceMappingURL=PillLabel.d.ts.map
@@ -1 +0,0 @@
1
- {"version":3,"file":"PillLabel.d.ts","sourceRoot":"","sources":["../../../../pill/lib/PillLabel.tsx"],"names":[],"mappings":"AACA,OAAO,EAAC,QAAQ,EAAc,MAAM,kCAAkC,CAAC;AACvE,OAAO,EAAkB,oBAAoB,EAAC,MAAM,mCAAmC,CAAC;AAMxF,MAAM,WAAW,cAAe,SAAQ,QAAQ;IAC9C,YAAY,CAAC,EAAE,IAAI,CAAC,oBAAoB,EAAE,UAAU,CAAC,CAAC;CACvD;AAED,eAAO,MAAM,gBAAgB,iJAO3B,CAAC;AAEH,eAAO,MAAM,SAAS;;;;;;EAUpB,CAAC"}
@@ -1,14 +0,0 @@
1
- import { jsx as _jsx } from "react/jsx-runtime";
2
- import { createSubcomponent } from '@workday/canvas-kit-react/common';
3
- import { mergeStyles } from '@workday/canvas-kit-react/layout';
4
- import { OverflowTooltip } from '@workday/canvas-kit-react/tooltip';
5
- import { usePillModel } from './usePillModel';
6
- import { createStencil } from '@workday/canvas-kit-styling';
7
- export const pillLabelStencil = createStencil({
8
- base: { name: "42fgoh", styles: "box-sizing:border-box;flex-shrink:1;white-space:nowrap;text-overflow:ellipsis;overflow:hidden;" }
9
- }, "pill-label-412177");
10
- export const PillLabel = createSubcomponent('span')({
11
- modelHook: usePillModel,
12
- })(({ tooltipProps, children, ...elemProps }, Element, model) => {
13
- return (_jsx(OverflowTooltip, { ...tooltipProps, children: _jsx(Element, { id: `label-${model.state.id}`, ...mergeStyles(elemProps, pillLabelStencil()), children: children }) }));
14
- });
@@ -1,46 +0,0 @@
1
- export declare const usePillModel: (<TT_Special_Generic>(config?: (Partial<{
2
- /**
3
- * Used to disable a pill and apply the correct styles.
4
- */
5
- disabled: boolean;
6
- /**
7
- * ID used to add accessibility labels to pill elements.
8
- * @default `useUniqueId()`
9
- */
10
- id: string;
11
- }> & {} & {}) | undefined) => {
12
- state: {
13
- id: string;
14
- /**
15
- * Used to disable a pill and apply the correct styles.
16
- */
17
- disabled: boolean;
18
- };
19
- events: {};
20
- }) & import("@workday/canvas-kit-react/common").ModelExtras<{
21
- /**
22
- * Used to disable a pill and apply the correct styles.
23
- */
24
- disabled: boolean;
25
- /**
26
- * ID used to add accessibility labels to pill elements.
27
- * @default `useUniqueId()`
28
- */
29
- id: string;
30
- }, {}, {
31
- id: string;
32
- /**
33
- * Used to disable a pill and apply the correct styles.
34
- */
35
- disabled: boolean;
36
- }, {}, {
37
- state: {
38
- id: string;
39
- /**
40
- * Used to disable a pill and apply the correct styles.
41
- */
42
- disabled: boolean;
43
- };
44
- events: {};
45
- }>;
46
- //# sourceMappingURL=usePillModel.d.ts.map
@@ -1 +0,0 @@
1
- {"version":3,"file":"usePillModel.d.ts","sourceRoot":"","sources":["../../../../pill/lib/usePillModel.tsx"],"names":[],"mappings":"AAEA,eAAO,MAAM,YAAY;IAErB;;OAEG;;IAEH;;;OAGG;;;;;QAPH;;WAEG;;;;;IAFH;;OAEG;;IAEH;;;OAGG;;;;IAPH;;OAEG;;;;;QAFH;;WAEG;;;;EAgBL,CAAC"}
@@ -1,21 +0,0 @@
1
- import { createModelHook, useUniqueId } from '@workday/canvas-kit-react/common';
2
- export const usePillModel = createModelHook({
3
- defaultConfig: {
4
- /**
5
- * Used to disable a pill and apply the correct styles.
6
- */
7
- disabled: false,
8
- /**
9
- * ID used to add accessibility labels to pill elements.
10
- * @default `useUniqueId()`
11
- */
12
- id: '',
13
- },
14
- })(config => {
15
- const id = useUniqueId(config.id);
16
- const state = {
17
- ...config,
18
- id,
19
- };
20
- return { state, events: {} };
21
- });
package/pill/index.ts DELETED
@@ -1,7 +0,0 @@
1
- export * from './lib/Pill';
2
- export * from './lib/usePillModel';
3
- export * from './lib/PillCount';
4
- export * from './lib/PillIconButton';
5
- export * from './lib/PillIcon';
6
- export * from './lib/PillLabel';
7
- export * from './lib/Pill';