@stackone/malachite 2.33.0 → 2.33.1

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 (3) hide show
  1. package/dist/components/selectionBarChrome.js +13 -13
  2. package/dist/components/selectionBarChrome.js.map +1 -1
  3. package/package.json +1 -1
package/dist/components/selectionBarChrome.js CHANGED
@@ -1,26 +1,26 @@
1
1
  import { FOCUS_RING_SELECTION_BAR as a } from "./focusRing.js";
2
- const o = 180, e = "malachite-selection-bar-track", r = "malachite-selection-bar-btn", i = "malachite-selection-bar", n = `
3
- .${e} {
2
+ const o = 180, r = "malachite-selection-bar-track", e = "malachite-selection-bar-btn", i = "malachite-selection-bar", n = `
3
+ .${r} {
4
4
  transition: opacity ${o}ms ease-out;
5
5
  }
6
6
  @media (prefers-reduced-motion: reduce) {
7
- .${e} {
7
+ .${r} {
8
8
  transition: none;
9
9
  }
10
10
  }
11
- .${r}--primary {
11
+ .${e}--primary {
12
12
  background-color: var(--malachite-selection-bar-foreground);
13
13
  color: var(--malachite-selection-bar-background);
14
14
  border: 1px solid var(--malachite-selection-bar-primary-border);
15
15
  box-shadow: var(--malachite-shadow-default, 0px 1px 0px 0px rgba(0, 0, 0, 0.15));
16
16
  }
17
- .${r}--primary:hover:not(:disabled) {
17
+ .${e}--primary:hover:not(:disabled) {
18
18
  background-image: linear-gradient(
19
19
  color-mix(in srgb, var(--malachite-selection-bar-foreground) 88%, var(--malachite-selection-bar-background)),
20
20
  color-mix(in srgb, var(--malachite-selection-bar-foreground) 88%, var(--malachite-selection-bar-background))
21
21
  );
22
22
  }
23
- .${r}--secondary {
23
+ .${e}--secondary {
24
24
  background-color: var(--malachite-selection-bar-divider);
25
25
  background-image: linear-gradient(
26
26
  color-mix(in srgb, var(--malachite-selection-bar-foreground) 16%, var(--malachite-selection-bar-background)),
@@ -28,28 +28,28 @@ const o = 180, e = "malachite-selection-bar-track", r = "malachite-selection-bar
28
28
  );
29
29
  color: var(--malachite-selection-bar-foreground);
30
30
  }
31
- .${r}--secondary:hover:not(:disabled) {
31
+ .${e}--secondary:hover:not(:disabled) {
32
32
  background-image: linear-gradient(
33
33
  color-mix(in srgb, var(--malachite-selection-bar-foreground) 30%, var(--malachite-selection-bar-background)),
34
34
  color-mix(in srgb, var(--malachite-selection-bar-foreground) 30%, var(--malachite-selection-bar-background))
35
35
  );
36
36
  }
37
- .${r}--quiet {
37
+ .${e}--quiet {
38
38
  background-color: transparent;
39
39
  color: var(--malachite-selection-bar-foreground);
40
40
  }
41
- .${r}--quiet:hover:not(:disabled) {
41
+ .${e}--quiet:hover:not(:disabled) {
42
42
  background-image: linear-gradient(
43
43
  color-mix(in srgb, var(--malachite-selection-bar-foreground) 16%, var(--malachite-selection-bar-background)),
44
44
  color-mix(in srgb, var(--malachite-selection-bar-foreground) 16%, var(--malachite-selection-bar-background))
45
45
  );
46
46
  }
47
- `, c = `${r} inline-flex h-7 shrink-0 cursor-pointer items-center gap-1.5 whitespace-nowrap rounded-[10px] border border-solid border-transparent px-[10px] text-[13px] font-medium disabled:cursor-not-allowed disabled:opacity-50 ${a}`, l = "flex items-center gap-2 rounded-2xl border border-solid border-[var(--malachite-selection-bar-border)] py-[6px] pl-[12px] pr-[6px] bg-[var(--malachite-selection-bar-background)] text-[var(--malachite-selection-bar-foreground)]", s = "var(--malachite-selection-bar-shadow)", d = "flex flex-col items-stretch gap-[2px] rounded-2xl p-[2px] bg-[var(--malachite-selection-bar-notice-background)]", b = "var(--malachite-selection-bar-notice-shadow)", m = "m-0 px-[12px] py-[8px] text-center text-[13px] font-medium leading-normal text-[var(--malachite-selection-bar-notice-foreground)]", g = "shrink-0 select-none text-[13px]", h = "text-[var(--malachite-selection-bar-muted-foreground)]";
47
+ `, c = `${e} inline-flex h-7 shrink-0 cursor-pointer items-center gap-1.5 whitespace-nowrap rounded-[10px] border border-solid border-transparent px-[10px] text-[13px] font-medium disabled:cursor-not-allowed disabled:opacity-50 ${a}`, l = "flex items-center justify-center gap-2 rounded-2xl border border-solid border-[var(--malachite-selection-bar-border)] py-[6px] pl-[12px] pr-[6px] bg-[var(--malachite-selection-bar-background)] text-[var(--malachite-selection-bar-foreground)]", s = "var(--malachite-selection-bar-shadow)", d = "flex flex-col items-stretch gap-[2px] rounded-2xl p-[2px] bg-[var(--malachite-selection-bar-notice-background)]", b = "var(--malachite-selection-bar-notice-shadow)", m = "m-0 px-[12px] py-[8px] text-center text-[13px] font-medium leading-normal text-[var(--malachite-selection-bar-notice-foreground)]", g = "shrink-0 select-none text-[13px]", u = "text-[var(--malachite-selection-bar-muted-foreground)]";
48
48
  export {
49
49
  c as PILL_BUTTON_BASE,
50
- r as PILL_BUTTON_CLASS,
50
+ e as PILL_BUTTON_CLASS,
51
51
  g as PILL_DIVIDER,
52
- h as PILL_MUTED_TEXT,
52
+ u as PILL_MUTED_TEXT,
53
53
  b as PILL_NOTICE_SHADOW,
54
54
  d as PILL_NOTICE_SLEEVE,
55
55
  m as PILL_NOTICE_TEXT,
@@ -57,7 +57,7 @@ export {
57
57
  n as PILL_SHEET_CSS,
58
58
  i as PILL_SHEET_ID,
59
59
  l as PILL_SURFACE,
60
- e as PILL_TRACK_CLASS,
60
+ r as PILL_TRACK_CLASS,
61
61
  o as PILL_TRANSITION_MS
62
62
  };
63
63
  //# sourceMappingURL=selectionBarChrome.js.map
package/dist/components/selectionBarChrome.js.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":"selectionBarChrome.js","sources":["../../src/components/selectionBarChrome.ts"],"sourcesContent":["import { FOCUS_RING_SELECTION_BAR } from './focusRing';\n\n/** A `value + label` pair, e.g. `{ value: 3, label: 'Added' }`. */\nexport interface SelectionBarCount {\n value: string | number;\n label: string;\n}\n\nexport type SelectionBarEmphasis = 'primary' | 'secondary' | 'quiet';\n\nexport const PILL_TRANSITION_MS = 180;\n\nexport const PILL_TRACK_CLASS = 'malachite-selection-bar-track';\nexport const PILL_BUTTON_CLASS = 'malachite-selection-bar-btn';\nexport const PILL_SHEET_ID = 'malachite-selection-bar';\n\nexport const PILL_SHEET_CSS = `\n.${PILL_TRACK_CLASS} {\n transition: opacity ${PILL_TRANSITION_MS}ms ease-out;\n}\n@media (prefers-reduced-motion: reduce) {\n .${PILL_TRACK_CLASS} {\n transition: none;\n }\n}\n.${PILL_BUTTON_CLASS}--primary {\n background-color: var(--malachite-selection-bar-foreground);\n color: var(--malachite-selection-bar-background);\n border: 1px solid var(--malachite-selection-bar-primary-border);\n box-shadow: var(--malachite-shadow-default, 0px 1px 0px 0px rgba(0, 0, 0, 0.15));\n}\n.${PILL_BUTTON_CLASS}--primary:hover:not(:disabled) {\n background-image: linear-gradient(\n color-mix(in srgb, var(--malachite-selection-bar-foreground) 88%, var(--malachite-selection-bar-background)),\n color-mix(in srgb, var(--malachite-selection-bar-foreground) 88%, var(--malachite-selection-bar-background))\n );\n}\n.${PILL_BUTTON_CLASS}--secondary {\n background-color: var(--malachite-selection-bar-divider);\n background-image: linear-gradient(\n color-mix(in srgb, var(--malachite-selection-bar-foreground) 16%, var(--malachite-selection-bar-background)),\n color-mix(in srgb, var(--malachite-selection-bar-foreground) 16%, var(--malachite-selection-bar-background))\n );\n color: var(--malachite-selection-bar-foreground);\n}\n.${PILL_BUTTON_CLASS}--secondary:hover:not(:disabled) {\n background-image: linear-gradient(\n color-mix(in srgb, var(--malachite-selection-bar-foreground) 30%, var(--malachite-selection-bar-background)),\n color-mix(in srgb, var(--malachite-selection-bar-foreground) 30%, var(--malachite-selection-bar-background))\n );\n}\n.${PILL_BUTTON_CLASS}--quiet {\n background-color: transparent;\n color: var(--malachite-selection-bar-foreground);\n}\n.${PILL_BUTTON_CLASS}--quiet:hover:not(:disabled) {\n background-image: linear-gradient(\n color-mix(in srgb, var(--malachite-selection-bar-foreground) 16%, var(--malachite-selection-bar-background)),\n color-mix(in srgb, var(--malachite-selection-bar-foreground) 16%, var(--malachite-selection-bar-background))\n );\n}\n`;\n\nexport const PILL_BUTTON_BASE = `${PILL_BUTTON_CLASS} inline-flex h-7 shrink-0 cursor-pointer items-center gap-1.5 whitespace-nowrap rounded-[10px] border border-solid border-transparent px-[10px] text-[13px] font-medium disabled:cursor-not-allowed disabled:opacity-50 ${FOCUS_RING_SELECTION_BAR}`;\n\nexport const PILL_SURFACE =\n 'flex items-center gap-2 rounded-2xl border border-solid border-[var(--malachite-selection-bar-border)] py-[6px] pl-[12px] pr-[6px] bg-[var(--malachite-selection-bar-background)] text-[var(--malachite-selection-bar-foreground)]';\n\nexport const PILL_SHADOW = 'var(--malachite-selection-bar-shadow)';\n\n/** The sleeve a `notice` wraps the pill in: the pill keeps its own surface inside it. */\nexport const PILL_NOTICE_SLEEVE =\n 'flex flex-col items-stretch gap-[2px] rounded-2xl p-[2px] bg-[var(--malachite-selection-bar-notice-background)]';\n\nexport const PILL_NOTICE_SHADOW = 'var(--malachite-selection-bar-notice-shadow)';\n\nexport const PILL_NOTICE_TEXT =\n 'm-0 px-[12px] py-[8px] text-center text-[13px] font-medium leading-normal text-[var(--malachite-selection-bar-notice-foreground)]';\n\nexport const PILL_DIVIDER = 'shrink-0 select-none text-[13px]';\n\nexport const PILL_MUTED_TEXT = 'text-[var(--malachite-selection-bar-muted-foreground)]';\n"],"names":["PILL_TRANSITION_MS","PILL_TRACK_CLASS","PILL_BUTTON_CLASS","PILL_SHEET_ID","PILL_SHEET_CSS","PILL_BUTTON_BASE","FOCUS_RING_SELECTION_BAR","PILL_SURFACE","PILL_SHADOW","PILL_NOTICE_SLEEVE","PILL_NOTICE_SHADOW","PILL_NOTICE_TEXT","PILL_DIVIDER","PILL_MUTED_TEXT"],"mappings":";AAUO,MAAMA,IAAqB,KAErBC,IAAmB,iCACnBC,IAAoB,+BACpBC,IAAgB,2BAEhBC,IAAiB;AAAA,GAC3BH,CAAgB;AAAA,0BACOD,CAAkB;AAAA;AAAA;AAAA,OAGrCC,CAAgB;AAAA;AAAA;AAAA;AAAA,GAIpBC,CAAiB;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,GAMjBA,CAAiB;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,GAMjBA,CAAiB;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,GAQjBA,CAAiB;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,GAMjBA,CAAiB;AAAA;AAAA;AAAA;AAAA,GAIjBA,CAAiB;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,GAQPG,IAAmB,GAAGH,CAAiB,2NAA2NI,CAAwB,IAE1RC,IACT,sOAESC,IAAc,yCAGdC,IACT,mHAESC,IAAqB,gDAErBC,IACT,qIAESC,IAAe,oCAEfC,IAAkB;"}
1
+ {"version":3,"file":"selectionBarChrome.js","sources":["../../src/components/selectionBarChrome.ts"],"sourcesContent":["import { FOCUS_RING_SELECTION_BAR } from './focusRing';\n\n/** A `value + label` pair, e.g. `{ value: 3, label: 'Added' }`. */\nexport interface SelectionBarCount {\n value: string | number;\n label: string;\n}\n\nexport type SelectionBarEmphasis = 'primary' | 'secondary' | 'quiet';\n\nexport const PILL_TRANSITION_MS = 180;\n\nexport const PILL_TRACK_CLASS = 'malachite-selection-bar-track';\nexport const PILL_BUTTON_CLASS = 'malachite-selection-bar-btn';\nexport const PILL_SHEET_ID = 'malachite-selection-bar';\n\nexport const PILL_SHEET_CSS = `\n.${PILL_TRACK_CLASS} {\n transition: opacity ${PILL_TRANSITION_MS}ms ease-out;\n}\n@media (prefers-reduced-motion: reduce) {\n .${PILL_TRACK_CLASS} {\n transition: none;\n }\n}\n.${PILL_BUTTON_CLASS}--primary {\n background-color: var(--malachite-selection-bar-foreground);\n color: var(--malachite-selection-bar-background);\n border: 1px solid var(--malachite-selection-bar-primary-border);\n box-shadow: var(--malachite-shadow-default, 0px 1px 0px 0px rgba(0, 0, 0, 0.15));\n}\n.${PILL_BUTTON_CLASS}--primary:hover:not(:disabled) {\n background-image: linear-gradient(\n color-mix(in srgb, var(--malachite-selection-bar-foreground) 88%, var(--malachite-selection-bar-background)),\n color-mix(in srgb, var(--malachite-selection-bar-foreground) 88%, var(--malachite-selection-bar-background))\n );\n}\n.${PILL_BUTTON_CLASS}--secondary {\n background-color: var(--malachite-selection-bar-divider);\n background-image: linear-gradient(\n color-mix(in srgb, var(--malachite-selection-bar-foreground) 16%, var(--malachite-selection-bar-background)),\n color-mix(in srgb, var(--malachite-selection-bar-foreground) 16%, var(--malachite-selection-bar-background))\n );\n color: var(--malachite-selection-bar-foreground);\n}\n.${PILL_BUTTON_CLASS}--secondary:hover:not(:disabled) {\n background-image: linear-gradient(\n color-mix(in srgb, var(--malachite-selection-bar-foreground) 30%, var(--malachite-selection-bar-background)),\n color-mix(in srgb, var(--malachite-selection-bar-foreground) 30%, var(--malachite-selection-bar-background))\n );\n}\n.${PILL_BUTTON_CLASS}--quiet {\n background-color: transparent;\n color: var(--malachite-selection-bar-foreground);\n}\n.${PILL_BUTTON_CLASS}--quiet:hover:not(:disabled) {\n background-image: linear-gradient(\n color-mix(in srgb, var(--malachite-selection-bar-foreground) 16%, var(--malachite-selection-bar-background)),\n color-mix(in srgb, var(--malachite-selection-bar-foreground) 16%, var(--malachite-selection-bar-background))\n );\n}\n`;\n\nexport const PILL_BUTTON_BASE = `${PILL_BUTTON_CLASS} inline-flex h-7 shrink-0 cursor-pointer items-center gap-1.5 whitespace-nowrap rounded-[10px] border border-solid border-transparent px-[10px] text-[13px] font-medium disabled:cursor-not-allowed disabled:opacity-50 ${FOCUS_RING_SELECTION_BAR}`;\n\nexport const PILL_SURFACE =\n 'flex items-center justify-center gap-2 rounded-2xl border border-solid border-[var(--malachite-selection-bar-border)] py-[6px] pl-[12px] pr-[6px] bg-[var(--malachite-selection-bar-background)] text-[var(--malachite-selection-bar-foreground)]';\n\nexport const PILL_SHADOW = 'var(--malachite-selection-bar-shadow)';\n\n/** The sleeve a `notice` wraps the pill in: the pill keeps its own surface inside it. */\nexport const PILL_NOTICE_SLEEVE =\n 'flex flex-col items-stretch gap-[2px] rounded-2xl p-[2px] bg-[var(--malachite-selection-bar-notice-background)]';\n\nexport const PILL_NOTICE_SHADOW = 'var(--malachite-selection-bar-notice-shadow)';\n\nexport const PILL_NOTICE_TEXT =\n 'm-0 px-[12px] py-[8px] text-center text-[13px] font-medium leading-normal text-[var(--malachite-selection-bar-notice-foreground)]';\n\nexport const PILL_DIVIDER = 'shrink-0 select-none text-[13px]';\n\nexport const PILL_MUTED_TEXT = 'text-[var(--malachite-selection-bar-muted-foreground)]';\n"],"names":["PILL_TRANSITION_MS","PILL_TRACK_CLASS","PILL_BUTTON_CLASS","PILL_SHEET_ID","PILL_SHEET_CSS","PILL_BUTTON_BASE","FOCUS_RING_SELECTION_BAR","PILL_SURFACE","PILL_SHADOW","PILL_NOTICE_SLEEVE","PILL_NOTICE_SHADOW","PILL_NOTICE_TEXT","PILL_DIVIDER","PILL_MUTED_TEXT"],"mappings":";AAUO,MAAMA,IAAqB,KAErBC,IAAmB,iCACnBC,IAAoB,+BACpBC,IAAgB,2BAEhBC,IAAiB;AAAA,GAC3BH,CAAgB;AAAA,0BACOD,CAAkB;AAAA;AAAA;AAAA,OAGrCC,CAAgB;AAAA;AAAA;AAAA;AAAA,GAIpBC,CAAiB;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,GAMjBA,CAAiB;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,GAMjBA,CAAiB;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,GAQjBA,CAAiB;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,GAMjBA,CAAiB;AAAA;AAAA;AAAA;AAAA,GAIjBA,CAAiB;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,GAQPG,IAAmB,GAAGH,CAAiB,2NAA2NI,CAAwB,IAE1RC,IACT,qPAESC,IAAc,yCAGdC,IACT,mHAESC,IAAqB,gDAErBC,IACT,qIAESC,IAAe,oCAEfC,IAAkB;"}
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@stackone/malachite",
3
- "version": "2.33.0",
3
+ "version": "2.33.1",
4
4
  "description": "StackOne's themeable React component library — Shadow DOM isolated, scoped Tailwind, theme-token driven.",
5
5
  "license": "MIT",
6
6
  "author": "StackOne",