jcicl 0.0.275 → 0.0.279

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.
@@ -4,6 +4,7 @@ export interface ButtonProps extends Omit<MuiButtonProps, 'variant' | 'size' | '
4
4
  size?: number;
5
5
  color?: string;
6
6
  highlightColor?: string;
7
+ hoverColor?: string;
7
8
  active?: boolean;
8
9
  }
9
10
  export declare const Button: React.FC<ButtonProps & {
package/Button/Button.js CHANGED
@@ -1,37 +1,37 @@
1
1
  import { jsxs as H, jsx as l } from "react/jsx-runtime";
2
- import * as g from "react";
3
- import { g as _, a as A, s as c, r as q, c as d, m as J, u as K, b as O, P as t, d as Q, e as v } from "../.chunks/DefaultPropsProvider.js";
2
+ import * as x from "react";
3
+ import { g as _, a as A, s as c, r as q, c as d, m as J, u as K, b as O, P as t, d as Q, e as g } from "../.chunks/DefaultPropsProvider.js";
4
4
  import { m as X } from "../.chunks/memoTheme.js";
5
5
  import { c as Y } from "../.chunks/createSimplePaletteValueFilter.js";
6
6
  import { B as S } from "../.chunks/ButtonBase.js";
7
7
  import { i as Z } from "../.chunks/emotion-styled.browser.esm.js";
8
- import { c as x } from "../.chunks/emotion-react.browser.esm.js";
8
+ import { c as f } from "../.chunks/emotion-react.browser.esm.js";
9
9
  import r from "../theme.js";
10
10
  function oo(o) {
11
11
  return _("MuiButton", o);
12
12
  }
13
- const u = A("MuiButton", ["root", "text", "textInherit", "textPrimary", "textSecondary", "textSuccess", "textError", "textInfo", "textWarning", "outlined", "outlinedInherit", "outlinedPrimary", "outlinedSecondary", "outlinedSuccess", "outlinedError", "outlinedInfo", "outlinedWarning", "contained", "containedInherit", "containedPrimary", "containedSecondary", "containedSuccess", "containedError", "containedInfo", "containedWarning", "disableElevation", "focusVisible", "disabled", "colorInherit", "colorPrimary", "colorSecondary", "colorSuccess", "colorError", "colorInfo", "colorWarning", "textSizeSmall", "textSizeMedium", "textSizeLarge", "outlinedSizeSmall", "outlinedSizeMedium", "outlinedSizeLarge", "containedSizeSmall", "containedSizeMedium", "containedSizeLarge", "sizeMedium", "sizeSmall", "sizeLarge", "fullWidth", "startIcon", "endIcon", "icon", "iconSizeSmall", "iconSizeMedium", "iconSizeLarge"]), R = /* @__PURE__ */ g.createContext({});
13
+ const b = A("MuiButton", ["root", "text", "textInherit", "textPrimary", "textSecondary", "textSuccess", "textError", "textInfo", "textWarning", "outlined", "outlinedInherit", "outlinedPrimary", "outlinedSecondary", "outlinedSuccess", "outlinedError", "outlinedInfo", "outlinedWarning", "contained", "containedInherit", "containedPrimary", "containedSecondary", "containedSuccess", "containedError", "containedInfo", "containedWarning", "disableElevation", "focusVisible", "disabled", "colorInherit", "colorPrimary", "colorSecondary", "colorSuccess", "colorError", "colorInfo", "colorWarning", "textSizeSmall", "textSizeMedium", "textSizeLarge", "outlinedSizeSmall", "outlinedSizeMedium", "outlinedSizeLarge", "containedSizeSmall", "containedSizeMedium", "containedSizeLarge", "sizeMedium", "sizeSmall", "sizeLarge", "fullWidth", "startIcon", "endIcon", "icon", "iconSizeSmall", "iconSizeMedium", "iconSizeLarge"]), R = /* @__PURE__ */ x.createContext({});
14
14
  process.env.NODE_ENV !== "production" && (R.displayName = "ButtonGroupContext");
15
- const N = /* @__PURE__ */ g.createContext(void 0);
15
+ const N = /* @__PURE__ */ x.createContext(void 0);
16
16
  process.env.NODE_ENV !== "production" && (N.displayName = "ButtonGroupButtonContext");
17
17
  const to = (o) => {
18
18
  const {
19
- color: n,
20
- disableElevation: a,
19
+ color: a,
20
+ disableElevation: n,
21
21
  fullWidth: e,
22
- size: i,
23
- variant: p,
24
- classes: s
25
- } = o, f = {
26
- root: ["root", p, `${p}${d(n)}`, `size${d(i)}`, `${p}Size${d(i)}`, `color${d(n)}`, a && "disableElevation", e && "fullWidth"],
22
+ size: p,
23
+ variant: i,
24
+ classes: u
25
+ } = o, s = {
26
+ root: ["root", i, `${i}${d(a)}`, `size${d(p)}`, `${i}Size${d(p)}`, `color${d(a)}`, n && "disableElevation", e && "fullWidth"],
27
27
  label: ["label"],
28
- startIcon: ["icon", "startIcon", `iconSize${d(i)}`],
29
- endIcon: ["icon", "endIcon", `iconSize${d(i)}`]
30
- }, $ = Q(f, oo, s);
28
+ startIcon: ["icon", "startIcon", `iconSize${d(p)}`],
29
+ endIcon: ["icon", "endIcon", `iconSize${d(p)}`]
30
+ }, y = Q(s, oo, u);
31
31
  return {
32
- ...s,
32
+ ...u,
33
33
  // forward the focused, disabled, etc. classes to the ButtonBase
34
- ...$
34
+ ...y
35
35
  };
36
36
  }, E = [{
37
37
  props: {
@@ -64,16 +64,16 @@ const to = (o) => {
64
64
  shouldForwardProp: (o) => q(o) || o === "classes",
65
65
  name: "MuiButton",
66
66
  slot: "Root",
67
- overridesResolver: (o, n) => {
67
+ overridesResolver: (o, a) => {
68
68
  const {
69
- ownerState: a
69
+ ownerState: n
70
70
  } = o;
71
- return [n.root, n[a.variant], n[`${a.variant}${d(a.color)}`], n[`size${d(a.size)}`], n[`${a.variant}Size${d(a.size)}`], a.color === "inherit" && n.colorInherit, a.disableElevation && n.disableElevation, a.fullWidth && n.fullWidth];
71
+ return [a.root, a[n.variant], a[`${n.variant}${d(n.color)}`], a[`size${d(n.size)}`], a[`${n.variant}Size${d(n.size)}`], n.color === "inherit" && a.colorInherit, n.disableElevation && a.disableElevation, n.fullWidth && a.fullWidth];
72
72
  }
73
73
  })(X(({
74
74
  theme: o
75
75
  }) => {
76
- const n = o.palette.mode === "light" ? o.palette.grey[300] : o.palette.grey[800], a = o.palette.mode === "light" ? o.palette.grey.A100 : o.palette.grey[700];
76
+ const a = o.palette.mode === "light" ? o.palette.grey[300] : o.palette.grey[800], n = o.palette.mode === "light" ? o.palette.grey.A100 : o.palette.grey[700];
77
77
  return {
78
78
  ...o.typography.button,
79
79
  minWidth: 64,
@@ -86,7 +86,7 @@ const to = (o) => {
86
86
  "&:hover": {
87
87
  textDecoration: "none"
88
88
  },
89
- [`&.${u.disabled}`]: {
89
+ [`&.${b.disabled}`]: {
90
90
  color: (o.vars || o).palette.action.disabled
91
91
  },
92
92
  variants: [{
@@ -107,10 +107,10 @@ const to = (o) => {
107
107
  "&:active": {
108
108
  boxShadow: (o.vars || o).shadows[8]
109
109
  },
110
- [`&.${u.focusVisible}`]: {
110
+ [`&.${b.focusVisible}`]: {
111
111
  boxShadow: (o.vars || o).shadows[6]
112
112
  },
113
- [`&.${u.disabled}`]: {
113
+ [`&.${b.disabled}`]: {
114
114
  color: (o.vars || o).palette.action.disabled,
115
115
  boxShadow: (o.vars || o).shadows[0],
116
116
  backgroundColor: (o.vars || o).palette.action.disabledBackground
@@ -126,7 +126,7 @@ const to = (o) => {
126
126
  borderColor: "var(--variant-outlinedBorder, currentColor)",
127
127
  backgroundColor: "var(--variant-outlinedBg)",
128
128
  color: "var(--variant-outlinedColor)",
129
- [`&.${u.disabled}`]: {
129
+ [`&.${b.disabled}`]: {
130
130
  border: `1px solid ${(o.vars || o).palette.action.disabledBackground}`
131
131
  }
132
132
  }
@@ -146,15 +146,15 @@ const to = (o) => {
146
146
  style: {
147
147
  "--variant-textColor": (o.vars || o).palette[e].main,
148
148
  "--variant-outlinedColor": (o.vars || o).palette[e].main,
149
- "--variant-outlinedBorder": o.vars ? `rgba(${o.vars.palette[e].mainChannel} / 0.5)` : v(o.palette[e].main, 0.5),
149
+ "--variant-outlinedBorder": o.vars ? `rgba(${o.vars.palette[e].mainChannel} / 0.5)` : g(o.palette[e].main, 0.5),
150
150
  "--variant-containedColor": (o.vars || o).palette[e].contrastText,
151
151
  "--variant-containedBg": (o.vars || o).palette[e].main,
152
152
  "@media (hover: hover)": {
153
153
  "&:hover": {
154
154
  "--variant-containedBg": (o.vars || o).palette[e].dark,
155
- "--variant-textBg": o.vars ? `rgba(${o.vars.palette[e].mainChannel} / ${o.vars.palette.action.hoverOpacity})` : v(o.palette[e].main, o.palette.action.hoverOpacity),
155
+ "--variant-textBg": o.vars ? `rgba(${o.vars.palette[e].mainChannel} / ${o.vars.palette.action.hoverOpacity})` : g(o.palette[e].main, o.palette.action.hoverOpacity),
156
156
  "--variant-outlinedBorder": (o.vars || o).palette[e].main,
157
- "--variant-outlinedBg": o.vars ? `rgba(${o.vars.palette[e].mainChannel} / ${o.vars.palette.action.hoverOpacity})` : v(o.palette[e].main, o.palette.action.hoverOpacity)
157
+ "--variant-outlinedBg": o.vars ? `rgba(${o.vars.palette[e].mainChannel} / ${o.vars.palette.action.hoverOpacity})` : g(o.palette[e].main, o.palette.action.hoverOpacity)
158
158
  }
159
159
  }
160
160
  }
@@ -165,12 +165,12 @@ const to = (o) => {
165
165
  style: {
166
166
  color: "inherit",
167
167
  borderColor: "currentColor",
168
- "--variant-containedBg": o.vars ? o.vars.palette.Button.inheritContainedBg : n,
168
+ "--variant-containedBg": o.vars ? o.vars.palette.Button.inheritContainedBg : a,
169
169
  "@media (hover: hover)": {
170
170
  "&:hover": {
171
- "--variant-containedBg": o.vars ? o.vars.palette.Button.inheritContainedHoverBg : a,
172
- "--variant-textBg": o.vars ? `rgba(${o.vars.palette.text.primaryChannel} / ${o.vars.palette.action.hoverOpacity})` : v(o.palette.text.primary, o.palette.action.hoverOpacity),
173
- "--variant-outlinedBg": o.vars ? `rgba(${o.vars.palette.text.primaryChannel} / ${o.vars.palette.action.hoverOpacity})` : v(o.palette.text.primary, o.palette.action.hoverOpacity)
171
+ "--variant-containedBg": o.vars ? o.vars.palette.Button.inheritContainedHoverBg : n,
172
+ "--variant-textBg": o.vars ? `rgba(${o.vars.palette.text.primaryChannel} / ${o.vars.palette.action.hoverOpacity})` : g(o.palette.text.primary, o.palette.action.hoverOpacity),
173
+ "--variant-outlinedBg": o.vars ? `rgba(${o.vars.palette.text.primaryChannel} / ${o.vars.palette.action.hoverOpacity})` : g(o.palette.text.primary, o.palette.action.hoverOpacity)
174
174
  }
175
175
  }
176
176
  }
@@ -237,13 +237,13 @@ const to = (o) => {
237
237
  "&:hover": {
238
238
  boxShadow: "none"
239
239
  },
240
- [`&.${u.focusVisible}`]: {
240
+ [`&.${b.focusVisible}`]: {
241
241
  boxShadow: "none"
242
242
  },
243
243
  "&:active": {
244
244
  boxShadow: "none"
245
245
  },
246
- [`&.${u.disabled}`]: {
246
+ [`&.${b.disabled}`]: {
247
247
  boxShadow: "none"
248
248
  }
249
249
  }
@@ -259,11 +259,11 @@ const to = (o) => {
259
259
  })), ao = c("span", {
260
260
  name: "MuiButton",
261
261
  slot: "StartIcon",
262
- overridesResolver: (o, n) => {
262
+ overridesResolver: (o, a) => {
263
263
  const {
264
- ownerState: a
264
+ ownerState: n
265
265
  } = o;
266
- return [n.startIcon, n[`iconSize${d(a.size)}`]];
266
+ return [a.startIcon, a[`iconSize${d(n.size)}`]];
267
267
  }
268
268
  })({
269
269
  display: "inherit",
@@ -280,11 +280,11 @@ const to = (o) => {
280
280
  }), no = c("span", {
281
281
  name: "MuiButton",
282
282
  slot: "EndIcon",
283
- overridesResolver: (o, n) => {
283
+ overridesResolver: (o, a) => {
284
284
  const {
285
- ownerState: a
285
+ ownerState: n
286
286
  } = o;
287
- return [n.endIcon, n[`iconSize${d(a.size)}`]];
287
+ return [a.endIcon, a[`iconSize${d(n.size)}`]];
288
288
  }
289
289
  })({
290
290
  display: "inherit",
@@ -298,13 +298,13 @@ const to = (o) => {
298
298
  marginRight: -2
299
299
  }
300
300
  }, ...E]
301
- }), T = /* @__PURE__ */ g.forwardRef(function(n, a) {
302
- const e = g.useContext(R), i = g.useContext(N), p = J(e, n), s = K({
303
- props: p,
301
+ }), T = /* @__PURE__ */ x.forwardRef(function(a, n) {
302
+ const e = x.useContext(R), p = x.useContext(N), i = J(e, a), u = K({
303
+ props: i,
304
304
  name: "MuiButton"
305
305
  }), {
306
- children: f,
307
- color: $ = "primary",
306
+ children: s,
307
+ color: y = "primary",
308
308
  component: w = "button",
309
309
  className: P,
310
310
  disabled: m = !1,
@@ -318,9 +318,9 @@ const to = (o) => {
318
318
  type: k,
319
319
  variant: F = "text",
320
320
  ...G
321
- } = s, y = {
322
- ...s,
323
- color: $,
321
+ } = u, B = {
322
+ ...u,
323
+ color: y,
324
324
  component: w,
325
325
  disabled: m,
326
326
  disableElevation: W,
@@ -329,27 +329,27 @@ const to = (o) => {
329
329
  size: M,
330
330
  type: k,
331
331
  variant: F
332
- }, b = to(y), L = I && /* @__PURE__ */ l(ao, {
333
- className: b.startIcon,
334
- ownerState: y,
332
+ }, v = to(B), L = I && /* @__PURE__ */ l(ao, {
333
+ className: v.startIcon,
334
+ ownerState: B,
335
335
  children: I
336
336
  }), D = h && /* @__PURE__ */ l(no, {
337
- className: b.endIcon,
338
- ownerState: y,
337
+ className: v.endIcon,
338
+ ownerState: B,
339
339
  children: h
340
- }), U = i || "";
340
+ }), U = p || "";
341
341
  return /* @__PURE__ */ H(ro, {
342
- ownerState: y,
343
- className: O(e.className, b.root, P, U),
342
+ ownerState: B,
343
+ className: O(e.className, v.root, P, U),
344
344
  component: w,
345
345
  disabled: m,
346
346
  focusRipple: !C,
347
- focusVisibleClassName: O(b.focusVisible, V),
348
- ref: a,
347
+ focusVisibleClassName: O(v.focusVisible, V),
348
+ ref: n,
349
349
  type: k,
350
350
  ...G,
351
- classes: b,
352
- children: [L, f, D]
351
+ classes: v,
352
+ children: [L, s, D]
353
353
  });
354
354
  });
355
355
  process.env.NODE_ENV !== "production" && (T.propTypes = {
@@ -446,7 +446,7 @@ process.env.NODE_ENV !== "production" && (T.propTypes = {
446
446
  */
447
447
  variant: t.oneOfType([t.oneOf(["contained", "outlined", "text"]), t.string])
448
448
  });
449
- const B = c(T)`
449
+ const $ = c(T)`
450
450
  text-transform: none;
451
451
  &:disabled {
452
452
  opacity: 0.5;
@@ -455,7 +455,7 @@ const B = c(T)`
455
455
  justify-content: center;
456
456
  align-items: center;
457
457
  }
458
- `, eo = c(B)`
458
+ `, eo = c($)`
459
459
  background-color: ${r.colors.green};
460
460
  border-radius: 0;
461
461
  height: 2.5rem;
@@ -475,12 +475,12 @@ const B = c(T)`
475
475
  &:disabled {
476
476
  background-color: ${r.colors.darkGreen};
477
477
  }
478
- `, io = c(B)`
478
+ `, io = c($)`
479
479
  color: ${r.colors.black};
480
480
  border: 3px solid ${r.colors.blue};
481
481
  padding: 0.5rem 2rem;
482
- `, z = c(B)(({ width: o = "114px" }) => ({
483
- ...x`
482
+ `, z = c($)(({ width: o = "114px" }) => ({
483
+ ...f`
484
484
  box-sizing: border-box;
485
485
  background-color: ${r.colors.bibiBlue};
486
486
  border-radius: 0;
@@ -498,7 +498,7 @@ const B = c(T)`
498
498
  }
499
499
  `
500
500
  })), so = c(z)(({ active: o }) => ({
501
- ...x`
501
+ ...f`
502
502
  background-color: ${o && r.colors.white};
503
503
  color: ${o && r.colors.bibiBlue};
504
504
  &:hover,
@@ -508,7 +508,7 @@ const B = c(T)`
508
508
  }
509
509
  `
510
510
  })), lo = c(z)(() => ({
511
- ...x`
511
+ ...f`
512
512
  background-color: ${r.colors.white};
513
513
  color: ${r.colors.bibiBlue};
514
514
  &:hover,
@@ -522,31 +522,34 @@ const B = c(T)`
522
522
  border-radius: 8px;
523
523
  `, po = c(S, {
524
524
  shouldForwardProp: (o) => typeof o == "string" && Z(o)
525
- })(({ size: o, color: n, highlightColor: a }) => ({
526
- ...x`
527
- display: flex;
528
- align-items: center;
529
- justify-content: center;
530
- background-color: transparent;
531
- transition: 313ms all ease-in-out;
525
+ })(
526
+ ({ size: o, color: a, highlightColor: n, hoverColor: e }) => ({
527
+ ...f`
528
+ display: flex;
529
+ align-items: center;
530
+ justify-content: center;
531
+ background-color: transparent;
532
+ transition: 313ms all ease-in-out;
532
533
 
533
- &:hover,
534
- :focus-visible {
535
- svg {
536
- filter: drop-shadow(0 0 6px ${a}) drop-shadow(0 0 6px ${a})
537
- drop-shadow(0 0 6px ${a}) drop-shadow(0 0 6px ${a});
534
+ &:hover,
535
+ :focus-visible {
536
+ svg {
537
+ filter: drop-shadow(0 0 6px ${n}) drop-shadow(0 0 6px ${n})
538
+ drop-shadow(0 0 6px ${n}) drop-shadow(0 0 6px ${n});
539
+ fill: ${e || a};
540
+ }
538
541
  }
539
- }
540
542
 
541
- svg {
542
- transition: 313ms all ease-in-out;
543
- fill: ${n};
544
- width: ${o}px;
545
- height: ${o}px;
546
- }
547
- `
548
- })), uo = c(B)(({ active: o }) => ({
549
- ...x`
543
+ svg {
544
+ transition: 313ms all ease-in-out;
545
+ fill: ${a};
546
+ width: ${o}px;
547
+ height: ${o}px;
548
+ }
549
+ `
550
+ })
551
+ ), uo = c($)(({ active: o }) => ({
552
+ ...f`
550
553
  box-sizing: border-box;
551
554
  background-color: ${o ? r.colors.black : r.colors.white};
552
555
  height: 28px;
@@ -566,13 +569,14 @@ const B = c(T)`
566
569
  `
567
570
  })), So = ({
568
571
  variant: o = 1,
569
- size: n = 50,
570
- color: a = r.colors.darkGreen,
572
+ size: a = 50,
573
+ color: n = r.colors.darkGreen,
571
574
  highlightColor: e = r.colors.dandelion,
575
+ hoverColor: p = r.colors.green,
572
576
  children: i,
573
- active: p,
577
+ active: u,
574
578
  ...s
575
- }) => o === "bibi" ? /* @__PURE__ */ l(z, { ...s, children: i }) : o === "bibiOutlined" ? /* @__PURE__ */ l(so, { ...s, children: i }) : o === "bibiInverse" ? /* @__PURE__ */ l(lo, { ...s, children: i }) : o === "unstyled" ? /* @__PURE__ */ l(co, { ...s, children: i }) : o === 2 ? /* @__PURE__ */ l(io, { ...s, children: /* @__PURE__ */ l("span", { children: i }) }) : o === "icon" ? /* @__PURE__ */ l(po, { className: "jcIconButton", ...{ size: n, color: a, highlightColor: e }, ...s, children: i }) : o === "filter" ? /* @__PURE__ */ l(uo, { className: "jcFilterButton", active: p, ...s, children: i }) : /* @__PURE__ */ l(eo, { ...s, children: /* @__PURE__ */ l("span", { children: i }) });
579
+ }) => o === "bibi" ? /* @__PURE__ */ l(z, { ...s, children: i }) : o === "bibiOutlined" ? /* @__PURE__ */ l(so, { ...s, children: i }) : o === "bibiInverse" ? /* @__PURE__ */ l(lo, { ...s, children: i }) : o === "unstyled" ? /* @__PURE__ */ l(co, { ...s, children: i }) : o === 2 ? /* @__PURE__ */ l(io, { ...s, children: /* @__PURE__ */ l("span", { children: i }) }) : o === "icon" ? /* @__PURE__ */ l(po, { className: "jcIconButton", ...{ size: a, color: n, highlightColor: e, hoverColor: p }, ...s, children: i }) : o === "filter" ? /* @__PURE__ */ l(uo, { className: "jcFilterButton", active: u, ...s, children: i }) : /* @__PURE__ */ l(eo, { ...s, children: /* @__PURE__ */ l("span", { children: i }) });
576
580
  export {
577
581
  So as Button,
578
582
  So as default
package/package.json CHANGED
@@ -1,7 +1,7 @@
1
1
  {
2
2
  "name": "jcicl",
3
3
  "private": false,
4
- "version": "0.0.275",
4
+ "version": "0.0.279",
5
5
  "description": "Component library for the websites of Johnson County Iowa",
6
6
  "license": "MIT",
7
7
  "homepage": "https://devops.jc.net/JCIT/Business%20Solutions%20Delivery/_git/JCComponentLibrary?path=%2FREADME.md&version=GBmaster",