@yakad/ui 1.2.43-beta → 1.2.45-beta

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 (11) hide show
  1. package/button/button.d.ts +1 -1
  2. package/button/button.js.map +1 -1
  3. package/button/button.module.css +21 -4
  4. package/button/button.tsx +2 -1
  5. package/card/card.module.css +2 -3
  6. package/container/container.d.ts +1 -0
  7. package/container/container.js +1 -1
  8. package/container/container.js.map +1 -1
  9. package/container/container.module.css +16 -0
  10. package/container/container.tsx +2 -0
  11. package/package.json +1 -1
package/button/button.d.ts CHANGED
@@ -2,7 +2,7 @@ import React from "react";
2
2
  interface ButtonProps extends React.HTMLAttributes<HTMLButtonElement> {
3
3
  loading?: boolean;
4
4
  size?: "small" | "medium" | "large";
5
- variant?: "text" | "outlined" | "filled" | "filledtonal" | "tonal" | "elevated" | "link";
5
+ variant?: "text" | "outlined" | "filled" | "filledtonal" | "tonal" | "elevated" | "link" | "fab";
6
6
  borderStyle?: "none" | "semi" | "rounded";
7
7
  icon?: JSX.Element;
8
8
  iconPosition?: "start" | "end";
package/button/button.js.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":"button.js","sourceRoot":"","sources":["button.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAC1B,OAAO,EAAE,cAAc,EAAE,MAAM,YAAY,CAAC;AAC5C,OAAO,MAAM,MAAM,qBAAqB,CAAC;AACzC,OAAO,OAAO,MAAM,oBAAoB,CAAC;AACzC,OAAO,OAAO,MAAM,oBAAoB,CAAC;AA2BzC,MAAM,WAAW,GAAe;IAC5B,KAAK,EAAE,CAAC;IACR,MAAM,EAAE,GAAG;IACX,KAAK,EAAE,CAAC;CACX,CAAC;AAEF,SAAS,MAAM,CAAC,KAAkB;IAC9B,MAAM,aAAa,GAAG,KAAK,CAAC,YAAY,KAAK,KAAK,CAAC;IACnD,MAAM,aAAa,GACf,CAAC,KAAK,CAAC,IAAI,IAAI,CAAC,KAAK,CAAC,OAAO,IAAI,KAAK,CAAC,eAAe,KAAK,QAAQ,CAAC,CAAC;IAEzE,MAAM,gBAAgB,GAAG,cAAc,CACnC,MAAM,CAAC,MAAM,EACb,KAAK,CAAC,OAAO,CAAC,CAAC,CAAC,MAAM,CAAC,OAAO,CAAC,CAAC,CAAC,EAAE,EACnC,KAAK,CAAC,OAAO,CAAC,CAAC,CAAC,MAAM,CAAC,KAAK,CAAC,OAAO,CAAC,CAAC,CAAC,CAAC,MAAM,CAAC,IAAI,EACnD,KAAK,CAAC,OAAO,IAAI,aAAa,CAAC,CAAC,CAAC,MAAM,CAAC,qBAAqB,CAAC,CAAC,CAAC,EAAE,EAClE,KAAK,CAAC,IAAI,CAAC,CAAC,CAAC,MAAM,CAAC,KAAK,CAAC,IAAI,CAAC,CAAC,CAAC,CAAC,MAAM,CAAC,MAAM,EAC/C,KAAK,CAAC,WAAW,CAAC,CAAC,CAAC,MAAM,CAAC,KAAK,CAAC,WAAW,CAAC,CAAC,CAAC,CAAC,MAAM,CAAC,OAAO,EAC9D,KAAK,CAAC,IAAI,IAAI,CAAC,KAAK,CAAC,QAAQ,CAAC,CAAC,CAAC,MAAM,CAAC,UAAU,CAAC,CAAC,CAAC,EAAE,EACtD,KAAK,CAAC,SAAU,CACnB,CAAC;IAEF,OAAO,CACH,mCAAY,KAAK,EAAE,SAAS,EAAE,gBAAgB;QACzC,aAAa,CAAC,CAAC,CAAC,KAAK,CAAC,QAAQ,CAAC,CAAC,CAAC,IAAI;QACrC,KAAK,CAAC,OAAO,CAAC,CAAC,CAAC,CACb,6BACI,SAAS,EAAE,cAAc,CACrB,aAAa,CAAC,CAAC,CAAC,MAAM,CAAC,cAAc,CAAC,CAAC,CAAC,EAAE,EAC1C,MAAM,CAAC,iBAAiB,CAC3B;YAED,oBAAC,OAAO,IAAC,IAAI,EAAE,KAAK,CAAC,IAAI,EAAE,OAAO,EAAE,KAAK,CAAC,cAAc,GAAI,CAC1D,CACT,CAAC,CAAC,CAAC,IAAI;QACP,KAAK,CAAC,IAAI,CAAC,CAAC,CAAC,CACV,oBAAC,OAAO,IACJ,SAAS,EAAE,MAAM,CAAC,cAAc,EAChC,IAAI,EACA,KAAK,CAAC,IAAI;gBACN,CAAC,CAAC,WAAW,CAAC,KAAK,CAAC,IAAI,CAAC;gBACzB,CAAC,CAAC,WAAW,CAAC,MAAM,IAG3B,KAAK,CAAC,IAAI,CACL,CACb,CAAC,CAAC,CAAC,IAAI;QACP,CAAC,aAAa,CAAC,CAAC,CAAC,KAAK,CAAC,QAAQ,CAAC,CAAC,CAAC,IAAI,CAClC,CACZ,CAAC;AACN,CAAC;AAED,eAAe,MAAM,CAAC"}
1
+ {"version":3,"file":"button.js","sourceRoot":"","sources":["button.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAC1B,OAAO,EAAE,cAAc,EAAE,MAAM,YAAY,CAAC;AAC5C,OAAO,MAAM,MAAM,qBAAqB,CAAC;AACzC,OAAO,OAAO,MAAM,oBAAoB,CAAC;AACzC,OAAO,OAAO,MAAM,oBAAoB,CAAC;AA4BzC,MAAM,WAAW,GAAe;IAC5B,KAAK,EAAE,CAAC;IACR,MAAM,EAAE,GAAG;IACX,KAAK,EAAE,CAAC;CACX,CAAC;AAEF,SAAS,MAAM,CAAC,KAAkB;IAC9B,MAAM,aAAa,GAAG,KAAK,CAAC,YAAY,KAAK,KAAK,CAAC;IACnD,MAAM,aAAa,GACf,CAAC,KAAK,CAAC,IAAI,IAAI,CAAC,KAAK,CAAC,OAAO,IAAI,KAAK,CAAC,eAAe,KAAK,QAAQ,CAAC,CAAC;IAEzE,MAAM,gBAAgB,GAAG,cAAc,CACnC,MAAM,CAAC,MAAM,EACb,KAAK,CAAC,OAAO,CAAC,CAAC,CAAC,MAAM,CAAC,OAAO,CAAC,CAAC,CAAC,EAAE,EACnC,KAAK,CAAC,OAAO,CAAC,CAAC,CAAC,MAAM,CAAC,KAAK,CAAC,OAAO,CAAC,CAAC,CAAC,CAAC,MAAM,CAAC,IAAI,EACnD,KAAK,CAAC,OAAO,IAAI,aAAa,CAAC,CAAC,CAAC,MAAM,CAAC,qBAAqB,CAAC,CAAC,CAAC,EAAE,EAClE,KAAK,CAAC,IAAI,CAAC,CAAC,CAAC,MAAM,CAAC,KAAK,CAAC,IAAI,CAAC,CAAC,CAAC,CAAC,MAAM,CAAC,MAAM,EAC/C,KAAK,CAAC,WAAW,CAAC,CAAC,CAAC,MAAM,CAAC,KAAK,CAAC,WAAW,CAAC,CAAC,CAAC,CAAC,MAAM,CAAC,OAAO,EAC9D,KAAK,CAAC,IAAI,IAAI,CAAC,KAAK,CAAC,QAAQ,CAAC,CAAC,CAAC,MAAM,CAAC,UAAU,CAAC,CAAC,CAAC,EAAE,EACtD,KAAK,CAAC,SAAU,CACnB,CAAC;IAEF,OAAO,CACH,mCAAY,KAAK,EAAE,SAAS,EAAE,gBAAgB;QACzC,aAAa,CAAC,CAAC,CAAC,KAAK,CAAC,QAAQ,CAAC,CAAC,CAAC,IAAI;QACrC,KAAK,CAAC,OAAO,CAAC,CAAC,CAAC,CACb,6BACI,SAAS,EAAE,cAAc,CACrB,aAAa,CAAC,CAAC,CAAC,MAAM,CAAC,cAAc,CAAC,CAAC,CAAC,EAAE,EAC1C,MAAM,CAAC,iBAAiB,CAC3B;YAED,oBAAC,OAAO,IAAC,IAAI,EAAE,KAAK,CAAC,IAAI,EAAE,OAAO,EAAE,KAAK,CAAC,cAAc,GAAI,CAC1D,CACT,CAAC,CAAC,CAAC,IAAI;QACP,KAAK,CAAC,IAAI,CAAC,CAAC,CAAC,CACV,oBAAC,OAAO,IACJ,SAAS,EAAE,MAAM,CAAC,cAAc,EAChC,IAAI,EACA,KAAK,CAAC,IAAI;gBACN,CAAC,CAAC,WAAW,CAAC,KAAK,CAAC,IAAI,CAAC;gBACzB,CAAC,CAAC,WAAW,CAAC,MAAM,IAG3B,KAAK,CAAC,IAAI,CACL,CACb,CAAC,CAAC,CAAC,IAAI;QACP,CAAC,aAAa,CAAC,CAAC,CAAC,KAAK,CAAC,QAAQ,CAAC,CAAC,CAAC,IAAI,CAClC,CACZ,CAAC;AACN,CAAC;AAED,eAAe,MAAM,CAAC"}
package/button/button.module.css CHANGED
@@ -3,6 +3,7 @@
3
3
  display: flex;
4
4
  align-items: center;
5
5
  line-height: 3rem;
6
+ font-weight: 700;
6
7
  padding: 0 var(--padding);
7
8
  border: none;
8
9
  background: none;
@@ -15,7 +16,7 @@
15
16
  .small {
16
17
  min-width: 3rem;
17
18
  height: 3rem;
18
- --padding: 1.2rem;
19
+ --padding: 2rem;
19
20
  gap: 0.4rem;
20
21
  font-size: 1.2rem;
21
22
  --border-radius: 1.5rem;
@@ -23,15 +24,15 @@
23
24
  .medium {
24
25
  min-width: 4rem;
25
26
  height: 4rem;
26
- --padding: 1.8rem;
27
+ --padding: 2.4rem;
27
28
  gap: 0.8rem;
28
- font-size: 1.6rem;
29
+ font-size: 1.4rem;
29
30
  --border-radius: 2rem;
30
31
  }
31
32
  .large {
32
33
  min-width: 5rem;
33
34
  height: 5rem;
34
- --padding: 2.6rem;
35
+ --padding: 3.2rem;
35
36
  gap: 1.1rem;
36
37
  font-size: 1.8rem;
37
38
  --border-radius: 2.5rem;
@@ -67,8 +68,14 @@
67
68
  .button:invalid {
68
69
  border: 0.1rem solid var(--errorColor, #b3261e);
69
70
  }
71
+ .text {
72
+ color: var(--primaryColor, #0b57d0);
73
+ fill: var(--primaryColor, #0b57d0);
74
+ }
70
75
 
71
76
  .outlined {
77
+ color: var(--primaryColor, #0b57d0);
78
+ fill: var(--primaryColor, #0b57d0);
72
79
  border: 0.1rem solid #7d7d7d70;
73
80
  }
74
81
  .filled {
@@ -98,6 +105,16 @@
98
105
  position: relative;
99
106
  transition: 0.3s;
100
107
  }
108
+ .fab {
109
+ border-radius: 1.3rem;
110
+ height: 5.6;
111
+ min-width: unset;
112
+ padding: 1.6rem;
113
+ font-size: 1.6rem;
114
+ background: var(--primaryContainerColor, #d3e3fd);
115
+ color: var(--onPrimaryContainerColor, #041e49);
116
+ fill: var(--onPrimaryContainerColor, #041e49);
117
+ }
101
118
  .link:before {
102
119
  content: "";
103
120
  position: absolute;
package/button/button.tsx CHANGED
@@ -14,7 +14,8 @@ interface ButtonProps extends React.HTMLAttributes<HTMLButtonElement> {
14
14
  | "filledtonal"
15
15
  | "tonal"
16
16
  | "elevated"
17
- | "link";
17
+ | "link"
18
+ | "fab";
18
19
  borderStyle?: "none" | "semi" | "rounded";
19
20
  icon?: JSX.Element;
20
21
  iconPosition?: "start" | "end";
package/card/card.module.css CHANGED
@@ -6,7 +6,6 @@
6
6
  background: var(--surfaceContainerHighestColor, #e6e0e9);
7
7
  color: var(--onSurfaceColor, #1c1b1f);
8
8
  fill: var(--onSurfaceColor, #1c1b1f);
9
- box-shadow: 0px 6px 10px 0px hsla(0, 0%, 0%, 0.14),
10
- 0px 1px 18px 0px hsla(0, 0%, 0%, 0.12),
11
- 0px 3px 5px -1px hsla(0, 0%, 0%, 0.2);
9
+ box-shadow: 0px 3px 3px -2px rgb(0 0 0 / 20%),
10
+ 0px 3px 4px 0px rgb(0 0 0 / 14%), 0px 1px 8px 0px rgb(0 0 0 / 12%);
12
11
  }
package/container/container.d.ts CHANGED
@@ -2,6 +2,7 @@ import React from "react";
2
2
  declare type ScreenSize = "xs" | "sm" | "md" | "lg" | "xl";
3
3
  interface ContainerProps extends React.HTMLAttributes<HTMLDivElement> {
4
4
  maxWidth?: ScreenSize;
5
+ background?: "dotted";
5
6
  }
6
7
  declare function Container(props: ContainerProps): JSX.Element;
7
8
  export default Container;
package/container/container.js CHANGED
@@ -2,7 +2,7 @@ import React from "react";
2
2
  import { joinClassNames } from "@yakad/lib";
3
3
  import styles from "./container.module.css";
4
4
  function Container(props) {
5
- const joinedClassNames = joinClassNames(props.maxWidth ? styles[props.maxWidth] : "", styles.container, props.className);
5
+ const joinedClassNames = joinClassNames(props.maxWidth ? styles[props.maxWidth] : "", props.background ? styles[props.background] : "", styles.container, props.className);
6
6
  return (React.createElement("div", { ...props, className: joinedClassNames }, props.children));
7
7
  }
8
8
  export default Container;
package/container/container.js.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":"container.js","sourceRoot":"","sources":["container.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAC1B,OAAO,EAAE,cAAc,EAAc,MAAM,YAAY,CAAC;AACxD,OAAO,MAAM,MAAM,wBAAwB,CAAC;AAQ5C,SAAS,SAAS,CAAC,KAAqB;IACtC,MAAM,gBAAgB,GAAG,cAAc,CACrC,KAAK,CAAC,QAAQ,CAAC,CAAC,CAAC,MAAM,CAAC,KAAK,CAAC,QAAQ,CAAC,CAAC,CAAC,CAAC,EAAE,EAC5C,MAAM,CAAC,SAAS,EAChB,KAAK,CAAC,SAAU,CACjB,CAAC;IAEF,OAAO,CACL,gCAAS,KAAK,EAAE,SAAS,EAAE,gBAAgB,IACxC,KAAK,CAAC,QAAQ,CACX,CACP,CAAC;AACJ,CAAC;AAED,eAAe,SAAS,CAAC"}
1
+ {"version":3,"file":"container.js","sourceRoot":"","sources":["container.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAC1B,OAAO,EAAE,cAAc,EAAc,MAAM,YAAY,CAAC;AACxD,OAAO,MAAM,MAAM,wBAAwB,CAAC;AAS5C,SAAS,SAAS,CAAC,KAAqB;IACtC,MAAM,gBAAgB,GAAG,cAAc,CACrC,KAAK,CAAC,QAAQ,CAAC,CAAC,CAAC,MAAM,CAAC,KAAK,CAAC,QAAQ,CAAC,CAAC,CAAC,CAAC,EAAE,EAC5C,KAAK,CAAC,UAAU,CAAC,CAAC,CAAC,MAAM,CAAC,KAAK,CAAC,UAAU,CAAC,CAAC,CAAC,CAAC,EAAE,EAChD,MAAM,CAAC,SAAS,EAChB,KAAK,CAAC,SAAU,CACjB,CAAC;IAEF,OAAO,CACL,gCAAS,KAAK,EAAE,SAAS,EAAE,gBAAgB,IACxC,KAAK,CAAC,QAAQ,CACX,CACP,CAAC;AACJ,CAAC;AAED,eAAe,SAAS,CAAC"}
package/container/container.module.css CHANGED
@@ -2,22 +2,38 @@ div.container {
2
2
  display: flex;
3
3
  flex-direction: inherit;
4
4
  width: 100%;
5
+ padding: 2rem;
5
6
  margin: auto;
6
7
  box-sizing: border-box;
7
8
  }
8
9
 
9
10
  div.container.xs {
10
11
  max-width: 44.4rem;
12
+ padding-left: calc((100% - 44.4rem)/2);
13
+ padding-right: calc((100% - 44.4rem)/2);
11
14
  }
12
15
  div.container.sm {
13
16
  max-width: 60rem;
17
+ padding-left: calc((100% - 60rem)/2);
18
+ padding-right: calc((100% - 60rem)/2);
14
19
  }
15
20
  div.container.md {
16
21
  max-width: 90rem;
22
+ padding-left: calc((100% - 90rem)/2);
23
+ padding-right: calc((100% - 90rem)/2);
17
24
  }
18
25
  div.container.lg {
19
26
  max-width: 120rem;
27
+ padding-left: calc((100% - 120rem)/2);
28
+ padding-right: calc((100% - 120rem)/2);
20
29
  }
21
30
  div.container.xl {
22
31
  max-width: 150rem;
32
+ padding-left: calc((100% - 150rem)/2);
33
+ padding-right: calc((100% - 150rem)/2);
23
34
  }
35
+
36
+ div.container.dotted {
37
+ background-image: radial-gradient(var(--surfaceContainerLowestColor) 0.8px, var(--surfaceContainerHighestColor) 0.5px);
38
+ background-size: 10px 10px;
39
+ }
package/container/container.tsx CHANGED
@@ -6,11 +6,13 @@ type ScreenSize = "xs" | "sm" | "md" | "lg" | "xl";
6
6
 
7
7
  interface ContainerProps extends React.HTMLAttributes<HTMLDivElement> {
8
8
  maxWidth?: ScreenSize;
9
+ background?: "dotted";
9
10
  }
10
11
 
11
12
  function Container(props: ContainerProps) {
12
13
  const joinedClassNames = joinClassNames(
13
14
  props.maxWidth ? styles[props.maxWidth] : "",
15
+ props.background ? styles[props.background] : "",
14
16
  styles.container,
15
17
  props.className!
16
18
  );
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@yakad/ui",
3
- "version": "1.2.43-beta",
3
+ "version": "1.2.45-beta",
4
4
  "description": "",
5
5
  "main": "./src/index.js",
6
6
  "scripts": {